使用角度cli處理多個應用程序

Question

我有興趣使用角度cli引導多個應用程序。

通過角CLI維基我能找到一個例子 https://github.com/angular/angular-cli/wiki/stories-multiple-apps

而且我發現 https://yakovfain.com/2017/04/06/angular-cli-multiple-apps-in-the-same-project/

我通過角cli.json文件去跑

"apps": [ 
    { 
     "name": "app1", 
     "root": "src", 
     "outDir": "dist", 
     "assets": [ 
     "assets", 
     "favicon.ico" 
     ], 
     "index": "index.html", 
     "main": "main.ts", 
     "polyfills": "polyfills.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.app.json", 
     "testTsconfig": "tsconfig.spec.json", 
     "prefix": "app", 
     "styles": [ 
     "styles.css" 
     ], 
     "scripts": [], 
     "environmentSource": "environments/environment.ts", 
     "environments": { 
     "dev": "environments/environment.ts", 
     "prod": "environments/environment.prod.ts" 
     } 
    }, 
    { 
     "name": "app2", 
     "root": "src", 
     "outDir": "dist2", 
     "assets": [ 
     "assets", 
     "favicon.ico" 
     ], 
     "index": "index.html", 
     "main": "main2.ts", 
     "polyfills": "polyfills2.ts", 
     "test": "test2.ts", 
     "tsconfig": "tsconfig.app.json", 
     "testTsconfig": "tsconfig.spec.json", 
     "prefix": "app2", 
     "styles": [ 
     "styles.css" 
     ], 
     "scripts": [], 
     "environmentSource": "environments/environment.ts", 
     "environments": { 
     "dev": "environments/environment.ts", 
     "prod": "environments/environment.prod.ts" 
     } 
    } 
    ], 

我能夠得到這個與以下命令運行

ng serve --app 0 
ng serve --app 1 

我對這種方法的第一個問題是，如果我們列出角度cli中的幾個應用程序將如何保持這種情況？這將得到一些監控和跟蹤。

另外，採用這種方法，你會更好地引導每個main.ts文件中的不同模塊？

我看到完成的第二種方法是在評論中的一個例子。
https://github.com/Farata/angular2typescript/blob/master/Angular4/router-samples/.angular-cli.json。

這是更理想的，雖然我無法複製和識別所有這些應用程序如何共享相同的遠程文件夾和除名稱以外的其他所有內容。

第二種方法分享一切我想知道如何創建大量的模塊和延遲加載它們不同？

我知道這個問題是非常理論化的，但在線資源非常有限，我很想知道其他開發人員如何攻擊此問題。

Answer 1

如果我在angular-cli有幾個應用程序，我將它們命名，如：

"apps": [ 
    { 
     "name": "app1", 
     "main": "main1.ts", 
     ... 
    }, 
    { 
     "name": "app2", 
     "main": "main2.ts" 
    } 
] 

然後開始app1我們可以運行

ng serve --app 0 

或

ng serve --app app1 

我更喜歡第二因爲它更容易理解哪個應用程序運行。

如何監視它們？

你要知道自己在做什麼:)

此外，通過這種方法，你會過得更好的Bootstrap每個main.ts一個 不同的模塊文件？

這取決於你的應用程序將做什麼。我更喜歡有不同的引導程序模塊，因爲這樣我可以從一些應用程序中減少一些多餘的東西。

例如，我需要兩個具有幾乎相同邏輯的應用程序，但第二個應用程序只是具有其自身功能的第一個應用程序的一部分。

所以我的第二個應用程序可以引導SecondModule，它將導入一些在應用程序模塊和它自己的功能模塊之間共享的內容。

@NgModule({ 
    import: [ 
    SharedModule, 
    SharedModule2, 
    SecondFeature1, 
    ... 
    ] 
}) 
export class SecondModule {} 

而且這種應用我會創造相應的打字稿CONFIGS保護做了一些多餘的工作的TS編譯器（和expecially NGC編譯）：

tsconfig.app1.json

files: [ 
    "main1.ts", 
    "path to some lazy loaded module" 
] 

tsconfig.app2.json

files: [ 
    "main2.ts" 
] 

這是比較理想的，雖然我無法複製，並確定如何 所有這些應用都有着相同的DIST的文件夾和所有其他 除了名。

我認爲這是錯誤的。我會輸出這些應用程序到不同的文件夾。

由於問題是基於理論的，我會說如果你有相當大的應用程序，你可能會遇到性能構建。在一個角度應用程序中有許多應用程序可能會變成噩夢。這只是我的意見和經驗:)