Monday, February 26, 2018

Angular CLI Upgrade 'Cannot find module' Error

Every couple months I try to upgrade to the latest version of the Angular CLI and every time I run into this error.

Cannot find module 'webpack/lib/dependencies/ContextElementDependency'
Error: Cannot find module 'webpack/lib/dependencies/ContextElementDependency'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\Users\\node_modules\@ngtools\webpack\src\plugin.js:8:34)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)

Every time I realize I miss a step so I want to document the steps I ended using so I don't have to search for the solution again.  All the steps below are recommended by the Angular CLI Upgrade page, except the highlighted step below that removes the package-lock.json file.

Global install upgrade
NPM will keep a globally installed version of the Angular CLI that will be used across the system. It is updated using these steps, which will uninstall the current version and then install the new version.

npm uninstall -g @angular/cli
npm cache verify
# if npm version is < 5 then use `npm cache clean`
npm install -g @angular/cli@latest

Local install upgrade
The Angular project itself will have its own version of the CLI installed in the node_modules folder of the project.  It is updated using these instructions, which will remove the node_modules directory, update the version of the dependency in package.json and then reinstalls all the dependencies.  

rm -rf node_modules dist 
rm package-lock.json # deletes the package.json lock file
npm install --save-dev @angular/cli@latest
npm install

3 comments:

  1. Thanks for this fix, it really helped me, I was stacked for a whole weekend on this issue!

    ReplyDelete
  2. BetMGM Casino - Mapyro
    › app 구미 출장마사지 › casino-pokies › app › casino-pokies 사천 출장마사지 Get Directions · Casino 서울특별 출장샵 · Mobile app · Casino Review. Casino. Welcome Offer. $600 Deposit Match bonus · Welcome Bonus. $600 세종특별자치 출장샵 Casino 양주 출장마사지

    ReplyDelete