search

manfredsteyer / ngx-build-plus

Extend the Angular CLI's default build behavior without ejecting, e. g. for Angular Elements
1.19k stars 136 forks source link

ng serve breaks when using component styleUrls with sharedMappings #240

Open pauleustice opened 3 years ago

pauleustice commented 3 years ago

Hi there. We are just getting started with ngx-build-plus and have run into a problem.

We are using module federation and have noticed that running ng serve gets stuck at Generating browser application bundles (phase: building) and doesn't complete the build. This occurs when these two conditions are met:

e.g.

sharedMappings.register(path.join(__dirname, '../../tsconfig.base.json'), [
  '@monorepo/shared/utils-auth',
]);
@Component({
  selector: 'mfe1-home',
  templateUrl: './home.component.html',
  styleUrls: [ './home.component.scss' ]
})

Removing either the styleUrls entry, or the sharedMappings allows the app to build.

package.json dependencies:

  "dependencies": {
    "@angular-architects/module-federation": "^1.2.3",
    "@angular/animations": "^11.0.0",
    "@angular/common": "^11.0.0",
    "@angular/compiler": "^11.0.0",
    "@angular/core": "^11.0.0",
    "@angular/forms": "^11.0.0",
    "@angular/platform-browser": "^11.0.0",
    "@angular/platform-browser-dynamic": "^11.0.0",
    "@angular/router": "^11.0.0",
    "@legal-and-general/canopy": "^5.0.1",
    "@nrwl/angular": "11.2.10",
    "date-fns": "^2.16.1",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "^0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.1",
    "@angular-eslint/eslint-plugin": "~1.0.0",
    "@angular-eslint/eslint-plugin-template": "~1.0.0",
    "@angular-eslint/template-parser": "~1.0.0",
    "@angular/cli": "~11.0.0",
    "@angular/compiler-cli": "^11.0.0",
    "@angular/language-service": "^11.0.0",
    "@commitlint/cli": "^11.0.0",
    "@commitlint/config-conventional": "^11.0.0",
    "@nrwl/cli": "11.2.10",
    "@nrwl/cypress": "11.2.10",
    "@nrwl/eslint-plugin-nx": "11.2.10",
    "@nrwl/jest": "11.2.10",
    "@nrwl/tao": "11.2.10",
    "@nrwl/workspace": "11.2.10",
    "@types/jest": "26.0.8",
    "@types/node": "12.12.38",
    "@typescript-eslint/eslint-plugin": "4.3.0",
    "@typescript-eslint/parser": "4.3.0",
    "codelyzer": "^6.0.0",
    "commitizen": "^4.2.3",
    "cypress": "^6.0.1",
    "dotenv": "6.2.0",
    "eslint": "7.10.0",
    "eslint-config-prettier": "^6.0.0",
    "eslint-plugin-cypress": "^2.10.3",
    "husky": "^4.3.8",
    "jest": "26.2.2",
    "jest-preset-angular": "8.3.2",
    "lint-staged": "^10.5.3",
    "ng-mocks": "^11.5.0",
    "ng-packagr": "^11.0.0",
    "prettier": "2.2.1",
    "ts-jest": "26.4.0",
    "ts-mockito": "^2.6.1",
    "ts-node": "~9.1.1",
    "tslint": "~6.1.0",
    "typescript": "~4.0.3"
  }
NemirStephan commented 3 years ago

I have managed to dig a little deeper into this (I am working with @pauleustice on the same project). It appears related to a known issue with the @angular-architects/module-federation package we are also using in our project

If, as suggested, I change that libraries package.json file from 

    "main": "src\\index.js",
    "typings": "src\\index.d.ts",

to

    "main": "src/index.js",
    "typings": "src/index.d.ts",

then we get a little further. The build no longer hangs but does give us this error 

Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: The Angular Webpack loader requires the AngularWebpackPlugin.
    at Object.angularWebpackLoader

Despite the error, we can still run the app in the browser and it seems to work correctly. I don't think this is an issue with ngx-build-plus however as I get the same error if I swap that out with @angular-builders/custom-webpack