如何使用 Angular CLI 创建新的遥控器？ （Webpack 5 Module Federation 微前端）

Posted 2023-02-16

【中文标题】如何使用 Angular CLI 创建新的遥控器？ （Webpack 5 Module Federation 微前端）

【英文标题】：How to create a new remote using Angular CLI? (Webpack 5 Module Federation micro frontends)

【发布时间】：2021-09-11 06:06:24

【问题描述】：

在名为myShell 的Angular 12 项目中，我实现了nx monorepo，然后使用命令ng add @angular-architects/module-federation --project myShell --port 4200 将我的项目定义为Webpack 5 Module Federation 微前端shell。

现在我想使用Angular CLI 生成一个新的微前端remote，我将其命名为mfe1。我将如何使用nx 或ng CLI 完成此操作？例如，如果我导航到我的apps 文件夹（其中包含myShell 项目）并执行ng new mfe1，我会收到错误消息：The new command requires to be run outside of a project, but a project definition was found at ...filepath/angular.json。我也无法运行ng g c，因为 Angular 微前端应用不仅仅是一个简单的组件。

是否有一个Angular CLI 命令我可以用来创建一个新的微前端远程，或者每个远程应用程序必须手动创建乏味？

【问题讨论】：

就我而言，我将每个应用程序分别创建到各自的文件夹中。在 shell 中，我做了所有的 webpack 配置。

【参考方案1】：

ng new 命令将创建一个新工作区。所以你不能在已经包含 angular.json 文件的文件夹中使用它。

您可以使用命令ng g application 在现有工作区中创建一个新的 Angular 项目

例如：

ng g application mfe1 --routing --style=scss