Angular-cli: Error running production build after upgrading to angular-cli 1.5

Created on 21 Nov 2017 · 13Comments · Source: angular/angular-cli

Versions


    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.5.0
Node: 8.9.0
OS: win32 x64
Angular: 5.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.0-rc0
@angular/cli: 1.5.0
@angular/flex-layout: 2.0.0-beta.10-4905443
@angular/material: 5.0.0-rc0
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.36
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.5
typescript: 2.4.2
webpack: 3.8.1
Windows 10

Repro steps

run command ng build --prod --aot=false
deploy the output to a webserver
open page

Observed behavior

When opening the web page after deploying the production build I receive the error

Uncaught Error: Can't resolve all parameters for e: (?, ?, ?, ?).
    at c (main.f351f1c9f54ee60a63a8.bundle.js:1)
    at t._getDependenciesMetadata (main.f351f1c9f54ee60a63a8.bundle.js:1)
    at t._getTypeMetadata (main.f351f1c9f54ee60a63a8.bundle.js:1)
    at t._getInjectableMetadata (main.f351f1c9f54ee60a63a8.bundle.js:1)
    at t.getProviderMetadata (main.f351f1c9f54ee60a63a8.bundle.js:1)
    at main.f351f1c9f54ee60a63a8.bundle.js:1
    at Array.forEach (<anonymous>)
    at t._getProvidersMetadata (main.f351f1c9f54ee60a63a8.bundle.js:1)
    at main.f351f1c9f54ee60a63a8.bundle.js:1
    at Array.forEach (<anonymous>)

Interesting is that when I run ng serve --aot=false the application is working as expected.

Desired behavior

Before the upgrade to angular 5 and angular cli 1.5 production builds were running without any problems. I am just wondering what is wrong now

Mention any other details that might be useful

the package.json looks like this:

{
  "name": "bmc-web-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build-onpremise": "ng build --environment onpremise",
    "build-prod": "ng build --environment prod",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:watchall": "jest --watchAll",
    "test:ci": "jest --runInBand",
    "test:coverage": "jest --coverage",
    "karma": "karma start karma.conf.js --browsers Chrome_with_debugging",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "json-server": "json-server --watch src/db/json-server-db.json --routes src/db/json-server-routes.json",
    "onpremise": "ng serve --environment onpremise",
    "node-watch": "nodemon --watch src/db/mocks src/db/json-server.js",
    "serve": "concurrently \"ng serve\" \"npm run node-watch\""
  },
  "jest": {
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts",
    "transformIgnorePatterns": [
      "node_modules/(?!@ngrx|angular2-ui-switch)"
    ],
    "moduleNameMapper": {
      "@bremacon/beschaffungen/(.*)": "<rootDir>/src/app/features/beschaffungen/$1",
      "@bremacon/entnahmestellen/(.*)": "<rootDir>/src/app/features/entnahmestellen/$1",
      "@bremacon/importe/(.*)": "<rootDir>/src/app/features/importe/$1",
      "@bremacon/kunden/(.*)": "<rootDir>/src/app/features/kunden/$1",
      "@bremacon/lieferanten/(.*)": "<rootDir>/src/app/features/lieferanten/$1",
      "@bremacon/mandanten/(.*)": "<rootDir>/src/app/features/mandanten/$1",
      "@bremacon/modifikationen/(.*)": "<rootDir>/src/app/features/modifikationen/$1",
      "@bremacon/portfolios/(.*)": "<rootDir>/src/app/features/portfolios/$1",
      "@bremacon/vertraege/(.*)": "<rootDir>/src/app/features/vertraege/$1",
      "@bremacon/(.*)": "<rootDir>/src/app/$1"
    },
    "transform": {
      "^.+\\.(ts|js|html)$": "<rootDir>/node_modules/jest-preset-angular/preprocessor.js"
    },
    "moduleDirectories": [
      "node_modules",
      "<rootDir>/src"
    ],
    "globals": {
      "ts-jest": {
        "tsConfigFile": "./src/tsconfig.spec.json"
      },
      "__TRANSFORM_HTML__": true
    }
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@angular/flex-layout": "^2.0.0-beta.10-4905443",
    "@angular/material": "5.0.0-rc0",
    "@angular/cdk": "5.0.0-rc0",
    "ngrx-forms": "^1.1.1",
    "@ngrx/effects": "^4.1.1",
    "@ngrx/entity": "^4.1.1",
    "@ngrx/router-store": "^4.1.1",
    "@ngrx/store": "^4.1.1",
    "@ngrx/store-devtools": "^4.1.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14",
    "bootstrap": "^4.0.0-beta",
    "d3": "4.9.1",
    "d3-selection-multi": "1.0.1",
    "file-saver": "^1.3.3",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.2.1",
    "json-server": "^0.12.0",
    "moment": "^2.18.1",
    "ng2-file-upload": "^1.2.0",
    "popper": "^1.0.0",
    "propper": "^1.0.2",
    "reselect": "^3.0.1",
    "roboto-fontface": "^0.8.0",
    "simplify-js": "^1.2.1",
    "tether": "^1.3.7",
    "angular2-moment": "^1.7.0",
    "text-encoding": "^0.6.4"
  },
  "devDependencies": {
    "@angular/cli": "1.5.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "@types/d3-array": "^1.0",
    "@types/d3-axis": "^1.0",
    "@types/d3-brush": "^1.0",
    "@types/d3-chord": "^1.0",
    "@types/d3-collection": "^1.0",
    "@types/d3-color": "^1.0",
    "@types/d3-dispatch": "^1.0",
    "@types/d3-drag": "^1.0",
    "@types/d3-dsv": "^1.0",
    "@types/d3-ease": "^1.0",
    "@types/d3-force": "^1.0",
    "@types/d3-format": "^1.0",
    "@types/d3-geo": "^1.2",
    "@types/d3-hierarchy": "^1.0",
    "@types/d3-interpolate": "^1.1",
    "@types/d3-path": "^1.0.5",
    "@types/d3-polygon": "^1.0",
    "@types/d3-quadtree": "^1.0",
    "@types/d3-queue": "^3.0",
    "@types/d3-random": "^1.0",
    "@types/d3-scale": "^1.0.8",
    "@types/d3-selection": "^1.0.5",
    "@types/d3-selection-multi": "^1.0.5",
    "@types/d3-shape": "^1.0",
    "@types/d3-time": "^1.0.5",
    "@types/d3-time-format": "2.0.4",
    "@types/d3-timer": "^1.0",
    "@types/d3-transition": "^1.0",
    "@types/d3-voronoi": "^1.0",
    "@types/d3-zoom": "1.2.0",
    "@types/jest": "^21.1.5",
    "codelyzer": "~3.2.1",
    "concurrently": "^3.5.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "jest": "^21.2.1",
    "jest-preset-angular": "^4.0.1",
    "jest-zone-patch": "^0.0.8",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-jest": "^21.1.3",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "2.4.2"
  }
}

I already googled for this issue. Some issues state that this can be caused by circular dependencies which is not the case (at least the cli is not showing any warning). Any help would be appreciated.

Thanks in advance.

2 (required) bufix

Source

alsami

All 13 comments

I have almost the same error after migration from angular 4 to angular 5: Uncaught Error: Can't resolve all parameters for e: (?). for command: ng build --prod --aot=false

With command command ng build --dev--aot=false all works fine.
Some guys told that possible reason of issue in build-optimizer.

I didn't try yet this command, but you can try:
ng build --prod --aot false --build-optimizer false

akartynnik on 22 Nov 2017

That's true! I ran the build with parameter to disable the build optimization. Now I can load the page but I get a different error. Will post that later, on phone now.

EDIT:
So the initial error seems to be related to barreling. I found a similar issue here #8581 though I am not using aot because the project is not compatible.

running the command

ng build --prod --build-optimizer=false --aot=false

solves the initial error but now I am getting the following this error

ERROR Error: Uncaught (in promise): TypeError: Cannot convert undefined or null to object
TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at C (vendor.0db11c40ea8fe5927da1.bundle.js:1)
    at C (vendor.0db11c40ea8fe5927da1.bundle.js:1)
    at Object.filter (main.ff2d4a66ed8364c2db9f.bundle.js:1)
    at vendor.0db11c40ea8fe5927da1.bundle.js:1
    at Array.reduce (<anonymous>)
    at vendor.0db11c40ea8fe5927da1.bundle.js:1
    at vendor.0db11c40ea8fe5927da1.bundle.js:1
    at vendor.0db11c40ea8fe5927da1.bundle.js:1
    at Array.reduce (<anonymous>)
    at Function.keys (<anonymous>)
    at C (vendor.0db11c40ea8fe5927da1.bundle.js:1)
    at C (vendor.0db11c40ea8fe5927da1.bundle.js:1)
    at Object.filter (main.ff2d4a66ed8364c2db9f.bundle.js:1)
    at vendor.0db11c40ea8fe5927da1.bundle.js:1
    at Array.reduce (<anonymous>)
    at vendor.0db11c40ea8fe5927da1.bundle.js:1
    at vendor.0db11c40ea8fe5927da1.bundle.js:1
    at vendor.0db11c40ea8fe5927da1.bundle.js:1
    at Array.reduce (<anonymous>)
    at i (polyfills.78f2e7e60ac63d811d3b.bundle.js:1)
    at i (polyfills.78f2e7e60ac63d811d3b.bundle.js:1)
    at polyfills.78f2e7e60ac63d811d3b.bundle.js:1
    at e.invokeTask (polyfills.78f2e7e60ac63d811d3b.bundle.js:1)
    at Object.onInvokeTask (vendor.0db11c40ea8fe5927da1.bundle.js:1)
    at e.invokeTask (polyfills.78f2e7e60ac63d811d3b.bundle.js:1)
    at r.runTask (polyfills.78f2e7e60ac63d811d3b.bundle.js:1)
    at o (polyfills.78f2e7e60ac63d811d3b.bundle.js:1)
    at <anonymous>
(anonymous) @ vendor.0db11c40ea8fe5927da1.bundle.js:1

I found this issue #7797 which seems to be related to the target ES version but we are using ES2017. Any thoughts?

alsami on 22 Nov 2017

👍1

Heya, I'd like to look into this but really need a repro I can tinker with.

Can you setup a minimal repro please? You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

filipesilva on 23 Nov 2017

👍1

Hey @filipesilva cool, ty!
Will do so tonight and let you know when I am done.

alsami on 23 Nov 2017

👍1

So....
I did not manage to reproduce the exact error but I did some observation and noticed that every build with JIT leads to an error when using --prod.

Note: When removing the barrel from app/src/reducers/index and paste the code directly from app/src/reducers/public_api into app/src/reducers/index the JIT prod builds are working.

The error I receive now:

Uncaught TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at ct (main.62eb1713f4fa1a18cbf2.bundle.js:1)
    at main.62eb1713f4fa1a18cbf2.bundle.js:1
    at Object.cDNt (main.62eb1713f4fa1a18cbf2.bundle.js:1)
    at n (inline.ebaf15cb24718b53b396.bundle.js:1)
    at Object.0 (main.62eb1713f4fa1a18cbf2.bundle.js:1)
    at n (inline.ebaf15cb24718b53b396.bundle.js:1)
    at window.webpackJsonp (inline.ebaf15cb24718b53b396.bundle.js:1)
    at main.62eb1713f4fa1a18cbf2.bundle.js:1

You can find the repository here https://github.com/SamiAl90/angular-cli-issue-8576

I ran following commands

AOT ENABLED BUILD OPTIMIZER DISABLED

app.component.ts => import * as fromRoot from '@app/reducers';
ng serve --aot=true --build-optimizer=false --> works
ng serve --prod --aot=true --build-optimizer=false --> works

app.component.ts => import * as fromRoot from '../../reducers';
ng serve --aot=true --build-optimizer=false --> works
ng serve --prod --aot=true --build-optimizer=false --> works

AOT DISABLED BUILD OPTIMIZER DISABLED

app.component.ts => import * as fromRoot from '@app/reducers';
ng serve --aot=false --build-optimizer=false --> works
ng serve --prod --aot=false --build-optimizer=false --> doesn't work

app.component.ts => import * as fromRoot from '../../reducers';
ng serve --aot=false --build-optimizer=false --> works
ng serve --prod --aot=false --build-optimizer=false --> doesn't work

AOT ENABLED BUILD OPTIMIZER ENABLED

app.component.ts => import * as fromRoot from '@app/reducers';
ng serve --aot=true --build-optimizer=true --> works
ng serve --prod --aot=true --build-optimizer=true --> works

app.component.ts => import * as fromRoot from '../../reducers';
ng serve --aot=true --build-optimizer=true --> works
ng serve --prod --aot=true --build-optimizer=true --> works

I hope this helps analysing the issue.

alsami on 23 Nov 2017

https://github.com/angular/angular-cli/issues/8434#issuecomment-346664305 - this comment save my time. Maybe it will be useful for you too.

akartynnik on 24 Nov 2017

In the sample repo I provided this is not that case.

alsami on 24 Nov 2017

Any news on this? We really would love to upgrade to angular 5.x

alsami on 15 Dec 2017

@Birdperson90 I ran this commands:

git clone https://github.com/SamiAl90/angular-cli-issue-8576
cd angular-cli-issue-8576
npm i
npm run ng -- serve --prod --aot=false --build-optimizer=false

I think this should fail since app.component.ts is already using import * as fromRoot from '@app/reducers'; and this is a flag combination you mentioned should fail.

I didn't see the error you mentioned but I did see a API call failure: GET http://localhost:5001/api/main/v1/movies/ net::ERR_CONNECTION_REFUSED.

Then I commented out // this.store.dispatch(new movieCollectionActions.LoadAction()); from movie.component.ts, refreshed, and still don't see an error.

What should I do to see it?

filipesilva on 9 Jan 2018

Hey @filipesilva

Hm, this is really strange. I am still receiving errors and used the same command to run the application.

ng --serve --prod --aot=false --build-optimizer=false

What version of angular cli are you running globally?

Edit
Okay I updated my global cli to version 1.6.1, now the error is gone while the project uses cli version 1.5.3.

alsami on 11 Jan 2018

You might have your API locally, allowing your app to work correctly.

Can you try updating to 1.6.3 locally to see if everything is fixed then?

filipesilva on 11 Jan 2018

@filipesilva it wasn't the api call that caused the issue, I wasn't able to run the app at all b4 upgrading to cli 1.6.1 it seems to be fixed now on that project.

Thanks for the help.

alsami on 11 Jan 2018

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}