在Angular 6中,一个项目下存在多个应用程序。

19
如何在Angular 6的一个项目下创建多个应用程序? 在新的angular.json文件中,没有"app":[]数组,我们以前手动创建/添加多个应用程序。此时也没有找到正确的文档说明如何在单个项目中创建多个应用程序。任何帮助将不胜感激。谢谢。

1
但是有一个项目数组。还有这个命令:https://github.com/angular/angular-cli/wiki/generate-application - JB Nizet
嘿,你解决了吗?你有一个我可以看看的示例项目吗? - Kay
@Kay,请查看martzcodes的答案,我已经在我的项目中按照那些步骤进行了。正如我们之前提到的,项目结构仍然不够完善,但这是目前Angular团队提供的。 - BhargavG
4个回答

16

像 @JB Nizet 说的那样...您可以使用 生成应用程序(https://github.com/angular/angular-cli/wiki/generate-application

<code>ng generate application <application-name>
</code>

在项目文件夹中生成一个应用程序,然后使用特定工具进行服务。

<code>ng serve --project <application-name>
</code>

同样地,你可以使用ng generate library创建组件库(https://github.com/angular/angular-cli/wiki/generate-library)。

<code>ng generate library <library-name>
</code>

用于多个项目的共同组件。这些组件都会被安装在/projects文件夹中,除非您在执行ng new时更改了项目根目录。


谢谢您的回复。实际上我使用了 ng generate application <name> 命令在现有项目中创建了一个新的应用程序,但是现在我在项目结构方面遇到了一些问题。当我创建项目时,它遵循以下结构:project-name -> project-name -> src -> app。现在当我通过 ng generate 命令创建新应用程序时,它会创建一个新的“project”目录,并在其中创建一个新的应用程序。所以我得到了一个应用程序在“project”文件夹里面,另一个在那个文件夹外面,这在我看来不是一个好的结构。我显然不能将我的原始应用程序移动到 project 文件夹中。还有其他方法吗? - BhargavG
有趣的是...但我在几天前在Github上创建了这个确切的问题:https://github.com/angular/angular-cli/issues/11402和https://dev59.com/zazka4cB1Zd3GeqP9oPs - martzcodes

5
如果您有一个包含多个应用的项目,请使用Angular升级指南(https://update.angular.io/)中的说明来升级您的应用程序。在执行升级时,其中一步是运行。
ng upgrade @angular/cli

一旦您将@angular/cli升级到v6+,它会使用现有的angular-cli.json文件为多个应用程序生成新的angular.json文件。升级Angular CLI 或者,您可以手动编辑angular.json文件,将新应用程序添加到现有项目中,并针对另一个应用程序 编辑JSON文件。
ng serve --project="second-app"

ng build --prod --project="second-app" // build prod app

1
现在不需要手动创建了,他们给我们提供了ng generate命令来创建新的应用程序。但是它所创建的项目结构并不完善,而且有点令人困惑,这是我真诚的看法。请阅读@martzcodes回复中的评论。 - BhargavG

2

使用--createApplication="false"创建工作区

ng new MultipleApps --createApplication="false"
cd MultipleApps  

使用 ng generate application 可以添加多个应用程序。
ng generate application app1
ng generate application app2

要运行这个应用程序,请使用ng serve

ng serve app1

来源:在一个项目中使用多个Angular应用程序


0
为了让我的应用程序正常工作,我从主要的app.component.html文件中删除了除

之外的所有内容。
<router-outlet></router-outlet>. 

然后我在app-routing.module.ts文件中添加了一个路由:

{path: '**', redirectTo: 'newApp'}

如果在主要的 app.component 中没有任何内容,应用程序将自动重定向到您的“newApp”


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接