Upgrade to Webpack 2.3.x

[hccampos]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [x] feature request

Versions.

Angular CLI 1.0.0

Desired functionality.

Any plans/timeframe to upgrade to Webpack 2.3.x? Tried locking the version but compilation fails with a bunch of errors. I guess Webpack's internal apis changed (even though they shouldn't since it is a minor version bump):

13% building modules 30/54 modules 24 active ...ugo/pix4d/spa/node_modules/url/url.jsError: No module factory available for dependency type: ContextElementDependency
    at Compilation.addModuleDependencies (/home/hugo/pix4d/spa/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:206:21)
    at Compilation.processModuleDependencies (/home/hugo/pix4d/spa/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:195:8)
    at _this.buildModule.err (/home/hugo/pix4d/spa/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:335:13)
    at building.forEach.cb (/home/hugo/pix4d/spa/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:140:27)
    at Array.forEach (native)
    at callback (/home/hugo/pix4d/spa/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:140:13)
    at module.build (/home/hugo/pix4d/spa/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:167:11)
    at ContextModule.<anonymous> (/home/hugo/pix4d/spa/node_modules/@angular/cli/node_modules/webpack/lib/ContextModule.js:118:3)
    at ContextModule.result.resolveDependencies (/home/hugo/pix4d/spa/node_modules/@ngtools/webpack/src/plugin.js:228:25)
    at ContextModule.build (/home/hugo/pix4d/spa/node_modules/@angular/cli/node_modules/webpack/lib/ContextModule.js:99:7)
    at Compilation.buildModule (/home/hugo/pix4d/spa/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:142:10)
    at factoryCallback (/home/hugo/pix4d/spa/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:324:11)
    at /home/hugo/pix4d/spa/node_modules/@angular/cli/node_modules/webpack/lib/ContextModuleFactory.js:96:12
    at /home/hugo/pix4d/spa/node_modules/tapable/lib/Tapable.js:204:11
    at done.then (/home/hugo/pix4d/spa/node_modules/@ngtools/webpack/src/plugin.js:230:28)
 28% building modules 156/191 modules 35 active ...ode_modules/webpack/buildin/global.js/home/hugo/pix4d/spa/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:264
				if(_this.profile) {
				        ^

TypeError: Cannot read property 'profile' of null
    at factoryCallback (/home/hugo/pix4d/spa/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:264:13)
    at /home/hugo/pix4d/spa/node_modules/@angular/cli/node_modules/webpack/lib/NormalModuleFactory.js:242:4
    at /home/hugo/pix4d/spa/node_modules/@angular/cli/node_modules/webpack/lib/NormalModuleFactory.js:93:13
    at /home/hugo/pix4d/spa/node_modules/tapable/lib/Tapable.js:204:11
    at NormalModuleFactory.params.normalModuleFactory.plugin (/home/hugo/pix4d/spa/node_modules/@angular/cli/node_modules/webpack/lib/CompatibilityPlugin.js:52:5)
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/home/hugo/pix4d/spa/node_modules/tapable/lib/Tapable.js:208:13)
    at onDoneResolving (/home/hugo/pix4d/spa/node_modules/@angular/cli/node_modules/webpack/lib/NormalModuleFactory.js:68:11)
    at onDoneResolving (/home/hugo/pix4d/spa/node_modules/@angular/cli/node_modules/webpack/lib/NormalModuleFactory.js:189:6)
    at _combinedTickCallback (internal/process/next_tick.js:73:7)
    at process._tickCallback (internal/process/next_tick.js:104:9)

[hccampos]

Maybe I should open it up on the webpack side too. What do you think @sokra @TheLarkInn ?

[intellix]

#5918

[hccampos]

@intellix that's only bumping the version in the CLI and probably won't fix the issues mentioned above. Unless the issues are caused by a conflict between the CLI's webpack and the one forced in the package.json. Hmmm

[sumitarora]

@hccampos Can you check it using branch 1.1.x https://github.com/angular/angular-cli/tree/1.1.x that is it still an issue?

[filipesilva]

Fixed by #5918

I am getting the same Error since today. We cloned our project to another PC. Doing ng serve after npm install brings us to the point, where the error occurs.

15% building modules 43/56 modules 13 active ...lar/compiler/@angular/compiler.es5.jsError: No module factory available for dependency type: ContextElementDependency
    at Compilation.addModuleDependencies (/Users/djlatscho/angular4/realEstate4.0/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:206:21)
    at Compilation.processModuleDependencies (/Users/djlatscho/angular4/realEstate4.0/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:195:8)
    at _this.buildModule.err (/Users/djlatscho/angular4/realEstate4.0/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:335:13)
    at building.forEach.cb (/Users/djlatscho/angular4/realEstate4.0/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:140:27)
    at Array.forEach (native)
    at callback (/Users/djlatscho/angular4/realEstate4.0/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:140:13)
    at module.build (/Users/djlatscho/angular4/realEstate4.0/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:167:11)
    at ContextModule.<anonymous> (/Users/djlatscho/angular4/realEstate4.0/node_modules/@angular/cli/node_modules/webpack/lib/ContextModule.js:118:3)
    at ContextModule.result.resolveDependencies (/Users/djlatscho/angular4/realEstate4.0/node_modules/@ngtools/webpack/src/plugin.js:229:25)
    at ContextModule.build (/Users/djlatscho/angular4/realEstate4.0/node_modules/@angular/cli/node_modules/webpack/lib/ContextModule.js:99:7)
    at Compilation.buildModule (/Users/djlatscho/angular4/realEstate4.0/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:142:10)
    at factoryCallback (/Users/djlatscho/angular4/realEstate4.0/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:324:11)
    at /Users/djlatscho/angular4/realEstate4.0/node_modules/@angular/cli/node_modules/webpack/lib/ContextModuleFactory.js:96:12
    at /Users/djlatscho/angular4/realEstate4.0/node_modules/tapable/lib/Tapable.js:204:11
    at done.then (/Users/djlatscho/angular4/realEstate4.0/node_modules/@ngtools/webpack/src/plugin.js:231:28)    15% building modules 44/56 modules 12 active ...lar/compiler/@angular/compiler.es5.js/Users/djlatscho/angular4/realEstate4.0/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:329
                                        if(_this.profile) {
                                                ^

TypeError: Cannot read property 'profile' of null
    at _this.buildModule.err (/Users/djlatscho/angular4/realEstate4.0/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:329:14)
    at building.forEach.cb (/Users/djlatscho/angular4/realEstate4.0/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:140:27)
    at Array.forEach (native)
    at callback (/Users/djlatscho/angular4/realEstate4.0/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:140:13)
    at module.build (/Users/djlatscho/angular4/realEstate4.0/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:167:11)
    at /Users/djlatscho/angular4/realEstate4.0/node_modules/@angular/cli/node_modules/webpack/lib/NormalModule.js:210:10
    at /Users/djlatscho/angular4/realEstate4.0/node_modules/@angular/cli/node_modules/webpack/lib/NormalModule.js:162:10
    at /Users/djlatscho/angular4/realEstate4.0/node_modules/loader-runner/lib/LoaderRunner.js:370:3
    at iterateNormalLoaders (/Users/djlatscho/angular4/realEstate4.0/node_modules/loader-runner/lib/LoaderRunner.js:211:10)
    at Array.<anonymous> (/Users/djlatscho/angular4/realEstate4.0/node_modules/loader-runner/lib/LoaderRunner.js:202:4)
    at Storage.finished (/Users/djlatscho/angular4/realEstate4.0/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:15)
    at /Users/djlatscho/angular4/realEstate4.0/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:69:9
    at /Users/djlatscho/angular4/realEstate4.0/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:439:3)

My package.json looks like this:

"dependencies": {
    "@agm/core": "^1.0.0-beta.0",
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/platform-server": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@types/jspdf": "^1.1.31",
    "body-parser": "^1.17.1",
    "core-js": "^2.4.1",
    "express": "^4.15.2",
    "jspdf": "^1.3.3",
    "ng2-date-time-picker": "^4.0.0",
    "ng2-page-scroll": "^4.0.0-beta.6",
    "ngx-bootstrap": "^2.0.0-beta.2",
    "ngx-infinite-scroll": "^0.5.1",
    "nodemailer": "^4.0.1",
    "rxjs": "^5.2.0",
    "webpack": "^2.5.1",
    "xhr2": "^0.1.4",
    "zone.js": "^0.8.5"
  },
  "devDependencies": {
    "@angular/cli": "^1.0.3",
    "@angular/compiler-cli": "^4.0.0",
    "@ngtools/webpack": "^1.3.1",
    "@types/express": "^4.0.35",
    "@types/jasmine": "2.5.38",
    "@types/node": "^7.0.8",
    "codelyzer": "~2.0.0",
    "copy-webpack-plugin": "^4.0.1",
    "html-webpack-plugin": "^2.28.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "nodemon": "^1.11.0",
    "protractor": "~5.1.0",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.6.1",
    "script-ext-html-webpack-plugin": "^1.7.1",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "^2.2.1",
    "webpack-merge": "^4.0.0"
  }

Angular version:

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.0.3
node: 7.10.0
os: darwin x64
@angular/animations: 4.1.1
@angular/common: 4.1.1
@angular/compiler: 4.1.1
@angular/core: 4.1.1
@angular/forms: 4.1.1
@angular/http: 4.1.1
@angular/platform-browser: 4.1.1
@angular/platform-browser-dynamic: 4.1.1
@angular/platform-server: 4.1.1
@angular/router: 4.1.1
@angular/cli: 1.0.3
@angular/compiler-cli: 4.1.1
@ngtools/webpack: 1.3.1

What I already did:

• re-install/update angular
• update node js, npm
• update/downgrade webpack from 2.2.0 to 2.5.1 and back (actually I am againback on the latest version)

I can't find a solution for this in #5918. What am I doing wrong?

Cheers

edit: overlooked "feat(@angular/cli): use and support webpack 2.3", but whe fixing this, I get another error:

ERROR in ./src/main.browser.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
    at Object.getNewLineCharacter (/Users/djlatscho/angular4/realEstate4.0/node_modules/typescript/lib/typescript.js:9514:20)
    at Object.createCompilerHost (/Users/djlatscho/angular4/realEstate4.0/node_modules/typescript/lib/typescript.js:63770:26)
    at Object.ngcLoader (/Users/djlatscho/angular4/realEstate4.0/node_modules/@ngtools/webpack/src/loader.js:380:33)
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.browser.ts

ERROR in ./src/polyfills.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
    at Object.getNewLineCharacter (/Users/djlatscho/angular4/realEstate4.0/node_modules/typescript/lib/typescript.js:9514:20)
    at Object.createCompilerHost (/Users/djlatscho/angular4/realEstate4.0/node_modules/typescript/lib/typescript.js:63770:26)
    at Object.ngcLoader (/Users/djlatscho/angular4/realEstate4.0/node_modules/@ngtools/webpack/src/loader.js:380:33)
 @ multi ./src/polyfills.ts
webpack: Failed to compile.

checked everything from this post, but nothing worked for me.

[tonivj5]

I have the same problem. I updated webpack too, but it did not work...

[JohnGalt1717]

Same issue here. Did a full uninstall of node and cleaned directories and still get the dreaded newline error.

[rudzikdawid]

same issue here

npm ls -g --depth=0

/usr/lib
├── asar@0.13.0
└── npm@3.10.10

package.json:

  "dependencies": {
    "@angular/animations": "^4.3.0",
    "@angular/cdk": "github:angular/cdk-builds",
    "@angular/common": "^4.3.0",
    "@angular/compiler": "^4.3.0",
    "@angular/core": "^4.3.0",
    "@angular/flex-layout": "angular/flex-layout-builds",
    "@angular/forms": "^4.3.0",
    "@angular/http": "^4.3.0",
    "@angular/material": "angular/material2-builds",
    "@angular/platform-browser": "^4.3.0",
    "@angular/platform-browser-dynamic": "^4.3.0",
    "@angular/platform-server": "^4.3.0",
    "@angular/router": "^4.3.0",
    "angular2gridster": "^0.6.3",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.0.1",
    "zone.js": "^0.8.12"
  },
  "devDependencies": {
    "@angular/cli": "^1.2.3",
    "@angular/compiler-cli": "^4.3.0",
    "@types/jasmine": "2.5.46",
    "@types/node": "~7.0.12",
    "codelyzer": "~3.0.1",
    "simple-git": "^1.69.0",
    "simple-terminal-menu": "^1.1.3",
    "ts-node": "~3.0.4",
    "tslint": "^5.3.2",
    "typescript": "^2.4.1"
  }

ng serve

12% building modules 17/29 modules 12 active ...art/node_modules/zone.js/dist/zone.jsError: No module factory available for dependency type: ContextElementDependency
    at Compilation.addModuleDependencies (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:206:21)
    at Compilation.processModuleDependencies (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:195:8)
    at _this.buildModule.err (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:336:13)
    at building.forEach.cb (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:140:27)
    at Array.forEach (native)
    at callback (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:140:13)
    at module.build (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:167:11)
    at resolveDependencies (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/ContextModule.js:133:4)
    at ContextModule.result.resolveDependencies (/home/mike_oldfield/material2-start/node_modules/@ngtools/webpack/src/plugin.js:249:25)
    at ContextModule.build (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/ContextModule.js:103:8)
    at Compilation.buildModule (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:142:10)
    at factoryCallback (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:325:11)
    at /home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/ContextModuleFactory.js:96:12
    at /home/mike_oldfield/material2-start/node_modules/tapable/lib/Tapable.js:250:11
    at done.then (/home/mike_oldfield/material2-start/node_modules/@ngtools/webpack/src/plugin.js:251:28)               13% building modules 29/36 modules 7 active ...terial2-start/node_modules/rxjs/Rx.js/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:265
                                if(_this.profile) {
                                        ^

TypeError: Cannot read property 'profile' of null
    at factoryCallback (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:265:13)
    at factory (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/NormalModuleFactory.js:253:5)
    at applyPluginsAsyncWaterfall (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/NormalModuleFactory.js:99:14)
    at /home/mike_oldfield/material2-start/node_modules/tapable/lib/Tapable.js:250:11
    at NormalModuleFactory.params.normalModuleFactory.plugin (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/CompatibilityPlugin.js:52:5)
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/home/mike_oldfield/material2-start/node_modules/tapable/lib/Tapable.js:254:13)
    at resolver (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/NormalModuleFactory.js:74:11)
    at process.nextTick (/home/mike_oldfield/material2-start/node_modules/@angular/cli/node_modules/webpack/lib/NormalModuleFactory.js:205:8)
    at _combinedTickCallback (internal/process/next_tick.js:73:7)
    at process._tickCallback (internal/process/next_tick.js:104:9)

[ceoaliongroo]

That same error when have with the installation with webpack: ^3.4.11 as dev dependencies in the project.

packages.json

{
  "name": "dashboard-fwa",
  "version": "0.2.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.3.2",
    "@angular/common": "^4.3.2",
    "@angular/compiler": "^4.3.2",
    "@angular/core": "^4.3.2",
    "@angular/forms": "^4.3.2",
    "@angular/http": "^4.3.2",
    "@angular/platform-browser": "^4.3.2",
    "@angular/platform-browser-dynamic": "^4.3.2",
    "@angular/router": "^4.3.2",
    "@swimlane/ngx-datatable": "^9.3.1",
    "bootstrap": "^4.0.0-alpha.6",
    "chart.js": "^2.6.0",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "ng2-charts": "^1.6.0",
    "ngx-bootstrap": "^1.8.1",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.16"
  },
  "devDependencies": {
    "@angular/cli": "^1.2.6",
    "@angular/compiler-cli": "^4.3.2",
    "@ngtools/json-schema": "^1.1.0",
    "@types/jasmine": "^2.5.53",
    "@types/node": "^8.0.17",
    "codelyzer": "^3.1.2",
    "jasmine-core": "^2.7.0",
    "jasmine-spec-reporter": "^4.1.1",
    "karma": "^1.7.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.1.2",
    "ts-node": "^3.3.0",
    "tslint": "^5.5.0",
    "typescript": "^2.4.2",
    "webpack": "^3.4.1",
    "webpack-dev-middleware": "^1.11.0",
    "webpack-dev-server": "^2.6.1"
  }
}

D:\Dev\WEB\MetricsMonitorClient\dashboard>npm ls webpack
dashboard-fwa@0.2.0 D:\Dev\WEB\MetricsMonitorClient\dashboard
`-- webpack@3.4.1

@angular/cli@1.2.6 by default installed webpack: ˆ2.4.1 i want to use the version ˆ3.4.1

D:\Dev\WEB\MetricsMonitorClient\dashboard>npm ls -g webpack
C:\Users\carlosm\AppData\Roaming\npm
`-- @angular/cli@1.2.6
  `-- webpack@2.4.1

i understood maybe the issue is because a conflict between the global and local versions of webpack.

How is possible to indicate the @angular/cli the webpack version to install?
How i can use lazy load routes, with the last version of webpack?

[LiUhoNgDan222]

@ceoaliongroo Have you solved it?I have the same problem.

[filipesilva]

Heya, you shouldn't add webpack directly to your dependencies. This will cause errors with Angular CLI since it depends on specific versions of webpack.

[costea93]

The same problem, webpack it's not added in dependencies. Tried a lot of options - remove node_modules, changed the version of angular-compiler, angular-cli etc... it doesn't help

@filipesilva - what's the recommended approach for upgrading? Going from 1.2.7 to 1.4.9 caused a similar issue for me.