如何在具有多個 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