從一個 Angular 9 項目創建多個應用程序

Question

我的目標是擁有一個具有共享部分的 Angular 項目：功能、類、外觀、服務和頁面組件（頁眉、頁腳、一些指令）。 然后在它內部有 2 個（或更多應用程序）將使用共享部分並在其頂部添加自己的組件（頁面）和路由。

然后這兩個應用程序應該構建到不同的 dist 文件夾，因此可以部署到不同的位置（URL）。 而且我希望能夠同時運行（服務）它們（可能在不同的端口上）。

我想我應該從在項目中創建新應用程序開始：

ng generate application app1 --routing
ng generate application app1 --routing

和圖書館？ （對於共享組件）。 那正確嗎？

我應該如何配置 angular.json 文件以進行服務和構建？ 我應該如何配置 app.module.ts 文件？

Answer 1

直接來自 Angular 指南工作區和項目文件結構 - 多個項目

多個項目

多項目工作區適用於對所有 Angular 項目（“monorepo”模型）使用單個存儲庫和全局配置的企業。 多項目工作區還支持庫開發。

設置多項目工作區

如果您打算在一個工作區中擁有多個項目，則可以在創建工作區時跳過初始應用程序生成，並為工作區指定一個唯一名稱。 以下命令使用所有工作區范圍的配置文件創建一個工作區，但沒有根級應用程序。

 ng new my-workspace --createApplication="false"

然后，您可以生成名稱在工作區中唯一的應用程序和庫。

 cd my-workspace ng generate application my-first-app

多項目文件結構

第一個顯式生成的應用程序與工作區中的所有其他項目一起進入projects/文件夾。 新生成的庫也添加到projects/下。 通過這種方式創建項目時，工作區的文件結構與工作區配置文件的結構完全一致， angular.json 。

 my-workspace/... (workspace-wide config files) projects/ (generated applications and libraries) my-first-app/ --(an explicitly generated application)... --(application-specific config) e2e/ ----(corresponding e2e tests) src/ ----(e2e tests source)... ----(e2e-specific config) src/ --(source and support files for application) my-lib/ --(a generated library)... --(library-specific config) src/ --source and support files for library)

庫項目文件

當您使用 CLI 生成庫時（使用諸如ng generate library my-lib之類的命令），生成的文件 go 到工作區的項目/文件夾中。 有關創建您自己的庫的更多信息，請參閱創建庫。

庫（與應用程序及其關聯的 e2e 項目不同）有自己的package.json配置文件。

在projects/文件夾下， my-lib文件夾包含您的庫代碼。

它繼續在表格中描述庫項目文件及其用途。 我建議進一步閱讀上面的文檔和相關鏈接，因為它有據可查，可能會讓您快速啟動並運行。

要在不同的端口上運行多個 Angular 應用程序，只需打開另一個終端並為每個應用程序運行ng serve --port 1234 。 請參閱Angular(2) - 使用 CLI 運行兩個項目

Answer 2

聽起來您想使用 monorepo 方法。 我建議使用https://nx.dev/angular 。

Answer 3

我會為不同的應用程序推薦不同的項目，並執行以下操作之一

1. 將可重用代碼放入可以為每個項目發布和安裝的包中
2. 利用 git 子模塊來保存可重用代碼並為每個項目安裝 git 子模塊

我更喜歡選項 2 到 1