ng build --prod: Cannot find module css-loader/index.js?sourcemap&minimize

[francisoud]

Versions.

ng --version
angular-cli: 1.0.0-beta.21
node: 6.9.1
os: win32 x64

Repro steps.

npm cache clean
npm install --no-optional
ng build --prod

The log given by the failure.

Module build failed: Error: Cannot find module '/var/bamboo/xml-data/build-dir/JOB1/node_modules/css-loader/index.js?sourcemap&minimize'
        at Function.Module._resolveFilename (module.js:469:15)
        at Function.Module._load (module.js:417:25)
...

Mention any other details that might be useful.

Well actually I found the reason and the fix (it just for the record if anyone has the same issue...):
In angular-cli@1.0.0-beta.21 / package.json this following line:

"extract-text-webpack-plugin": "^2.0.0-beta.4",

Resolved to different incompatible extract-text-webpack-plugin version:

25 jan. 17

+-- angular-cli@1.0.0-beta.21
...
+-- extract-text-webpack-plugin@2.0.0-beta.5
| +-- async@2.1.4
| +-- loader-utils@0.2.16
| | +-- big.js@3.1.3
| | +-- emojis-list@2.1.0
| | `-- json5@0.5.1
| `-- webpack-sources@0.1.4
|   `-- source-map@0.5.6
...

Changed to:

30 jan. 17

| +-- extract-text-webpack-plugin@2.0.0-rc.2
| | `-- async@2.1.4

Solution

Do a npm shrinkwrap but if it's too late, add the following line to your package.json:

"devDependencies": {
    "extract-text-webpack-plugin": "2.0.0-beta.5"
},

Another problem

After fixing this you may get a lodash error:

Error in bail mode: [default] /var/bamboo/xml-data/build-dir/JOB1/node_modules/@types/lodash/index.d.ts:245:24 
Cannot find name 'Partial'.

change the dependency to

"@types/lodash": "4.14.50",

make sure you don't take the v4.14.51

ps: Don't forget to delete you node_modules and run npm cache clean before npm install

[techtreet]

The fix suggested above didn't work for me on 1.0.0-beta.21, I continue to see the following

cannot find module css-loader

[castamir]

@ngtools/webpack@1.2.4 broke it, adding "@ngtools/webpack": "1.2.3", to package.json for temporal workaround fixed if me... for now...

[cnvillegaschavez]

steps
npm install -g angular-cli@1.0.0-beta.21
npm cache clean
npm install

"devDependencies": {
"extract-text-webpack-plugin": "2.0.0-beta.5",
"webpack": "2.2.0-rc.3",
"@types/lodash": "4.14.50",
"@ngtools/webpack": "1.2.3"
},

[byungjuJin]

extract-text-webpack-plugin is upgraded to 2.0.0-rc.2.
just add "extract-text-webpack-plugin": "2.0.0-beta.5" works for me.
Thanks!

[castamir]

after "double" npm install I've got nprm error UNMET DEPENDENCIES.

I fixed all dependencies by specifying these dependencies explicitly:

{
        "@ngtools/webpack": "1.1.5",
        "extract-text-webpack-plugin": "2.0.0-beta.5",
        "webpack": "2.1.0-beta.25",
        "loader-runner": "2.2.0",
        "tsickle": "0.2.4",
        "source-map-support": "0.4.10"
}

most important are extract-text-webpack-plugin and webpack itself

Note: I've digged these dependencies from cli-beta.21

[techtreet]

The "ng build --prod" works for me now with the list posted by castamir above, thanks for everyone in this thread.

{
"@ngtools/webpack": "1.1.5",
"extract-text-webpack-plugin": "2.0.0-beta.5",
"webpack": "2.1.0-beta.25",
"loader-runner": "2.2.0",
"tsickle": "0.2.4",
"source-map-support": "0.4.10",
"angular-cli": "1.0.0-beta.21"
}

NOTE: I didn't have to even install angular-cli on my npm, but I am just declaring it in the package.json as shown above. I uninstalled my angular cli using "npm uninstall -g angular-cli" and "npm cache clean". Now I am able to build prod using package.json script task itself that runs the angular-cli based build with in the local confines of package.json and not at global level installed angular-cli.

"scripts": {
         "build:prod": "ng build --prod"
}

[hydra1983]

All the solutions above doesn't work for me.
I added

{
    "extract-text-webpack-plugin": "2.0.0-beta.5",
}

But 2.0.0-rc.3 still be installed.

peerDependencies WARNING [extract-text-webpack-plugin@2.0.0-rc.3] in /var/jenkins_home/workspace/xxx-dev/xxx-web2-pipeline/node_modules/.2.0.0-rc.3@extract-text-webpack-plugin requires a peer of webpack@^2.2.0 but webpack@2.1.0-beta.25 was installed

ls -la node_modules/|grep extract
drwxr-xr-x    4 root root     4096 Feb  6 06:43 .1.0.1@postcss-modules-extract-imports
drwxr-xr-x    3 root root     4096 Feb  6 06:43 .2.0.0-beta.5@extract-text-webpack-plugin
drwxr-xr-x    5 root root     4096 Feb  6 06:43 .2.0.0-rc.3@extract-text-webpack-plugin
lrwxrwxrwx    1 root root       41 Feb  6 06:43 extract-text-webpack-plugin -> .2.0.0-beta.5@extract-text-webpack-plugin
lrwxrwxrwx    1 root root       38 Feb  6 06:43 postcss-modules-extract-imports -> .1.0.1@postcss-modules-extract-imports

After I run

rm -rf node_modules/.2.0.0-rc.3@extract-text-webpack-plugin

And re-build production again, it works.

node version: 6.2.0
npm version: 3.8.9

[castamir]

make a fresh new npm install and then hit npm ls extract-text-webpack-plugin to see which package depends on it

[techtreet]

Can anyone from angular-cli DEV community please comment if there are any plans for this to be fixed on the newer version so that we don't have to use this hack with older version? I see the same issue happening even with "@angular/cli": "1.0.0-beta.29". Is this already fixed with #4435 ? I also see something relevant at http://stackoverflow.com/questions/42076879/fallbackloader-option-has-been-deprecated-replace-with-fallback

[bertolo1988]

+1

[mbrezovsky]

+1

[GeorgeZhai]

+1

[mikekeda]

+1

[techtreet]

With @angular/cli: 1.0.0-rc.1, I see this is now fixed. Just create a new project out of RC1 version and try to use the generated package.json and it should work. Pasted my package.json below and this works now. I dont see the issue anymore. I was referring #4435 and understood that they have taken care of this in beta 31 fix itself.

"dependencies": {
"@angular/common": "^2.4.0",
"@angular/compiler": "^2.4.0",
"@angular/core": "^2.4.0",
"@angular/forms": "^2.4.0",
"@angular/http": "^2.4.0",
"@angular/platform-browser": "^2.4.0",
"@angular/platform-browser-dynamic": "^2.4.0",
"@angular/router": "^3.4.0",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"zone.js": "^0.7.6"
},
"devDependencies": {
"@angular/cli": "1.0.0-rc.1",
"@angular/compiler-cli": "^2.4.0",
"@types/jasmine": "2.5.38",
"@types/node": "~6.0.60",
"codelyzer": "~2.0.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-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^0.2.0",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.4.2",
"typescript": "~2.0.0"
}

[mikekeda]

@itsforbabu Thanks
I updated angular/cli to 1.0.0-rc.1, and now it works