Angular-cli: "TypeError: __webpack_require__.e is not a function" when using import()

[timstoddard]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an x)

- [ ] new
- [ ] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

Node v10.8.0
Npm v6.4.0

Angular CLI: 6.1.5
Node: 10.8.0
OS: win32 x64
Angular: 6.1.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.7.5
@angular-devkit/build-angular     0.7.5
@angular-devkit/build-optimizer   0.7.5
@angular-devkit/build-webpack     0.7.5
@angular-devkit/core              0.7.5
@angular-devkit/schematics        0.7.5
@angular/cli                      6.1.5
@ngtools/webpack                  6.1.5
@schematics/angular               0.7.5
@schematics/update                0.7.5
rxjs                              6.3.1
typescript                        2.7.2
webpack                           4.9.2

Repro steps

1. Clone this repo and install npm dependencies.
2. Run ng serve, and wait until you see a compilation error.
3. Fix the typescript compilation error in app.component.ts (see comment in that file).
4. Navigate to localhost:4200.
5. You will see the error in the browser console.

The log given by the failure

ERROR TypeError: __webpack_require__.e is not a function
    at foo (foo.js:2)
    at new AppComponent (app.component.ts:15)
    at createClass (core.js:9299)
    at createDirectiveInstance (core.js:9186)
    at createViewNodes (core.js:10406)
    at createRootView (core.js:10320)
    at callWithDebugContext (core.js:11351)
    at Object.debugCreateRootView [as createRootView] (core.js:10838)
    at ComponentFactory_.push../node_modules/@angular/core/fesm5/core.js.ComponentFactory_.create (core.js:8666)
    at ComponentFactoryBoundToModule.push../node_modules/@angular/core/fesm5/core.js.ComponentFactoryBoundToModule.create (core.js:3315)

Desired functionality

The app should run with no errors.

Mention any other details that might be useful

The missing function __webpack_require__.e should be located in the webpack-generated file runtime.js, but in this case it is not there.

[alan-agius4]

@timstoddard I downloaded your project and was unable to replicate the error you mentioned in the browser.

More over, I am not quite sure what you are trying to do lazy loading components which are not referenced in a module with the dynamic import inside a js file.

[SilvioAmaral]

I faced this issue while implementing dynamically loaded modules, and this is what I found:
1-With ng serve running , but with an Imports declaration to my module (thus not being dynamically loaded) and verifying that it was running , I removed the imports and experienced this exact error.
2-Restarted ng serve and then the real error was displayed, which was pointing out to a BrowserModule being imported twice . After checking for references of it on my related project (on node_modules) , I couldn't find any. Then I discovered that also BrowserAnimationsModule & HttpClientModule should also be loaded just once. Finally I discovered that one of my components module had a reference to BrowserAnimationsModule by mistake.
3-Removed the reference and the module is now working correctly.

[timstoddard]

@alan-agius4 did you wait until ng serve printed out a compilation error? I realized my instructions might not have made that clear (and edited them just now for clarity). Also, I am on windows 10, are you on a different OS? The reason I am importing a js file is because my company makes Angular Playground (similar to React Storybook) and it loads components using that function; it normally works fine, just whenever a compilation error occurs on startup it now throws this error.

@SilvioAmaral thank you for sharing but that did not solve it for me :/

[theNotoriousHxc]

Just had this problem. In my situation, i had imported a lazy-loaded module inside AppModule. So it was both assigned to loadChildren in route definition as well as imported on AppModule. The solution was just to remove the import of the lazy-loaded module on AppModule

[devprakashbinary]

just force close your VS code and run command npm start

[mgechev]

Let's close the issue for now, since there seem to be a solution pointed out by @theNotoriousHxc. Please open a new ticket if this is still relevant.

[lonerzzz]

This really should not be closed without some sort of better error output. I cannot find a match to the situation described and the error produced is unintelligible related to the problem.

[mgechev]

@lonerzzz can you provide an a minimal demo where we can reproduce your issue?

[loganmzz]

@mgechev I think you ping the wrong guy !

[mgechev]

@loganmzz I'm sorry. Struggling with the suggestions in the dropdown 🤷🏼‍♂️

[dgp1130]

Closing as we don't seem to have a repro here. Please re-open if you are still able to reproduce on latest Angular and can provide a minimal reproduction.

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