Ran Update with New Version of CLI, Now Getting a "webpack: Failed to compile" Error

[darrenbrett]

• Running this on a MacBook Air, with OS X El Capitan V. 10.11.6

• Running @angular/cli: 1.0.0-beta.30

First I did this:

npm uninstall -g angular-cli @angular/cli
npm cache clean
npm install -g @angular/cli@latest

• This was going from beta.24 to beta.30.

Then, for my project, I followed these directions:

rm -rf node_modules dist
npm install --save-dev @angular/cli@latest
npm install
ng update

Note: when prompted Y or N to update various files, I selected "Y" for most, only selecting "N" for files that would potentially override my custom setup - for instance for package.json. app.component.ts, index.html, etc.

Then, after fixing some absolute path issues in a few of the components, I got my app to install, compile, and boot up.

But then, after restarting my computer, when I run "ng serve" again, I get a "webpack: Failed to compile" error with absolutely no other information. Nothing in the terminal view of Visual Studio Code, and nothing in the console on my browser.

This is what I see in my terminal after running "ng s":

> bash-3.2$ ng s
> fallbackLoader option has been deprecated - replace with "fallback"
> loader option has been deprecated - replace with "use"
> fallbackLoader option has been deprecated - replace with "fallback"
> loader option has been deprecated - replace with "use"
> fallbackLoader option has been deprecated - replace with "fallback"
> loader option has been deprecated - replace with "use"
> fallbackLoader option has been deprecated - replace with "fallback"
> loader option has been deprecated - replace with "use"
> ** NG Live Development Server is running on http://localhost:4200. **
> Hash: 4a9eeeb8e7122c071da3
> Time: 25802ms
> chunk    {0} main.bundle.js, main.bundle.map (main) 755 kB {3} [initial] [rendered]
> chunk    {1} polyfills.bundle.js, polyfills.bundle.map (polyfills) 201 kB {4} [initial] [rendered]
> chunk    {2} styles.bundle.js, styles.bundle.map (styles) 27 kB {4} [initial] [rendered]
> chunk    {3} vendor.bundle.js, vendor.bundle.map (vendor) 5.22 MB [initial] [rendered]
> chunk    {4} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]
> 
> ERROR in Cannot read property 'listLazyRoutes' of undefined
> webpack: Failed to compile.

One note, I was getting the "ERROR in Cannot read property 'listLazyRoutes' of undefined" error before upgrading my CLI version, but it wasn't stopping the app from booting up, and I assume that issue is unrelated to not getting the app to boot up now.

[grizzm0]

Did you uninstall the old angular-cli package first?

npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli

[darrenbrett]

Yes, I uninstalled the old version of the cli globally, cleared cache, and then installed the new version globally, following these instructions:

npm uninstall -g angular-cli @angular/cli
npm cache clean
npm install -g @angular/cli@latest

And then I updated the app.

I'm wondering if the issue is with one of the files I chose not to update when prompted? Do we know which ones are particularly important re: the update?

[darrenbrett]

I resolved this by running this again:

rm -rf node_modules dist
npm install --save-dev @angular/cli@latest
npm install
ng update

And then, when prompted, this time I let the process override more of my files. After that was done webpack compiled successfully and the app booted up.

[bjornharvold]

Angular CLI Beta 30. Created a project from scratch and still getting the same error.

[asmaus]

Replace "fallbackLoader" by "fallback", and replace "loader" by "use" in styles.js file (node_modules/angular-cli/models/webpack-configs/styles.js)
attention: angular-cli folder, not @angular-cli folder.

[Wim-van-der-Veen]

in addition to @asmaus : probably in any styles.js file within node_modules that you use in your package, but at least in the one in node_modules/angular-cli/models/webpack-configs (the 'loader' option case is just above the fallbackLoader option, in case you are searching and searching ..)

[angular-automatic-lock-bot]

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.}