Could not find bootstrapApplication call in apps/product/src/main.ts while adding @angular/material with Nrwl Nx Mfa Workspace

Question

I have created a project with the Nx Mfa schema as follows

npx create-nx-workspace fetebird --preset=empty

npm install --save-dev @nrwl/angular

nx g @nrwl/angular:host host --remotes=product,discount,order


nx serve host --open

This works. Now I am trying to add angular material to the MFA applicatins with below commands

npx nx g @angular/material:ng-add --project=product

or

npm install @angular/material && npx nx g @angular/material:ng-add // thows an exception as project name not specified

While specifying the project name, getting an exceptions as

npx nx g @angular/material:ng-add --project=product

>  NX  Generating @angular/material:ng-add

✔ Choose a prebuilt theme name, or "custom" for a custom theme: · indigo-pink
✔ Set up global Angular Material typography styles? (y/N) · true
✔ Include the Angular animations module? · enabled
✔ Packages installed successfully.
SchematicsException [Error]: Could not find bootstrapApplication call in apps/product/src/main.ts
    at addModuleImportToStandaloneBootstrap (/Users/san/project/Sample/fetebird/node_modules/@angular/cdk/schematics/utils/ast/standalone.js:40:15)
    at addAnimationsModuleToStandaloneApp (/Users/san/project/Sample/fetebird/node_modules/@angular/material/schematics/ng-add/setup-project.js:83:67)
    at /Users/san/project/Sample/fetebird/node_modules/@angular/material/schematics/ng-add/setup-project.js:61:17
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

Answer 1

It's because the ng-add schematic tries to add it to an NgModule app, but if that fails, it then tries to add it to a Standalone app, and then it fails again.

https://github.com/angular/components/blob/main/src/material/schematics/ng-add/setup-project.ts#L67-82

Install the angular material lib

npm install @angular/material

The issue with Angular Material. They aren't supporting other builders which are required for MFEs.

So manually change your app's executor in the build target to be @angular-devkit/build-angular:browser, then run the generate command again for Angular Material

project.json For MFE, if executor not present in project.json , check in workspace.json

  "targets": {
    "build": {
      "executor": "@angular-devkit/build-angular:browser",

The run the generator command

npx nx g @angular/material:ng-add --project=host

>  NX  Generating @angular/material:ng-add

✔ Choose a prebuilt theme name, or "custom" for a custom theme: · indigo-pink
✔ Set up global Angular Material typography styles? (y/N) · true
✔ Include the Angular animations module? · excluded
✔ Packages installed successfully.
[NX] Angular devkit called `writeWorkspace`, this may have had unintended consequences in workspace.json
[NX] Double check workspace.json before proceeding
    Your project is not using the default builders for "test". This means that we cannot add the configured theme to the "test" target.
UPDATE package.json
UPDATE workspace.json
UPDATE apps/host/src/index.html
UPDATE apps/host/src/styles.scss

During the process exclude the animation Include the Angular animations module? · excluded Include the Angular animations module? · excluded . You can manually add animation later

Revert back the changes as below in project.json

"targets": {
    "build": {
      "executor": "@nrwl/angular:webpack-browser",