Angular-cli: Lazy loading module broken with " No module factory available for dependency type: ContextElementDependency"
Bug Report or Feature Request (mark with an x)
- [x] bug report -> please search issues before submitting
- [ ] feature request
Versions.
$ ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ â–³ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
@angular/cli: 1.1.0-rc.0
node: 6.10.0
os: win32 x64
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.1.0-rc.0
@angular/compiler-cli: 4.1.3
@angular/tsc-wrapped: 4.1.3
Repro steps.
Include a lazy loaded module in AppRoutingModule.
This doesn't happen with a fresh ng new <project> set-up. When adding "webpack": "^2.5.0" dependency, this breaks the build.
"typescript": "~2.3.1",
"webpack": "^2.5.0",
"webpack-dev-middleware": "^1.10.2",
"webpack-dev-server": "^2.4.5",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "^4.1.0"
A repro can be found here: dherges/ng-cli-lazy-loading-broken-6417. The change in package.json dependencies breaks the build.
The log given by the failure.
webpack: Compiling...
40% building modules 1/2 modules 1 active ...ework\guide\app\app-routing.module.tsError: No module factory available for dependency type: ContextElementDependency
at Compilation.addModuleDependencies (<project>\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:206:21)
at Compilation.processModuleDependencies (<project>\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:195:8)
at _this.buildModule.err (<project>\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:336:13)
at building.forEach.cb (<project>\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:140:27)
at Array.forEach (native)
at callback (<project>\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:140:13)
at module.build (<project>\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:167:11)
at resolveDependencies (<project>\node_modules\@angular\cli\node_modules\webpack\lib\ContextModule.js:133:4)
at ContextModule.result.resolveDependencies (<project>\node_modules\@ngtools\webpack\src\plugin.js:229:25)
at ContextModule.build (<project>\node_modules\@angular\cli\node_modules\webpack\lib\ContextModule.js:103:8)
at Compilation.buildModule (<project>\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:142:10)
at factoryCallback (<project>\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:325:11)
at <project>\node_modules\@angular\cli\node_modules\webpack\lib\ContextModuleFactory.js:96:12
at <project>\node_modules\tapable\lib\Tapable.js:204:11
at done.then (<project>\node_modules\@ngtools\webpack\src\plugin.js:231:28)
at process._tickCallback (internal/process/next_tick.js:103:7)
70% building modules 2/2 modules 0 active
14% building modules 36/48 modules 12 active ...e_modules\rxjs\add\operator\filter.js<project>\node_modules\@angular\cli\node_modules\webpack\li
b\Compilation.js:265
if(_this.profile) {
^
TypeError: Cannot read property 'profile' of null
at factoryCallback (<project>\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:265:13)
at factory (<project>\node_modules\@angular\cli\node_modules\webpack\lib\NormalModuleFactory.js:253:5)
at applyPluginsAsyncWaterfall (<project>\node_modules\@angular\cli\node_modules\webpack\lib\NormalModuleFactory.js:99:14)
at <project>\node_modules\tapable\lib\Tapable.js:204:11
at NormalModuleFactory.params.normalModuleFactory.plugin (<project>\node_modules\@angular\cli\node_modules\webpack\lib\CompatibilityPlugin.js
:52:5)
at NormalModuleFactory.applyPluginsAsyncWaterfall (<project>\node_modules\tapable\lib\Tapable.js:208:13)
at resolver (<project>\node_modules\@angular\cli\node_modules\webpack\lib\NormalModuleFactory.js:74:11)
at process.nextTick (<project>\node_modules\@angular\cli\node_modules\webpack\lib\NormalModuleFactory.js:205:8)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
Desired functionality.
Lazy loading:
const routes: Routes = [
{
path: 'content',
loadChildren: './+content/content.module#ContentModule'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Mention any other details that might be useful.
There are other related issues from the past #3793, #4246
dherges
All 58 comments
More observations:
- I copied over working code from a fresh
ng new <project>and it caused the above error. - Webpack build fails when it encounters the lazy-loaded module.
In +content/content.module.ts:
// @NgModule({ ... })
// export class ContentModule {}
Commenting-out gives ContentModule is not an NgModule error.
Commenting-in causes the above error.
ContentModule does work in a "fresh" app.
Here are dependencies in package.json and customized .angular-cli.json:
{
...
"devDependencies": {
"@angular/cli": "^1.1.0-rc.0",
"@angular/compiler-cli": "^4.1.3",
"@angular/tsc-wrapped": "^4.1.3",
"@types/jasmine": "^2.5.47",
"@types/node": "^7.0.18",
"angular2-template-loader": "^0.6.2",
"awesome-typescript-loader": "^3.1.3",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"browser-sync": "^2.18.8",
"chalk": "^1.1.3",
"codelyzer": "^3.0.1",
"conventional-changelog": "^1.1.3",
"core-js": "^2.4.1",
"cpx": "^1.5.0",
"css-loader": "^0.28.1",
"del": "^2.2.2",
"dgeni": "^0.4.7",
"dgeni-packages": "^0.19.0",
"gray-matter": "^2.1.1",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-csso": "^3.0.0",
"gulp-if": "^2.0.2",
"gulp-imagemin": "^3.2.0",
"gulp-inline-ng2-template": "^4.0.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.6.0",
"gulp-svgmin": "^1.2.3",
"gulp-svgstore": "^6.1.0",
"gulp-util": "^3.0.8",
"handlebars": "^4.0.8",
"i": "^0.3.5",
"istanbul-combine": "^0.3.0",
"istanbul-instrumenter-loader": "^2.0.0",
"jasmine-core": "^2.6.1",
"jasmine-spec-reporter": "^4.1.0",
"js-beautify": "^1.6.12",
"js-yaml": "^3.8.3",
"json-loader": "^0.5.4",
"karma": "^1.6.0",
"karma-chrome-launcher": "^2.1.0",
"karma-cli": "^1.0.1",
"karma-coverage": "^1.1.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "^1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-mocha-reporter": "^2.2.3",
"karma-phantomjs-launcher": "^1.0.4",
"karma-remap-coverage": "^0.1.4",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^2.0.3",
"markdown-it": "^8.3.1",
"merge-stream": "^1.0.1",
"minimist": "^1.2.0",
"mkdirp": "^0.5.1",
"mz": "^2.6.0",
"node-sass": "^4.5.3",
"protractor": "^5.1.1",
"raw-loader": "^0.5.1",
"rho": "^0.4.1",
"rimraf": "^2.6.1",
"rollup": "^0.41.6",
"rollup-plugin-angular-inline": "^1.0.0",
"rollup-plugin-node-resolve": "^3.0.0",
"run-sequence": "^1.2.2",
"sass-loader": "^6.0.5",
"shelljs": "^0.7.7",
"sorcery": "^0.10.0",
"sort-object": "^3.0.2",
"source-map-loader": "^0.2.1",
"standard-version": "^4.0.0",
"to-string-loader": "^1.1.5",
"ts-api-guardian": "^0.2.1",
"ts-helpers": "^1.1.2",
"ts-node": "^3.0.4",
"tslint": "^5.2.0",
"typescript": "^2.3.2",
"uglify-js": "^3.0.8",
"vinyl-fs": "^2.4.4",
"webpack": "^2.5.0",
"webpack-dev-middleware": "^1.10.2",
"webpack-dev-server": "^2.4.5",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "^4.1.0"
},
"dependencies": {
"@angular/common": "^4.1.3",
"@angular/compiler": "^4.1.3",
"@angular/core": "^4.1.3",
"@angular/forms": "^4.1.3",
"@angular/http": "^4.1.3",
"@angular/platform-browser": "^4.1.3",
"@angular/platform-browser-dynamic": "^4.1.3",
"@angular/router": "^4.1.3",
"@nice/nice-fluorine-icons": "^2.2.16",
"angular2-markdown": "^1.6.0",
"bootstrap": "4.0.0-alpha.6",
"marked-extras": "^0.2.4",
"rxjs": "^5.0.1",
"zone.js": "^0.8.4"
},
"peerDependencies": {
"@angular/common": "^4.1.3",
"@angular/compiler": "^4.1.3",
"@angular/core": "^4.1.3",
"@angular/forms": "^4.1.3",
"@angular/http": "^4.1.3",
"@angular/platform-browser": "^4.1.3",
"@angular/platform-browser-dynamic": "^4.1.3",
"@angular/router": "^4.1.3",
"@nice/nice-fluorine-icons": "^2.2.16",
"bootstrap": "4.0.0-alpha.6",
"rxjs": "^5.0.1",
"zone.js": "^0.8.4"
},
...
}
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "foobar"
},
"apps": [
{
"root": "guide",
"outDir": "dist/guide",
"assets": [
"assets",
"favicon.ico",
"**/*.md",
{
"input": "../node_modules/@foo/bar-icons/dist/solution-with-combined-SVG",
"glob": "**/*.svg",
"output": "assets/icons"
},
{
"input": "../node_modules/@foo/bar-icons/dist/vectors",
"glob": "**/*.svg",
"output": "assets/icons/icon_fluorine"
}
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "ud",
"styles": [
"styles.scss",
"styles.css",
"styles.docs-api.scss"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./e2e/protractor.conf.js"
}
},
"lint": [
{
"project": "demo/tsconfig.app.json",
"tslintConfig": "demo/tslint.json"
},
{
"project": "demo/tsconfig.spec.json",
"tslintConfig": "demo/tslint.json"
},
{
"project": "e2e/tsconfig.e2e.json",
"tslintConfig": "demo/tslint.json"
}
],
"test": {
"karma": {
"config": "demo/karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"component": {}
}
}
Heya, can you put up a simple repro that shows this happening?
filipesilva
on 23 May 2017
The most likely cause is a webpack version mismatch. Version 1.1 of the CLI uses 2.4.x.
clydin
on 23 May 2017
@clydin yes, it's the version mismatch.
@filipesilva here's the repro: dherges/ng-cli-lazy-loading-broken-6417. The change in package.json dependencies breaks the build.
dherges
on 24 May 2017
@dherges I'm not sure there isn't anything we can do here, it seems like having two versions of webpack causes some odd interactions. Open to suggestions though.
filipesilva
on 24 May 2017
Hey guys. Just ran into this problem myself. @dherges and @filipesilva I was able to fix the problem by installing Webpack 2.6.0.
"webpack": "^2.6.0",
"webpack-dev-middleware": "^1.10.2",
"webpack-dev-server": "^2.4.5",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "^4.1.0"
Hope this helps.
jwuliger
on 25 May 2017
@filipesilva I've got no idea, tbh. Let's just keep it documented. If version bumping solves it, then I guess that's what most people should do and will do.
Is it something the webpack team is aware of? Does it help them? Looks like there's no related issue over at their GitHub project.
dherges
on 25 May 2017
I don't know if they are aware but tbh I wouldn't expect multiple webpack deps to play well with each other.
filipesilva
on 25 May 2017
fixed :
npm uninstall --save-dev webpack
sudo rm -R node_modules
npm install
i think its not lazy load problem
also i got this only after implementing the universal
wnabil
on 1 Jun 2017
I uninstalled webpack 2.6.0 and installed 2.4.1. Still crashing in the same way.
alexfung888
on 4 Jun 2017
and ng serve works fine after I I changed the lazy loaded module to eager loaded.
alexfung888
on 4 Jun 2017
@alexfung888 Have you tried to use the master branch of the CLI via NPM linking? Changes have been made since the latest official release.
jwuliger
on 5 Jun 2017
@jwuliger No I haven't. How do I do that? I only npm install @latest.
alexfung888
on 5 Jun 2017
@alexfung888 Try this from the readme: https://github.com/angular/angular-cli#development-hints-for-working-on-angular-cli
jwuliger
on 5 Jun 2017
@jwuliger Thanks for the reference, but how do I revert the global and local npm link after I am done? How do I get back to the normal released version?
Do I just manually delete the symbolic links created, and re-do the regular npm install?
alexfung888
on 5 Jun 2017
@alexfung888 The team just recently added a new command flag that I find very welcome. What I do is add the flag in my package.json file like so:
"start": "ng serve -o --port 4800 --preserveSymlinks true",
"build": "ng build -e prod --preserveSymlinks true",
So for example - I currently have v1.2.0-beta.0 of the CLI installed globally. Then I git clone master and do an npm link of course like the documentation says then I npm link @angular/cli within my Angular project. Run npm start and most of the time you are good to go!
jwuliger
on 5 Jun 2017
You are right. It no longer crashes with lazy loading modules after I installed the master branch of angular/cli (398356503ab4729cf40587804c44b55eb5c99768).
alexfung888
on 5 Jun 2017
@alexfung888 Great! I am glad its working for you. I know its a work-around but at least we know its not permanent.
jwuliger
on 5 Jun 2017
What is weird is that after trying the master branch, I check out 120beta0, it didn't crash, and then 110release, it didn't crash either!
So I did the obvious. I unlink it and re-installing 110 via npm. It still doesn't crash...
so mysterious
alexfung888
on 5 Jun 2017
Was experiencing this issue on travis where the yarn version is 0.17.x. I updated the travis config to install and use 0.24.6. Builds are working fine now.
vangorra
on 11 Jun 2017
Closing as this seems to be caused by trying to install a different version of webpack than the one that @angular/cli depends on. This is not supported. Please ensure you only have @angular/cli in package.json, and not webpack. You can check if you have multiple versions of webpack by doing npm ls webpack.
filipesilva
on 17 Jul 2017
same issue here
npm ls -g --depth=0
/usr/lib
├── [email protected]
└── [email protected]
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)
source repository: https://github.com/rudzikdawid/material2-start
rudzikdawid
on 22 Jul 2017
I'm getting same error only on Teamcity build. Works fine locally.
When I remove lazy loaded routes then it works on Teamcity also.
dzolnjan
on 23 Jul 2017
@rudzikdawid I checked your example and it definitely has two versions of webpack installed:
$ npm ls webpack
[email protected] D:\sandbox\material2-start
+-- @angular/[email protected]
| `-- [email protected]
`-- [email protected]
`-- [email protected]
Refer back to my earlier comment (https://github.com/angular/angular-cli/issues/6417#issuecomment-315708400) about how this is not supported.
@dzolnjan if it works in one environment and not another, it's usually because your dependency set is differente. Maybe cache, maybe yarn.lock, maybe package-lock.json.
filipesilva
on 24 Jul 2017
Seems like this issue came back again
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ â–³ \ | '_ \ / _| | | | |/ _ | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ __| |_|__, |__,_|_|__,_|_| ____|_____|___|
|___/
@angular/cli: 1.4.4
node: 8.2.1
os: darwin x64
@angular/animations: 4.4.4
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/router: 4.4.4
@angular/cli: 1.4.4
@angular/compiler-cli: 4.4.4
@angular/language-service: 4.4.4
Error: No module factory available for dependency type: ContextElementDependency
shahraship
on 4 Oct 2017
I am getting this error as well
npm ls webpack
+-- @angular/[email protected]
| -- [email protected]
-- [email protected]
The error is No module factory available for dependency type: ContextElementDependency
Tried cleaning node modules and reinstalling, but the error persists when trying to use lazy loading
ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ â–³ \ | '_ \ / _| | | | |/ _ | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ __| |_|__, |__,_|_|__,_|_| ____|_____|___|
|___/
@angular/cli: 1.4.5
node: 8.4.0
os: win32 ia32
@angular/animations: 4.4.4
@angular/cdk: 2.0.0-beta.11
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/material: 2.0.0-beta.11
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/router: 4.4.4
@angular/cli: 1.4.5
@angular/compiler-cli: 4.4.4
@angular/language-service: 4.4.4
typescript: 2.5.3
smasherprog
on 6 Oct 2017
As am I. I have confirmed that we only have a single Webpack version in our NPM and it is the one coming in with the Angular CLI.
Currently unable to do module lazy loading due to this issue.
webpack: 3.5.6
@angular/cli: 1.4.3
node: 8.1.0
@angular/core: 4.4.4
typescript: 2.3.0
NateWarner
on 6 Oct 2017
I did get this working
I deleted my package lock file
delete node_modules
remove any reference to webpack from my package.json
npm install
smasherprog
on 6 Oct 2017
Doing as suggested by @smasherprog resolved my error and moved me forward with lazy load modules!
NateWarner
on 7 Oct 2017
@smasherprog Got me back on the right track. I wonder, does greenkeeper.io do this? It seems like we should be able to muddy up node_modules and then compare errors with Github questions so admins never have to deal with this again. @Realtin Maybe all major communities on Github such as Microsoft and Angular need to be using this?
briancullinan
on 16 Oct 2017
@megamindbrian if the newest webpack version update breaks the tests for angular-cli then yes, that is exactly what https://greenkeeper.io/ does. It keeps your build "green".
Greenkeeper creates a branch for a new dependency version and waits for the CI build status. If an in-range update of a dependency breaks your build (just like it happened here) it will create an issue and gives you the opportunity to create a pull request that would pin that dependency to the last working version.
This is how these issues look like: https://github.com/hoodiehq/hoodie/issues/776
Realtin
on 17 Oct 2017
I did an ng eject a while back. Doing an ng new and comparing the changes from package.json and webpack.config.js solved my issues.
larssn
on 24 Oct 2017
Sorry this is a bit off topic, but I was just curious. @Realtin Is there a
green-breaker? that proactively looks for dependency issues then files a
known bug report for SEO for people looking for the same problem?
On Tue, Oct 24, 2017 at 2:34 AM, Lars Støttrup Nielsen <
[email protected]> wrote:
I did an ng eject a while back. Doing an ng new and comparing the changes
from package.json and webpack.config.js solved my issues.—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/6417#issuecomment-338932241,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AX5Xbpf-RQCcsfcndZXii-h6yOo6iUYvks5sva8ngaJpZM4NjN3M
.
--
CONFIDENTIALITY NOTICE: The contents of this email message and any
attachments are intended solely for the addressee(s) and may contain
confidential and/or privileged information and may be legally protected
from disclosure. It is then shared with tech companies, bots, hackers,
government agencies, and marketers. The security of this message is none,
and it may be shared on Instagram at anytime. If you are OK with this,
please respond. There isn't really any security or privacy anywhere. If
you disagree you may want to go camping and talk to people face-to-face
like in old times.
briancullinan
on 27 Oct 2017
@filipesilva: Thank bro. This worked for me.
lamnv5490
on 30 Oct 2017
We're also struggling with this, and removing webpack from devDependencies doesn't seem to help. There's also no mismatch between the version under @angular/cli and the version referenced in package.json (which was inserted by ng eject):
+-- @angular/[email protected]
| `-- [email protected] deduped
`-- [email protected]
Any ideas?
Quppa
on 28 Nov 2017
Check out my post above... it will help
smasherprog
on 28 Nov 2017
@smasherprog As it turns out the webpack command is fine, so I can build the app - it's webpack-dev-server that's causing issues. The version under @angular/cli is 2.9.5, as is the version referenced in devDependencies.
~Update: Downgrading webpack-dev-server to ~2.7.1 - the version it was set to prior to my adventures in updating to Angular 5 - appears to have resolved the issue. I'm not thrilled with this solution, but at least I've got a working dev environment again.~
Update again: False alarm - I decided I'd try webpack-dev-server 2.8.x to see if 2.9.x was causing the issue, but now I've broken my environment again. Downgrading to 2.7.1 doesn't even help :(
Quppa
on 28 Nov 2017
@Quppa any update since ?
stefdelec
on 4 Dec 2017
@stefdelec It's actually working right now, but I'm afraid that if I cleared node_modules and reinstalled everything it might break again. To be clear, webpack has been working reliably this whole time - for me it's been webpack-dev-server that has the problem. I'll continue my experiments later.
Quppa
on 4 Dec 2017
I fixing following this steps:
- npm uninstall --save-dev webpack
- rm -rf node_modules
- npm cache clean
- Adding on devDependencies "@angular-devkit/core": "0.0.22", "@angular-devkit/schematics": "0.0.40"
* npm install
All work perfect now, my great problem was update @angular/
--
I using Node v8.9.3 with Webpack v3.10.0 and latest version of @angular/cli
kiramishima
on 13 Dec 2017
you can try
https://github.com/angular/angular-cli/issues/4246#issuecomment-369477979
RubensTen
on 1 Mar 2018
This is happening due to mismatch in webpack version. Do as mentioned by @smasherprog
Those steps solved my problem.
ruchit07
on 10 Mar 2018
So as I have come to understand , some combinations of angular-cli and webpack work and some don't.
For me:
@angular/cli: ^1.7.4
webpack: ^3.11.0
worked.
maytanthegeek
on 1 May 2018
I too have this issue and its show stopping
npm ls webpack
+-- @angular/[email protected]
| `-- [email protected]
`-- [email protected]
If I remove webpack from my package.json I get Error: Cannot find module 'webpack' in my own script that needs webpack
william-lohan
on 2 May 2018
Faced this issue too with universal starter. After many tries I just end up removing webpack as dependency, see https://github.com/angular/universal-starter/issues/581
peterpeterparker
on 6 May 2018
@peterpeterparker, after fighting with this for hours, I tried your solution and it worked.
I think the only difference with the others was rm package-lock.json
Thanks!!! :)
jmchaves
on 13 May 2018
This keeps being a problem so I took another stab at preventing this class of error altogether. https://github.com/angular/angular-cli/pull/11152 will hopefully make it a non-issue.
filipesilva
on 7 Jun 2018
RESUELTO
Lo resolvà actualizando npm npm install -g npm@latest
j1myx
on 15 Jun 2018
My solution is
npm un --save-dev @ngtools/webpack
then add
"@ngtools/webpack" : "^6.0.8",¬
to package.json
I think it's conflict on version on dev-package
MoneyRotten
on 2 Jul 2018
The problem seems to be a mix of wrong webpack dependency and/or duplicated webpack (implicit dep).
I've done as @dockletinc suggested, and it worked for me.
PS: Also done a npm install -g npm@latest before.
duayres
on 10 Jul 2018
I just ran into this while upgrading angular-cli to latest version:
Angular CLI: 6.1.1
Node: 9.1.0
OS: darwin x64
Angular: 6.1.0
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.7.1
@angular-devkit/build-angular 0.7.1
@angular-devkit/build-optimizer 0.7.1
@angular-devkit/build-webpack 0.7.1
@angular-devkit/core 0.6.8
@angular-devkit/schematics 0.6.8
@angular/cdk 6.4.1
@angular/cli 6.1.1
@angular/flex-layout 6.0.0-beta.16
@angular/material 6.4.1
@angular/pwa 0.6.8
@ngtools/webpack 6.1.1
@schematics/angular 0.6.8
@schematics/update 0.7.1
rxjs 6.2.2
typescript 2.9.2
webpack 4.16.2
I read the post about multiple versions of webpack but removing webpack from package.json gives
"Cannot find module 'webpack'" . Running npm ls webpack lists no webpack versions, not even under @angular-devkit. If I then install webpack , npm ls webpack lists two versions:
on doing ng build I get the following .. it's catch 22
npm WARN @angular-devkit/[email protected] requires a peer of webpack@^4.6.0 but none is installed. You must install peer dependencies yourself.
finally I manually installed [email protected] as specified by @angular-devkit/build-angular~0.7.1 , and then ng serve can run, but the first problem persists
javahaxxor
on 26 Jul 2018
Just upgraded to latest Angular 6.1 and angular-cli 6.1.1 and I get this error
No module factory available for dependency type: ContextElementDependency
sgentile
on 27 Jul 2018
This one is closed, maybe you could open a new issue?
javahaxxor
on 27 Jul 2018
I'm getting this error using @angular/cli 6.0.8 and webpack 4.16.5 with ionic 4.
What do I need to do to use both of them together?
victorjatoba
on 7 Aug 2018
Eventually I figured it out, but it's been 11 days ago, @victorjatoba here is my current package.json
I'm sure there are packages here you don't use, but this is the combination that I'm working with and it builds fine
"dependencies": {
"@angular/animations": "^6.1.0",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"angular2-csv": "0.2.5",
"auth0-js": "^9.7.3",
"bootstrap": "^4.1.3",
"classlist.js": "^1.1.20150312",
"core-js": "^2.5.4",
"font-awesome": "^4.7.0",
"formdata-polyfill": "^3.0.11",
"jquery": "^1.9.1",
"lodash-es": "^4.17.10",
"moment": "^2.22.2",
"ngx-bootstrap": "^3.0.1",
"ngx-cookie-service": "^1.0.10",
"popper.js": "^1.14.3",
"primeicons": "^1.0.0-beta.10",
"primeng": "^6.1.0",
"rxjs": "^6.0.0",
"rxjs-compat": "^6.2.2",
"web-animations-js": "^2.3.1",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.7.0",
"@angular/cli": "^6.1.1",
"@angular/compiler-cli": "^6.1.0",
"@angular/language-service": "^6.1.0",
"@auth0/angular-jwt": "^2.0.0",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/lodash-es": "^4.17.1",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"less": "^3.0.4",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~2.7.2"
}
When I run ng version I get this:
Node: 8.10.0
OS: win32 x64
Angular: 6.1.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.7.1
@angular-devkit/build-angular 0.7.1
@angular-devkit/build-optimizer 0.7.1
@angular-devkit/build-webpack 0.7.1
@angular-devkit/core 0.7.1
@angular-devkit/schematics 0.7.1
@angular/cli 6.1.1
@ngtools/webpack 6.1.1
@schematics/angular 0.7.1
@schematics/update 0.7.1
rxjs 6.2.2
typescript 2.7.2
webpack 4.9.2
If removing webpack from your package.json doesn't work for you:
In my case I just needed to update the following dependencies : "@angular-devkit/core", "@angular-devkit/build-angular", and "@angular-devkit/schematics" to the following version : "0.8.1".
This way "@angular-devkit/build-angular" had the same version than the webpack specified in my package.json (4.18.0).
This means that if your run npm ls webpack and have multiple results, you don't have to remove webpack from your project, you just need both versions to be the same.
glemiere
on 12 Sep 2018
For Ionic users this link will help https://noellh.com/blog/ionic-4-cannot-find-webpack/
Also `npm ls @ngtools/webpack'lets you find all versions of webpack installed
NDMCreative
on 19 Feb 2019
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._
![angular-automatic-lock-bot[bot] picture](https://avatars0.githubusercontent.com/in/40213?v=4&s=40)
angular-automatic-lock-bot[bot]
on 9 Sep 2019
Related issues
JanStureNielsen
·
3Comments
5amfung
·
3Comments
hareeshav
·
3Comments
daBishMan
·
3Comments
sysmat
·
3Comments
Most helpful comment
fixed :
npm uninstall --save-dev webpacksudo rm -R node_modulesnpm installi think its not lazy load problem
also i got this only after implementing the universal