Error running production build after upgrading to angular-cli 1.5 #8576

alsami · 2017-11-21T18:04:41Z

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.

The text was updated successfully, but these errors were encountered:

akartynnik · 2017-11-22T17:38:55Z

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

alsami · 2017-11-22T19:45:12Z

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?

filipesilva · 2017-11-23T11:01:53Z

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.

alsami · 2017-11-23T12:20:06Z

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

alsami · 2017-11-23T22:14:01Z

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.

akartynnik · 2017-11-23T23:57:18Z

#8434 (comment) - this comment save my time. Maybe it will be useful for you too.

alsami · 2017-11-24T01:01:04Z

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

alsami · 2017-12-15T16:28:51Z

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

filipesilva · 2018-01-09T14:06:45Z

@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?

alsami · 2018-01-11T08:11:44Z

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.

filipesilva · 2018-01-11T11:04:39Z

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?

alsami · 2018-01-11T12:03:03Z

@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.

angular-automatic-lock-bot · 2019-09-07T20:41:02Z

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.}

filipesilva self-assigned this Nov 23, 2017

filipesilva added the needs: repro steps We cannot reproduce the issue with the information given label Nov 23, 2017

alsami changed the title ~~Error running created production build after upgrading to angular-cli 1.5~~ Error running production build after upgrading to angular-cli 1.5 Nov 27, 2017

alsami mentioned this issue Dec 6, 2017

@ngtools/webpack AOT loader failed to resolve nested exports (Barrels) #8581

Closed

filipesilva added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent type: bug/fix and removed needs: repro steps We cannot reproduce the issue with the information given labels Dec 7, 2017

alsami closed this as completed Jan 11, 2018

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error running production build after upgrading to angular-cli 1.5 #8576

Error running production build after upgrading to angular-cli 1.5 #8576

alsami commented Nov 21, 2017 •

edited

Loading

akartynnik commented Nov 22, 2017 •

edited

Loading

alsami commented Nov 22, 2017 •

edited

Loading

filipesilva commented Nov 23, 2017

alsami commented Nov 23, 2017

alsami commented Nov 23, 2017 •

edited

Loading

akartynnik commented Nov 23, 2017

alsami commented Nov 24, 2017

alsami commented Dec 15, 2017

filipesilva commented Jan 9, 2018

alsami commented Jan 11, 2018 •

edited

Loading

filipesilva commented Jan 11, 2018

alsami commented Jan 11, 2018

angular-automatic-lock-bot bot commented Sep 7, 2019

Error running production build after upgrading to angular-cli 1.5 #8576

Error running production build after upgrading to angular-cli 1.5 #8576

Comments

alsami commented Nov 21, 2017 • edited Loading

Versions

Repro steps

Observed behavior

Desired behavior

Mention any other details that might be useful

akartynnik commented Nov 22, 2017 • edited Loading

alsami commented Nov 22, 2017 • edited Loading

filipesilva commented Nov 23, 2017

alsami commented Nov 23, 2017

alsami commented Nov 23, 2017 • edited Loading

AOT ENABLED BUILD OPTIMIZER DISABLED

AOT DISABLED BUILD OPTIMIZER DISABLED

AOT ENABLED BUILD OPTIMIZER ENABLED

akartynnik commented Nov 23, 2017

alsami commented Nov 24, 2017

alsami commented Dec 15, 2017

filipesilva commented Jan 9, 2018

alsami commented Jan 11, 2018 • edited Loading

filipesilva commented Jan 11, 2018

alsami commented Jan 11, 2018

angular-automatic-lock-bot bot commented Sep 7, 2019

alsami commented Nov 21, 2017 •

edited

Loading

akartynnik commented Nov 22, 2017 •

edited

Loading

alsami commented Nov 22, 2017 •

edited

Loading

alsami commented Nov 23, 2017 •

edited

Loading

alsami commented Jan 11, 2018 •

edited

Loading