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

Question

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

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

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

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

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

Answer 1

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

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

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

希望能帮助到你。

Answer 2

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

这是文件的一个片段：

"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 和更新版本中，您基本上有两个选择：

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

   ng new PlaygroundWorkspace --create-application=false

   ng 生成应用程序应用程序一 --routing=true ng 生成应用程序应用程序二 --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 输入到 app-2，那么您将进入 app-2，而 app-1 链接 (routerLink) 将不起作用。

2. 有主 Angular 应用程序，以及这里提到的延迟加载的子应用程序（组件）： 如何在GreyBeardedGeek 的Angular 6 中的单个项目下的多个应用程序之间导航。 或https://medium.com/disney-streaming/combining-multiple-angular-applications-into-a-single-one-e87d530d6527