Question

如何在具有多个dist文件夹的Angular 6项目中创建多个应用程序？因此您可以独立部署应用程序。

我正在创建一个项目，并且在项目内部，我使用命令创建了两个应用程序： ng g应用程序app1 ng g应用程序app2

如果我独立构建它们，则会得到两个不同的分发文件夹 ng build app1 --prod ng build app2 --prod

但是，如果我按照以下方式构建整个项目，我希望能够通过链接将app1路由至app2： ng build --prod

这两个应用程序都压缩到一个dist文件夹中，我希望将两个文件夹app1和app2作为独立的dist文件夹，因此我可以独立部署它们，因此我面临的问题是能够从app1路由到app2。 / p>

Answer 1

在NGIR项目中，我正在创建两个项目（一个用于客户端，另一个用于服务器端）

检查angular.json，将outputPath更改为您喜欢的任何目录

您可以为您的项目做同样的事情

希望有帮助。

Answer 2

我相信现在可以使用内置工具来实现；您可以在"projects"文件的angular.json节点中配置多个项目。

以下是文件的摘要：

"newProjectRoot": "projects",
  "projects": {
    "my-angular-project": {
      "root": "",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",

因此，您可能没有多个src目录，而是拥有多个目录，每个目录中都有自己的Angular项目。

Answer 3

不确定它在 Angular 6 中的情况，但在 Angular 8 和更新版本中，您基本上有两个选择：

在其下创建 Angular 工作区和多个应用程序。您还可以在此工作区下拥有库，因此除了 package.json 之外，您还可以在（组件、服务、资产等）这些应用程序之间共享公共内容。例如：

ng new PlaygroundWorkspace --create-application=false

ng 生成应用程序 app-one --routing=true ng 生成应用程序 app-2 --routing=true

ng 生成库 lib-mylib

优点：应用程序是独立的 - 你有两个版本（dist/app-one 和 dist/app-two）

缺点：您不能拥有“通用”路由。假设您想要一个通用菜单（然后最好放在 lib 中），这样两个应用程序中将显示相同的菜单（使用 routerLink）：

APP ONE - page 1 ... url:port/app-one/page1
APP ONE - page 2 ... url:port/app-one/page2
APP TWO - page 1 ... url:port/app-two/page1
APP TWO - page 2 ... url:port/app-two/page2

但是由于 Angular 是 SPA（由于 Routing 和 routerLink，请求不会发送到服务器），路由仅在您打开的“实际”应用程序中工作。所以例如如果您在 /app-one/ 中，导航（在 page1 和 page2 之间）就在那里工作，单击 app-2 的链接 (routerLink) 不起作用。如果您手动输入 url 到应用二，那么您将进入应用二和应用一链接 (routerLink)。

拥有主 Angular 应用程序和延迟加载的子应用程序（组件），如此处所述：how to navigate between multiple applications under single project in Angular 6 by GreyBeardedGeek。或https://medium.com/disney-streaming/combining-multiple-angular-applications-into-a-single-one-e87d530d6527

如何在一个带有多个dist文件夹的Angular 6项目中创建多个应用程序？

3 个答案: