You may need an appropriate loader for dynamic imports after upgrade to Angular 8

[BrsJsk]

🐞 bug report

Description

I've updated my Angular 7 app to Angular 8. It used the old Angular way dynamic imports.
i've ran ng update @angular/cli @angular/core, everything was updated properly and it was using the new standard for dynamic imports, but app cannot now be opened. It breaks during the compile process. This might be webpack issue?

🔬 Minimal Reproduction

Updated to Angular 8 and this error is throwing.

🔥 Exception or Error

ERROR in ./src/app/app-routing.module.ts 8:28
Module parse failed: Unexpected token (8:28)
You may need an appropriate loader to handle this file type.
|     {
|         path: 'auth',
>         loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule)
|     },
|     {

🌍 Your Environment

Angular Version:

Angular CLI: 8.0.0
Node: 10.13.0
OS: darwin x64
Angular: 8.0.0

@angular-devkit/architect          0.800.0
@angular-devkit/build-angular      0.800.0
@angular-devkit/build-optimizer    0.800.0
@angular-devkit/build-webpack      0.800.0
@angular-devkit/core               8.0.0
@angular-devkit/schematics         8.0.0
@angular/cdk                       7.3.1
@angular/material                  7.3.1
@angular/material-moment-adapter   7.3.1
@ngtools/webpack                   8.0.0
@schematics/angular                8.0.0
@schematics/update                 0.800.0
rxjs                               6.5.2
typescript                         3.4.5
webpack                            4.30.0

[alan-agius4]

This issue rings some bells, but I cannot find the original issue in webpack.

I believe this was encountered due to an npm bug and as a workaround users had to

rm -rf node_modules
rm -f package-lock.json
npm install

Can you try to give it a shot and see if this works for you?

[alan-agius4]

Found it: webpack/webpack#8656

[BrsJsk]

Tried it.
Didn't work.
Ran

yarn

instead..and everything after that went fine.

[jpduckwo]

Removing the package-lock.json was the key for me. @alan-agius4 your example has the wrong name for package-lock.json but your answer worked for me.
Should be

rm -rf node_modules
rm -f package-lock.json
npm install

[BrsJsk]

Didn't even notice the wrong name.. 🗡

[Dunos]

I tried those 3 commands but with no luck, still get the same error. Any ideas? I don't use "yarn" on this project so I cannot try that one :/

[greglarson]

I upgraded from ang7 to ang8 both manually and with ng update. Lazy routes are updated to use import. tsconfig has module set to "esnext" but am still getting
"Module parse failed: Unexpected token (52:28)
You may need an appropriate loader to handle this file type."
loadChildren: () => import(...

Removing node_modules and package-json did not help.

Update:
Using yarn fixed the problem (both dev and aot builds).
What did yarn do that npm did not? Anyone know?

[alan-agius4]

@jpduckwo, glad that it worked out. I updated my answer to include the extension for the lock file so future users don’t get confused.

This bug is only present in npm hoisting when already having modules installed.

Npm issue: https://npm.community/t/packages-with-peerdependencies-are-incorrectly-hoisted/4794

[bjornharvold]

Upgraded from 7 - 8 today. Had the same issue as this thread. Yarn to the rescue. Thank you!

[TomaszCz]

Same issue, nothing worked. Is there a fix for this that doesn't rely on switching to yarn?

[gabucito]

I just tried to upgrade one of my projects (7 > 8) today and I had the same problem using npm.

[gpsimmo]

after upgrading from 7-> 8, i now receive the following error within the cli.
i'm using require to add the contents of a html page that im rendering within a component.
this.htmlContent = require('./content/' + 'pp-en.html');

WARNING in ./src/app/components/modals/privacy-policy/content/pp-dk.html 2:0 Module parse failed: Unexpected token (2:0) You may need an appropriate loader to handle this file type.

i've tried multiple updates to dependencies and yarn install does resolve this.