Angular material install command fails in MFE workspace - Bootstrap call not found

[univerze]

Current Behavior

Adding angular material by using the following command to an MFE type workspace fails with error.

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

When creating a workspace with the angular preset, the command works as expected with no issues, this seems to only happen in an MFE type workspace.

Expected Behavior

I expect the command run successfully, the bootstrap is supposed to modify the index.html to add fonts, and update the style.scss with the selected theme.
The workaround is to manually edit these files after installing angular/material.

Unknown

Steps to Reproduce

npx create-nx-workspace material-mfe
cd material-mfe
npm i -D @nrwl/angular
nx g @nrwl/angular:application --mfe --mfeType=host --routing
npm install @angular/material
npx nx g @angular/material:ng-add --project=material-mfe

Output:
✔ Choose a prebuilt theme name, or "custom" for a custom theme: · custom
✔ Set up global Angular Material typography styles? (y/N) · true
✔ Set up browser animations for Angular Material? (Y/n) · true
✔ Packages installed successfully.
SchematicsException [Error]: Bootstrap call not found
at findBootstrapModulePath (/Users/rolandbecsi/Development/test-angular/node_modules/@angular/cdk/schematics/utils/vendored-ast-utils/index.js:452:15)

Failure Logs

SchematicsException [Error]: Bootstrap call not found
at findBootstrapModulePath (/Users/rolandbecsi/Development/test-angular/node_modules/@angular/cdk/schematics/utils/vendored-ast-utils/index.js:452:15)
at Object.getAppModulePath (/Users/rolandbecsi/Development/test-angular/node_modules/@angular/cdk/schematics/utils/vendored-ast-utils/index.js:475:32)
at /Users/rolandbecsi/Development/test-angular/node_modules/@angular/material/schematics/ng-add/setup-project.js:65:44
at Generator.next ()
at fulfilled (/Users/rolandbecsi/Development/test-angular/node_modules/@angular/material/schematics/ng-add/setup-project.js:12:58)
at processTicksAndRejections (internal/process/task_queues.js:95:5)

Environment

Node : 14.18.1
OS : darwin x64
npm : 6.14.15

nx : Not Found
@nrwl/angular : 13.1.3
@nrwl/cli : 13.1.3
@nrwl/cypress : 13.1.3
@nrwl/devkit : 13.1.3
@nrwl/eslint-plugin-nx : 13.1.3
@nrwl/express : Not Found
@nrwl/jest : 13.1.3
@nrwl/linter : 13.1.3
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/nx-cloud : Not Found
@nrwl/react : Not Found
@nrwl/schematics : Not Found
@nrwl/tao : 13.1.3
@nrwl/web : Not Found
@nrwl/workspace : 13.1.3
@nrwl/storybook : 13.1.3
@nrwl/gatsby : Not Found
typescript : 4.3.5

[manfredsteyer]

Hi,

please find an explanation and a solution here:
angular-architects/module-federation-plugin#93

Best wishes,
Manfred

[cassiomansini]

hey guys,

I got this output with this solution:
The generate command requires to be run in an Angular project, but a project definition could not be found.

I guess it is because I have a workspace.json, and not a angular.json... any workaround?

[AgentEnder]

@cassiomansini Are you using ng or nx g to run? If you run through nx our compatibility layer should allow running angular schematics even when using standalone configurations and such

[cassiomansini]

nx g and npx nx g

The output is this:

PS C:\GIT\arc.contabil> nx generate @angular/material:ng-add --project=contabil  
√ Choose a prebuilt theme name, or "custom" for a custom theme: · indigo-pink
√ Set up global Angular Material typography styles? (y/N) · true
√ Set up browser animations for Angular Material? (Y/n) · true
✔ Packages installed successfully.
SchematicsException [Error]: Bootstrap call not found

Also, if i try nx list @angular/material i get this output:

> NX WARNING No capabilities found in @angular/material

[cassiomansini]

Once upon a time, my mentor used to say:

Mansini, think about your question for 5 minutes, then u can ask me anything

So here I am, 5 mins later:

PS C:\GIT\arc.contabil> nx g @angular-architects/module-federation:boot-async false --project contabil
UPDATE workspace.json
PS C:\GIT\arc.contabil> npx nx g @angular/material:ng-add --project=contabil
√ Choose a prebuilt theme name, or "custom" for a custom theme: · indigo-pink
√ Set up global Angular Material typography styles? (y/N) · true
√ Set up browser animations for Angular Material? (Y/n) · true
✔ Packages installed successfully.
SchematicsException [Error]: Your project is not using the default builders for "build". The Angular Material schematics cannot add a theme to the workspace configuration if the builder has been changed.
    at validateDefaultTargetBuilder (C:\GIT\arc.contabil\node_modules\@angular\material\schematics\ng-add\theming\theming.js:153:15)
    at C:\GIT\arc.contabil\node_modules\@angular\material\schematics\ng-add\theming\theming.js:103:14
    at C:\GIT\arc.contabil\node_modules\@schematics\angular\utility\workspace.js:40:34
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
Your project is not using the default builders for "build". The Angular Material schematics cannot add a theme to the workspace configuration if the builder has been changed.
PS C:\GIT\arc.contabil> 

Now I have another problem to think about the next 5 minutes.

[Coly010]

@cassiomansini That looks like an issue with Angular Material. They aren't supporting other builders which is required for MFEs.

My suggestion would be to 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

[cassiomansini]

@cassiomansini That looks like an issue with Angular Material. They aren't supporting other builders which is required for MFEs.

My suggestion would be to 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

Didnt find where to change that, can you help me locate this?

[Coly010]

In your workspace.json file or your angular.json file, there'll be a key for your app's name.
Then in that object, there'll be another key called 'build'.
Finally, within that object there'll be an executor or builder key with a string value.

[cassiomansini]

In your workspace.json file or your angular.json file, there'll be a key for your app's name. Then in that object, there'll be another key called 'build'. Finally, within that object there'll be an executor or builder key with a string value.

My workspace isnt like that, but I found it on apps/my-app/project.json under targets -> build -> executor

PS C:\GIT\arc.contabil> npx nx g @angular/material:ng-add --project=contabil
√ Choose a prebuilt theme name, or "custom" for a custom theme: · indigo-pink
√ Set up global Angular Material typography styles? (y/N) · true
√ Set up browser animations for Angular Material? (Y/n) · true
✔ Packages installed successfully.
    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 apps/contabil/src/app/app.module.ts
UPDATE workspace.json
UPDATE apps/contabil/src/index.html
UPDATE apps/contabil/src/styles.scss

So I needed to change back the builder for its original value @nrwl/angular:webpack-browser on my apps project.json file (but keeping the changes made from NX to add angular material)

And now I`m good to go! thanks @Coly010

[Coly010]

Glad to hear it!
If you have any other issues, let me know. For now I'll close this issue as @manfredsteyer has given a solution that works :)
Thanks everyone!

[esantiagovieira]

@Coly010 ok, this is a know issue, my question is if this is how it is going to work or if there will be in the future a fix so we don~t need to go through @manfredsteyer solution.

Also, if that is going to be the standard procedure, it should be added somehwere on the docs, so ppl know ahead where they are getting into when considering Nx to their projects. Do you agree?

[Coly010]

This is a very targeted and specific issue, based on certain decisions from external sources (angular material, if you're using MFE, what builder/executor you're using already, the change in main.ts and bootstrap.ts required for MFEs), therefore it'll likely remain that you can simply follow the instructions kindly provided by Manfred :)

[anandjaisy]

@angular-devkit/build-angular:browser

@Coly010 Changing the executor string on the project.json of each project doesn't work for me

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

Getting an exception as the same before using the "@nrwl/angular": "^14.4.0",

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? · enabled
✔ Packages installed successfully.
SchematicsException [Error]: Could not find bootstrapApplication call in apps/host/src/main.ts
    at addModuleImportToStandaloneBootstrap (/Users/san/project/Sample/acme/node_modules/@angular/cdk/schematics/utils/ast/standalone.js:40:15)
    at addAnimationsModuleToStandaloneApp (/Users/san/project/Sample/acme/node_modules/@angular/material/schematics/ng-add/setup-project.js:83:67)
    at /Users/san/project/Sample/acme/node_modules/@angular/material/schematics/ng-add/setup-project.js:61:17
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

 >  NX   Could not find bootstrapApplication call in apps/host/src/main.ts

[Coly010]

@anandjaisy You need change the option main: option also to be "apps//src/bootstrap.ts"

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.