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

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 (<anonymous>) 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

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 1
Comments: 15 (7 by maintainers)

Links to this issue

Add Angular Material to Nx Workspace - Stack Overflow

Most upvoted comments

Hi,

please find an explanation and a solution here: https://github.com/angular-architects/module-federation-plugin/issues/93

Best wishes, Manfred

manfredsteyer on Nov 11, 2021

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.

Coly010 on Nov 18, 2021

@anandjaisy You need change the option main: option also to be “apps/<yourapp>/src/bootstrap.ts”

Coly010 on Jul 5, 2022

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

cassiomansini on Nov 18, 2021

@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

AgentEnder on Nov 17, 2021