Angular-builders: Polyfill issue: Can't resolve all parameters for ApplicationModule: (?)

[arnevdv]

Describe the bug
When I launch my application i get the following error:

This is my package.json:

This is my angular.json:

{
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
      "navigation": {
         "projectType": "application",
         "schematics": {},
         "root": "",
         "sourceRoot": "src",
         "prefix": "navigation",
         "architect": {
            "build": {
               "builder": "@angular-builders/custom-webpack:browser",
               "options": {
                  "outputPath": "dist/navigation",
                  "index": "src/index.html",
                  "main": "src/main.ts",
                  "polyfills": "src/polyfills.ts",
                  "tsConfig": "tsconfig.app.json",
                  "aot": false,
                  "assets": [
                     "src/favicon.ico",
                     "src/assets"
                  ],
                  "styles": [
                     "src/styles.css"
                  ],
                  "scripts": [],
                  "customWebpackConfig": {
                     "path": "./extra-webpack.config.js"
                  }
               },
               "configurations": {
                  "production": {
                     "fileReplacements": [
                        {
                           "replace": "src/environments/environment.ts",
                           "with": "src/environments/environment.prod.ts"
                        },
                        {
                           "replace": "src/main.ts",
                           "with": "src/main.single-spa.ts"
                        }
                     ],
                     "optimization": true,
                     "outputHashing": "none",
                     "sourceMap": false,
                     "extractCss": true,
                     "namedChunks": false,
                     "aot": true,
                     "extractLicenses": true,
                     "vendorChunk": false,
                     "buildOptimizer": true,
                     "budgets": [
                        {
                           "type": "initial",
                           "maximumWarning": "2mb",
                           "maximumError": "5mb"
                        }
                     ]
                  }
               }
            },
            "serve": {
               "builder": "@angular-builders/custom-webpack:dev-server",
               "options": {
                  "browserTarget": "navigation:build"
               },
               "configurations": {
                  "production": {
                     "browserTarget": "navigation:build:production"
                  }
               }
            },
            "extract-i18n": {
               "builder": "@angular-devkit/build-angular:extract-i18n",
               "options": {
                  "browserTarget": "navigation:build"
               }
            },
            "test": {
               "builder": "@angular-devkit/build-angular:karma",
               "options": {
                  "main": "src/test.ts",
                  "polyfills": "src/polyfills.ts",
                  "tsConfig": "tsconfig.spec.json",
                  "karmaConfig": "karma.conf.js",
                  "assets": [
                     "src/favicon.ico",
                     "src/assets"
                  ],
                  "styles": [
                     "src/styles.css"
                  ],
                  "scripts": []
               }
            },
            "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": "navigation:serve"
               },
               "configurations": {
                  "production": {
                     "devServerTarget": "navigation:serve:production"
                  }
               }
            }
         }
      }
   },
   "defaultProject": "navigation"
}

I've read several posts that claim to fix this issue with importing 'core-js/es7/reflect'. But when I look at the output of the 'ng serve' command, I've noticed the polyfills.ts file is not compiled.

A small sidenode. I'm using the single-spa lib so I need to use this builder as documented by the lib. I want my production to build the single-spa application and use 'ng serve' in dev mode to develop my application locally.

To Reproduce
Create an empty project with the configuration above.

Expected behavior
A working application.

Libraries

{
   "name": "navigation",
   "version": "0.0.0",
   "scripts": {
      "ng": "ng",
      "start": "npm run serve:single-spa",
      "build": "npm run build:single-spa",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e",
      "serve:single-spa": "ng serve --disable-host-check --port 4201 --deploy-url http://localhost:4201/ --live-reload false --prod",
      "build:single-spa": "ng build --prod --deploy-url /dist/navigation --output-hashing none"
   },
   "private": true,
   "dependencies": {
      "@angular-builders/custom-webpack": "^8",
      "@angular/animations": "~8.1.0",
      "@angular/common": "~8.1.0",
      "@angular/compiler": "~8.1.0",
      "@angular/core": "~8.1.0",
      "@angular/forms": "~8.1.0",
      "@angular/platform-browser": "~8.1.0",
      "@angular/platform-browser-dynamic": "~8.1.0",
      "@angular/router": "~8.1.0",
      "rxjs": "~6.4.0",
      "single-spa-angular": "^3.0.1",
      "tslib": "^1.9.0",
      "zone.js": "~0.9.1"
   },
   "devDependencies": {
      "@angular-devkit/build-angular": "~0.801.0",
      "@angular/cli": "~8.1.0",
      "@angular/compiler-cli": "~8.1.0",
      "@angular/language-service": "~8.1.0",
      "@types/node": "~8.9.4",
      "@types/jasmine": "~3.3.8",
      "@types/jasminewd2": "~2.0.3",
      "codelyzer": "^5.0.0",
      "jasmine-core": "~3.4.0",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~4.1.0",
      "karma-chrome-launcher": "~2.2.0",
      "karma-coverage-istanbul-reporter": "~2.0.1",
      "karma-jasmine": "~2.0.1",
      "karma-jasmine-html-reporter": "^1.4.0",
      "protractor": "~5.4.0",
      "ts-node": "~7.0.0",
      "tslint": "~5.15.0",
      "typescript": "~3.4.3"
   }
}

[mousedownmike]

This sounds similar to an issue I was having:
Can't resolve all parameters for Component: (?).

I resolved it by adding the following to tsconfig.spec.json:
"emitDecoratorMetadata": true,

This commit in my jest-demo-app project shows the exact change.

[arnevdv]

Tried that, did not fix anything

[arturovt]

@arnevdv

I started following your steps:

• created empty app
• pasted your package.json and angular.json

Then I noticed I cannot run it locally, because your angular.json replaces main.ts with another file that should contain single-spa-angular related logic.

I'm not sure if somebody is able to reproduce your error because you have to paste ALL files here (including main.single-spa.ts and extra-webpack.config.js).

It would be the best fit if you create a minimal reproduction repo on github.

---

Secondly, Angular bundles core-js/es7/reflect under the hood itself if your app is running in the development mode and it should not be bundled if your app is running in prod.

[just-jeb]

@arturovt Thanks for your help! @arnevdv I'm afraid without a reproduction repo we're unable to help you indeed.