1. 技术文章
  2. Angular2 lazy loading module error 'cannot find module'

Angular2 lazy loading module error 'cannot find module'

由 ≡放荡痞女 提交于 2019-12-05 08:26:38

问题


I was trying to find any solution for this error but nothing works for me. I have simple Angular2 App created with Angular-CLI. When I serve this app in browser I'm getting this error: EXCEPTION: Uncaught (in promise): Error: Cannot find module '/app/test.module'. I was trying using different path in loadChildren: 

'/app/test.module'
'./app/test.module'
'./test.module'
'/src/app/test.module'

Folders

src/
  app/
    app-routing.module.ts
    app.component.ts
    app.module.ts
    test.component.ts
    test.module.ts

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { RoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


const routes: Routes = [
  { path: '', loadChildren: '/app/test.module' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class RoutingModule { }

test.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { TestComponent } from './test.component';

export const routes: Routes = [
  { path: '', component: TestComponent }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  exports: [TestComponent],
  declarations: [TestComponent]
})
export default class TestModule { }

stack trace

    error_handler.js:45EXCEPTION: Uncaught (in promise): Error: Cannot find module '/app/test.module'.ErrorHandler.handleError @ error_handler.js:45next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113_loop_1 @ zone.js:379drainMicroTaskQueue @ zone.js:386
2016-10-08 14:22:50.612 error_handler.js:50ORIGINAL STACKTRACE:ErrorHandler.handleError @ error_handler.js:50next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113_loop_1 @ zone.js:379drainMicroTaskQueue @ zone.js:386
2016-10-08 14:22:50.613 error_handler.js:51Error: Uncaught (in promise): Error: Cannot find module '/app/test.module'.
    at resolvePromise (zone.js:429)
    at zone.js:406
    at ZoneDelegate.invoke (zone.js:203)
    at Object.onInvoke (ng_zone_impl.js:43)
    at ZoneDelegate.invoke (zone.js:202)
    at Zone.run (zone.js:96)
    at zone.js:462
    at ZoneDelegate.invokeTask (zone.js:236)
    at Object.onInvokeTask (ng_zone_impl.js:34)
    at ZoneDelegate.invokeTask (zone.js:235)ErrorHandler.handleError @ error_handler.js:51next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113_loop_1 @ zone.js:379drainMicroTaskQueue @ zone.js:386
2016-10-08 14:22:50.614 zone.js:355Unhandled Promise rejection: Cannot find module '/app/test.module'. ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot find module '/app/test.module'.(…) Error: Cannot find module '/app/test.module'.
    at webpackEmptyContext (http://localhost:4200/main.bundle.js:49550:8)
    at SystemJsNgModuleLoader.loadAndCompile (http://localhost:4200/main.bundle.js:57952:40)
    at SystemJsNgModuleLoader.load (http://localhost:4200/main.bundle.js:57945:60)
    at RouterConfigLoader.loadModuleFactory (http://localhost:4200/main.bundle.js:22354:128)
    at RouterConfigLoader.load (http://localhost:4200/main.bundle.js:22346:81)
    at MergeMapSubscriber.project (http://localhost:4200/main.bundle.js:61105:111)
    at MergeMapSubscriber._tryNext (http://localhost:4200/main.bundle.js:32515:27)
    at MergeMapSubscriber._next (http://localhost:4200/main.bundle.js:32505:18)
    at MergeMapSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:7085:18)
    at ScalarObservable._subscribe (http://localhost:4200/main.bundle.js:48555:24)consoleError @ zone.js:355_loop_1 @ zone.js:382drainMicroTaskQueue @ zone.js:386
2016-10-08 14:22:50.620 zone.js:357Error: Uncaught (in promise): Error: Cannot find module '/app/test.module'.(…)consoleError @ zone.js:357_loop_1 @ zone.js:382drainMicroTaskQueue @ zone.js:386

回答1:


restarting ng serve worked for me




回答2:


I have faced this same issue. I solved it by doing following 2 things:

In root module's route configuration, use loadChildren with a relative path to the lazy loaded angular module. The string is delimited with a # where the right side of split is the lazy loaded module's class name.

I have added ./ as prefix to the loadChildren string.

{ path:'user', loadChildren:'./app/user/user.module#UserModule'}

I am using webpack 2 and it needs a loader for Angular 2 that enables string-based module loading with the Angular Router. Add this to the project

yarn add angular-router-loader -D

then add the angular-router-loader to typescript loaders

loaders: [
  {
    test: /\.ts$/,
    loaders: [
    'awesome-typescript-loader',
    'angular-router-loader'
    ]
  }
]

and its working for me.




回答3:


I met a similar issue when working with Angular 4.4.5 and webpack and managed to fix it without using strings, but module type reference (much easier to write and less error prone):

const routes: Routes = [
  { path: '', loadChildren: () => TestModule }
];

I could not find the minimum version for Angular (loader) the supports this syntax.

A way that might work with AOT is to replace lambda syntax with a regular one:

export function getTestModule() { return TestModule; }

const routes: Routes = [
  { path: '', loadChildren: getTestModule }
];

Also check this issue (thanks to rey_coder).




回答4:


Finally I found out that I need to import lazy loaded module in routing config this way:

const routes: Routes = [
   { path: '', loadChildren: 'app/test.module' }
];

without any / or ./in front of module path.




回答5:


It was worked for me by using.

../app/

I solved this issue by using the suggestion popup in VS code. You can also follow that. No need to go anywhere. (I Think, the path may vary in every project.)




回答6:


I've been troubleshooting this for a a couple of hours on a project I've just taken over from. None of the above solutions were working, but then I realised that all the lazy-loaded modules had the .ts extension.

If anyone else is having issues, check if you need to change loadChildren: 'app/example.module.ts' to loadChildren: 'app/example.module'.




回答7:


make sure to include import { Routes, RouterModule } from '@angular/router'; in the module to load lazely




回答8:


I had a similar issue. I just restarted the server and it worked. :)




回答9:


I have solved my own issue. Don't put the .ts in the path name. Rather than using 'path/to/my/module.ts#MyModuleClass', use 'path/to/my/module#MyModuleClass'




回答10:


In my case the path shared the same route as one I declared elsewhere, assuming they would be relative paths. e.g like below in the

Not Working

Admin Module

    {
    path: 'organisation',
    canActivate: [AuthGuard],
      loadChildren: './organisation/organisation.module#AdminOrganisationModule',
    },

User Module

    {
    path: 'organisation',
    canActivate: [AuthGuard],
      loadChildren: './organisation/organisation.module#UserOrganisationModule',
    },

individually, when only one was declared, these were working fine, but not together as it complained about the ./organisation/organisation.module path , I changed both to the pattern below and it was ok.

Working

Admin Module

    {
    path: 'organisation',
    canActivate: [AuthGuard],
      loadChildren: '../admin/organisation/organisation.module#AdminOrganisationModule',
    },

User Module

        {
    path: 'organisation',
    canActivate: [AuthGuard],
      loadChildren: '../user/organisation/organisation.module#UserOrganisationModule',
    },



回答11:


In a use-case scenario to segregate a distinct feature (e.g. test.module.ts) from its root application (i.e. app.module.ts) through a lazily-loaded module, we could create the test module and it's components in a sub-folder (e.g. src/app/test/). The test-routing.module could be configured this way:

//test-routing.module.ts
//routes to test.component.ts as an example

import { Routes, RouterModule } from '@angular/router';
import { TestComponent } from './test.component';

const feature_test_routes: Routes = [

    { 
        path: '',
        component: TestComponent
    }

];

export const TestRoutingModule = RouterModule.forChild(feature_test_routes);

The "parent" module (app-routing.module.ts), would have a route that looks like this:

//app-routing.module.ts
//routes to http://localhost:4200/test

import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
const root_routes: Routes = [

    { 
        path: '',
        component: AppComponent, 
        children: [
            {
                path: 'test',
                loadChildren: './test/test.module#TestModule'
            }
        ]
    }

];

export const AppRoutingModule = RouterModule.forChild(root_routes);

This allows the root application and entry component, imperatively loaded, to subsequently lazy-load features from test.module.ts as a child when needed.




回答12:


I change this

{
            path: 'test',
            loadChildren: 'app/tests/test.module#TestModule'

}

for this

   {
        path: 'test', loadChildren: () => new Promise(resolve => {
            (require as any).ensure([], require => {
                resolve(require('app/tests/test.module').TestModule);
            })
        })
    },

And solved my problem.




回答13:


You need to change

export default class TestModule { }

to

export class TestModule { }

That should fix your problems



来源：https://stackoverflow.com/questions/39932969/angular2-lazy-loading-module-error-cannot-find-module

标签
angular
module
lazy-loading
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!