在Nx MFA工作区为Angular项目添加@angular/material时遭遇bootstrapApplication未找到错误

问题背景 #

你通过Nx搭建了基于模块联邦的Angular项目（包含host主应用和product/discount/order远程应用），但尝试给product远程应用添加Angular Material时，遇到了SchematicsException [Error]: Could not find bootstrapApplication call in apps/product/src/main.ts的报错。这是因为Nx生成的模块联邦远程应用启动逻辑和标准Angular应用不同，导致Angular Material的自动配置schematics无法识别代码结构。

解决方案 #

我们需要手动完成Angular Material的配置步骤，具体如下：

1. 安装依赖（若未完成）
   先确保已安装Angular Material及相关依赖：

npm install @angular/material @angular/cdk @angular/animations

2. 配置Material主题
   在apps/product/src/styles.scss文件中导入你之前选择的预构建主题（比如indigo-pink）：

@import '@angular/material/prebuilt-themes/indigo-pink.css';

3. 添加全局排版样式
   同样在styles.scss中添加Material的全局字体样式，对应你之前选择的"设置全局Angular Material排版样式"选项：

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

4. 配置动画模块
   根据你的项目类型（独立式/模块式）添加动画支持：

• 独立式应用：打开apps/product/src/app/app.config.ts，将provideAnimations()加入providers数组：

  import { provideAnimations } from '@angular/platform-browser/animations';
  
  export const appConfig: ApplicationConfig = {
    providers: [
      provideAnimations(),
      // 保留其他已有的providers配置
    ],
  };
  

• 模块式应用：打开apps/product/src/app/app.module.ts，导入并添加BrowserAnimationsModule到imports数组：

  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
  @NgModule({
    imports: [
      BrowserAnimationsModule,
      // 保留其他已有的imports配置
    ],
    // 其他模块配置内容
  })
  export class AppModule {}
  

5. 按需导入Material组件
   后续使用Material组件时，直接在目标组件/模块中导入对应的Material模块即可。比如要使用按钮组件，在独立组件中：

import { MatButtonModule } from '@angular/material/button';

@Component({
  // 组件元数据配置
  imports: [MatButtonModule],
})
export class YourComponent {}

错误原因说明 #

Angular Material的ng-add schematics是为标准Angular应用设计的，它会自动查找main.ts中的bootstrapApplication调用（独立式）或根模块（模块式）来注入必要配置。但Nx模块联邦远程应用的main.ts包含模块联邦初始化代码（比如setRemoteGlobalVars()），打乱了schematics预期的代码结构，导致它无法识别正确的启动入口完成自动配置。

内容的提问来源于stack exchange，提问作者San Jaisy