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

1 comment: