Angular-cli: 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: https://github.com/webpack/webpack/issues/8656

[BrsJsk]

Tried it.
Didn't work.
Ran

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.

[sod]

Update:
-

acorn fixed the issue in 6.2.0 via https://github.com/acornjs/acorn/pull/834
webpack updated to acorn to 6.2 in webpack 4.35.3

So as soon as you are on webpack >= 4.35.3, this error will go away.

Old post:
-

The issue is, npm builds a directory structure for webpack 3.30+ like this:

├─┬ node_modules/
│ └─── acorn/
│ └─── acorn-dynamic-import/
│ └──┬ webpack/
│    └─┬ node_modules
│      └─── acorn/

so webpack has it's own acorn. But uses acorn-dynamic-import with uses the global acorn. This breaks instance of checks.

The fix in npm is, to do

npm install [email protected]

You can verify if it worked by doing npm ls acorn and see, if it says deduped behind webpacks acorn.

[rolandzwaga]

@sod thanks man, your fix solved my build problem. Greatly appreciated, thank you for taking the time to share!

[DanWahlin]

I tried everything mentioned here but only installing with yarn fixed the problem for me. Hoping that using npm will be an option soon since I don't normally use yarn.

Update: I just tried it again but with npm install [email protected] first as @jcox68 mentions below. I didn't see a dedupe message either, but it seems to build and run now.

[jcox86]

@sod fixed my issue, although it did not dedupe my acorn package.

I had to run npm install [email protected] and then run
```
rm -rf node_modules
rm -f package-lock.json
npm install
````
for npm to get it working correctly.

In addition to the above, I had to update my tsconfig.json -> compilerOptions -> module property to esnext. More details here

I was left with the acorn reference in my package.json but everything still worked after removing it.

[lokeshdaiya]

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.

@gpsimmo try below line

this.htmlContent = require('html-loader!./content/' + 'pp-en.html');

or
this.htmlContent = require('raw-loader!./content/' + 'pp-en.html');

We need to use html-loader! prefix as per latest webpack.

[ptrzyna]

@jpduckwo's suggestion fixed my issue

[splincode]

@alan-agius4 unfortunately i can't fix the problem

[alexis-landrieu-avanade]

To complete @lokeshdaiya, after upgrading to Angular 8 all html files imports not working anymore (I guess that due to esnext module that need now a module definition for each import statement ?)

A workaround to fix this is to install webpack html-loader.

Install

yarn add html-loader --dev

Replace

const content = require(`./content1.html`);

By

const content = require(`html-loader!./content1.html`);

Normally this will fix this kind of error :

I hope that will help someone

[juliancarrivick]

Rather than having to prefix html-loader! to every html import in your project, a better way to do this is to extend the webpack configuration and register the html extension to use the html loader.

I followed this tutorial to do that. Note you'll need to do this for both the build _and_ the serve commands.

[hoang-innomizetech]

I am facing this issue when upgrading to the latest version of angular and webpack. I also tried to install [email protected] but still getting this error.

[nimatrazmjo]

Hey guys, same error. None of above solution worked form.

I upgraded from angular 6 > angular 8

[tsiegleauq]

I am running into the same issue after upgrading from angular 7.2 to 8.0.6

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

did not work for me, neither did npm install [email protected] nor yarn

[wootwoot1234]

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

Try:

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

[gs-akhan]

@wootwoot1234 That would uninstall acorn and never install it again since you are deleting node_modules after that .

I am stuck with this too.. I wonder how it worked well in Angular 6, but not on 7,8...
:(

[wootwoot1234]

@wootwoot1234 That would uninstall acorn and never install it again since you are deleting node_modules after that .

I am stuck with this too.. I wonder how it worked well in Angular 6, but not on 7,8...
:(

By default npm install acorn will add it to your package.json. Then npm install will reinstall it. It worked for me.

[gs-akhan]

It did work. :( but gives a guilty feeling. I hope this issue is natively fixed.

[tsiegleauq]

my issue was that I probably updated too far.
I created a new angular project using Angluar-CLI version 8.0.6, copied the package.json, migrated all other angular files by hand and got it working.

[TekTimmy]

Just ran into this problem after upgrading from Angular 7 to 8.1...
This fixed the problem for me:

rm -rf node_modules
rm package-lock.json
npm install --save-exact [email protected]
npm install

[sod]

acorn & webpack got updated. If you use webpack >= 4.35.3, this issue is fixed.

[phrough]

Per @sod's comment, currently angular-devkit/build-angular requires webpack 4.35.2.

[tasnim-reza]

Just ran into this problem after upgrading from Angular 7 to 8.1...
This fixed the problem for me:

rm -rf node_modules
rm package-lock.json
npm install --save-exact [email protected]
npm install

It worked for me, here is my version details:

Angular CLI: 8.1.2
Node: 10.16.0
OS: win32 x64
Angular: 8.1.2
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.2
@angular-devkit/build-angular     0.801.2
@angular-devkit/build-optimizer   0.801.2
@angular-devkit/build-webpack     0.801.2
@angular-devkit/core              8.1.2
@angular-devkit/schematics        8.1.2
@angular/cdk                      8.1.1
@angular/flex-layout              8.0.0-beta.26
@angular/material                 8.1.1
@ngtools/webpack                  8.1.2
@schematics/angular               8.1.2
@schematics/update                0.801.2
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.35.2

[maroy1986]

Just to let people know, I got it working with NPM doing the following :

npm i angular-devkit/[email protected]
rm package-lock.json
rm -rf node_modules
npm i

Doing that makes everything works afterward. If you look at the installed packages, you can see that acorn is now at the proper version :

Hope this help someone :)

[angular-automatic-lock-bot[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._}