ng serve doesn't serve files

[psrebrny]

Introduction

At first, I wanted to say on a new project generated by ng cli it worked correctly, and building process builds files:

In my project, I tried searching difference in configurations to serve files after ng serve command but I couldn't find any sensible difference between them.

I haven't tried custom-webpack builder, previously, with other configuration it has served the files, but I don't know can I use it with ModuleFederationPlugin

Description

My application should be like a shell application like regular monorepo app, but one exception, in one routing I want to get outside the script and load it as micro frontend, currently, I load script on init app in index.html file.

after execute ng serve I see

> ng serve

√ Browser application bundle generation complete.
(node:14020) [DEP_WEBPACK_CHUNK_MODULES_ITERABLE] DeprecationWarning: Chunk.modulesIterable: Use new ChunkGraph API
(node:14020) [DEP_WEBPACK_CHUNK_ENTRY_MODULE] DeprecationWarning: Chunk.entryModule: Use new ChunkGraph API

as you can see it's lack of listing generated files.

package.json

{
  "name": "iatfi",
  "version": "1.0.0",
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*.{ts,scss,html}": [
      "prettier --write",
      "git add"
    ]
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "start:3200": "ng serve --port=3200",
    "build:watch": "ng build --watch=true",
    "build:develop-local": "ng build --configuration=local",
    "build:develop": "ng build --configuration=develop",
    "build:uat": "ng build --configuration=uat",
    "build:production": "ng build --configuration=production",
    "build:production-maps": "ng build --configuration=production --sourceMap=true",
    "build:analize": "ng build --configuration=production --statsJson=true",
    "test": "ng test",
    "test:coverage": "ng test --coverage",
    "test:watch": "ng test --watch",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "prettier": "prettier --write **/*.html **/*.scss **/*.ts",
    "prettier-watch": "onchange **/*.ts **/*.scss **/*.html -- prettier --write {{changed}}",
    "analize": "webpack-bundle-analyzer ../main/resources/static/dist/stats-es5.json",
    "analize2015": "webpack-bundle-analyzer ../main/resources/static/dist/stats-es2015.json",
    "postinstall": "ngcc"
  },
  "private": true,
  "resolutions": {
    "webpack": "^5.0.0"
  },
  "dependencies": {
    "@angular-architects/module-federation": "^1.2.2",
    "@angular-builders/custom-webpack": "^10.0.0",
    "@angular-builders/jest": "^10.0.0",
    "@angular-devkit/build-angular": "~0.1100.4",
    "@angular/animations": "^11.0.4",
    "@angular/cli": "^11.0.4",
    "@angular/common": "^11.0.4",
    "@angular/compiler": "^11.0.4",
    "@angular/compiler-cli": "^11.0.4",
    "@angular/core": "^11.0.4",
    "@angular/forms": "^11.0.4",
    "@angular/localize": "^11.0.4",
    "@angular/platform-browser": "^11.0.4",
    "@angular/platform-browser-dynamic": "^11.0.4",
    "@angular/router": "^11.0.4",
    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "@types/jest": "^24.9.1",
    "@types/jquery": "^3.3.31",
    "@types/node": "^12.11.1",
    "@webcomponents/webcomponentsjs": "^2.4.3",
    "angular2-multiselect-dropdown": "^4.6.3",
    "bootstrap": "^4.5.2",
    "core-js": "^3.6.4",
    "d3": "^5.15.0",
    "jest": "^26.2.2",
    "jest-preset-angular": "^8.2.1",
    "jquery": "^3.5.1",
    "ngx-cookie-service": "^2.3.0",
    "prettier": "^1.19.1",
    "rxjs": "^6.6.3",
    "tslib": "^2.0.0",
    "tslint-angular": "^3.0.2",
    "typescript": "~4.0.5",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-builders/dev-server": "^7.3.1",
    "@angular-devkit/build-angular": "~0.1100.4",
    "@angular/language-service": "^11.0.4",
    "@types/d3": "^5.7.2",
    "codelyzer": "^6.0.0",
    "husky": "^4.3.6",
    "lint-staged": "^10.5.3",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.0",
    "webpack-bundle-analyzer": "^3.6.0"
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "iatfi": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "iatfi",
      "architect": {
        "build": {
          "builder": "ngx-build-plus:browser",
          "options": {
            "outputPath": "../main/resources/static/dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "node_modules/angular2-multiselect-dropdown/themes/default.theme.css",
              "src/from-thymelife-styles.scss",
              "src/icons/icons.scss",
              "src/styles.scss"
            ],
            "scripts": [],
            "extraWebpackConfig": "webpack.config.js"
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "media",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": true,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ],
              "extraWebpackConfig": "webpack.prod.config.js"
            },
            "local": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.local.ts"
                }
              ],
              "deployUrl": "/iatfi-app/dist/",
              "optimization": true,
              "outputHashing": "media",
              "sourceMap": true,
              "namedChunks": true,
              "buildOptimizer": false
            },
            "develop": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ],
              "vendorChunk": true,
              "deployUrl": "/iatfi-app/dist/",
              "baseHref": "/iatfi-app",
              "optimization": true,
              "outputHashing": "media",
              "sourceMap": true,
              "namedChunks": true,
              "aot": true,
              "buildOptimizer": false
            },
            "uat": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.uat.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "media",
              "sourceMap": false,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": true,
              "buildOptimizer": true,
              "deployUrl": "/iatfi-app/dist/",
              "baseHref": "/iatfi-app",
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "ngx-build-plus:dev-server",
          "options": {
            "browserTarget": "iatfi:build",
            "extraWebpackConfig": "webpack.config.js",
            "port": 4200
          },
          "configurations": {
            "production": {
              "browserTarget": "iatfi:build:production",
              "extraWebpackConfig": "webpack.prod.config.js"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "iatfi:build"
          }
        },
        "test": {
          "builder": "@angular-builders/jest:run",
          "options": {
            "main": "src/jestSetup.ts",
            "tsConfig": "tsconfig.spec.json"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "iatfi:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "iatfi:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "iatfi",
  "cli": {
    "analytics": false,
    "packageManager": "yarn"
  }
}

files: bootstrap.ts, main.ts, webpack.config.js and webpack.prod.config.js are untouched after schematics changed after command ng add @angular-architects/module-federation

[charles-7StarsSolutions]

I have the same problem. I see that this problem is present when I add some lines in the angular.json - styles sections: "styles": [ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.scss" ],

I have added the reference to material in the styles.scss file (and remove the corresponding line in angular.json) @import "~@angular/material/prebuilt-themes/indigo-pink.css"

With this configuration everything works fine.

[lincetto]

@psrebrny, this comment is a little off topic. Reading your issue I see that you're trying to load the micro frontends in one single route. Can you help me to achieve the same result? How do you load remote module if not in the router conf? Thanks

[psrebrny]

@lincetto I didn't come to part 'router configuration' because I'm trying to serve the project,

@charles-7StarsSolutions I will try your solution, but now I have many other development tasks to do, maintenance has to wait.

[PatrickSchnoop]

Hi, I can confirm the problem is with the styles array. if you add one entry everything is fine. Two or more and ng serve doesn‘t work.

[lincetto]

Hi, we have the same issue, but the very strange behaviour is that in my MacOS machine everything works, but in Windows machine of my colleagues 'ng serve' get stuck here :

> ng serve

√ Browser application bundle generation complete.

without starting the server. We tried also to remove the additional styles in order to have the array of only 1 element, but nothing changes.

[PatrickSchnoop]

@lincetto Do you have shared libs? If yes, could you try to delete the .ts extension from the path mapping inside tsconfig.json.

// tsconfig.json
...
paths: {
  "@app/shared": "libs/shared/index.ts" // <- remove .ts here
} 
...

This can be another reason for stucking build processes.

[lincetto]

If we run ng serve from inside src folder, it works, and is weird.. :) Ah, please note that the issue is not present in Linux or Mac environment, only in Windows. And in Windows we found the workaround to launch commands from the src folder.. I suppose the issue is related to this one https://github.com/angular-architects/module-federation-plugin/issues/16 that references this one from license-webpack-plugin package https://github.com/xz64/license-webpack-plugin/issues/95

[AndreasFruehwirt]

As a workaround until this issue gets fixed you can add the following resolution beneath the webpack 5 entry: "resolutions": { "webpack": "^5.0.0", "license-webpack-plugin": "^2.3.14" },

[uncol]

sharedMappings.getDescriptors return absolute path in import, change to path from repo root, it's fixed for me.

        '@app/shared_lib': {
          import: 'libs/shared_lib/src/index.ts',
          singleton: true,
          eager: false,
          requiredVersion: false,
        }

[owenmecham]

@lincetto Do you have shared libs? If yes, could you try to delete the .ts extension from the path mapping inside tsconfig.json.

// tsconfig.json
...
paths: {
  "@app/shared": "libs/shared/index.ts" // <- remove .ts here
} 
...

This can be another reason for stucking build processes.

This took care of a really frustrating issue. Thank you @pschnoop

[manfredsteyer]

Thanks for pointing this out and for providing a workaround for this.

With version 12 of this lib, it works.