Angular2延迟加载模块错误'cannot find module'

Question

我试图为这个错误找到任何解决方案，但没有任何效果。我有使用 Angular-CLI 创建的简单 Angular2 应用程序。当我在浏览器中提供此应用程序时，出现此错误：EXCEPTION: Uncaught (in promise): Error: Cannot find module '/app/test.module'. 我尝试在 loadChildren 中使用不同的路径：

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

文件夹

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

堆栈跟踪

        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

Answer 1

最后我发现我需要通过这种方式在路由配置中导入延迟加载模块：

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

模块路径前面没有任何 / 或 ./。

Answer 2

重新启动 ng serve 对我有用

Answer 3

在用例场景中通过延迟加载模块将不同的功能（例如 test.module.ts）与其根应用程序（即 app.module.ts）隔离开来，我们可以创建测试模块并它是子文件夹中的组件（例如 src/app/test/）。 test-routing.module 可以这样配置：

//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);

"parent" 模块 (app-routing.module.ts) 的路由如下所示：

//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);

这允许命令式加载的根应用程序和入口组件随后在需要时从 test.module.ts 作为子项延迟加载功能。

Answer 4

确保包括从 '@angular/router' 导入 { Routes, RouterModule }; 在延迟加载的模块中

Answer 5

我也遇到过同样的问题。我通过做以下两件事解决了它：

在根模块的路由配置中，使用 loadChildren 和延迟加载 angular 模块的相对路径。该字符串以 # 分隔，其中 split 的右侧是延迟加载模块的 class 名称。

我添加了 ./ 作为 loadChildren 字符串的前缀。

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

我正在使用 webpack 2，它需要一个用于 Angular 2 的加载器，它可以使用 Angular 路由器启用基于字符串的模块加载。将其添加到项目中

yarn add angular-router-loader -D

然后将 angular-router-loader 添加到打字稿加载器

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

它对我有用。

Answer 6

我改这个

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

}

为此

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

并解决了我的问题。

Answer 7

对于较新的 Angular 版本（10+？），延迟加载是使用以下语法完成的：

{ path: "foos", loadChildren: () => import ("./foos/foo.module").then(m => m.FooModule) },

我在使用 Angular 4.4.5 和 webpack 时遇到了类似的问题，并设法在不使用字符串的情况下修复它，但是模块类型引用（更容易编写并且更不容易出错）：

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

我找不到支持此语法的 Angular（加载程序）的最低版本。

一种可能适用于 AOT 的方法是将 lambda 语法替换为常规语法：

export function getTestModule() { return TestModule; }

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

同时检查 this issue（感谢 rey_coder）。

Answer 8

你需要改变

export default class TestModule { }

至

export class TestModule { }

这应该可以解决您的问题

Answer 9

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

Answer 10

在我刚刚接手的项目中，我花了几个小时解决这个问题。 None 以上解决方案都有效，但后来我意识到所有延迟加载的模块都有 .ts 扩展名。

如果其他人遇到问题，请检查是否需要将 loadChildren: 'app/example.module.ts' 更改为 loadChildren: 'app/example.module'。

Answer 11

我遇到了类似的问题。我刚刚重新启动了服务器并且它工作了。 :)

Answer 12

我已经解决了我自己的问题。不要将 .ts 放在路径名中。不要使用 'path/to/my/module.ts#MyModuleClass'，而是使用 'path/to/my/module#MyModuleClass'

Answer 13

在我的例子中，路径与我在其他地方声明的路径共享相同的路径，假设它们是相对路径。例如下面

不工作

管理模块

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

用户模块

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

单独地，当只声明一个时，它们工作正常，但不能一起工作，因为它抱怨 ./organisation/organisation.module 路径，我将两者都更改为下面的模式并且没问题。

工作

管理模块

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

用户模块

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

Answer 14

对于使用 最新 Angular 版本（在我的例子中是 v9）的人，您可以使用以下语法声明设置您的路线：

import { TestModule } from './modules/test.module';
const appRoutes: Routes = [
  { path: 'blogs', loadChildren: () => import('./modules/test.module').then(m => m.TestModule) },
];

// NgModule
// declarations
// imports
// providers
// bootstrap

export class AppModule { }

另一种方式（不在顶部导入）：

    const appRoutes: Routes = [
      { path: 'blogs', loadChildren: () => import('./modules/test.module').then(m => m.TestModule) },
    ];

Answer 15

在 Angular 9 中，我这样做了并且对我有用： loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)

你可以去official documentation

看看

Answer 16

在我的项目中，我通过更改相对路径从 src

开始解决了这个问题

所以而不是

loadChildren: () => import('./user/user.module') .then(m => m.UserModule)

我改为：

loadChildren: () => import('./src/app/user/user.module') .then(m => m.UserModule)

文件夹结构为：

Angular2延迟加载模块错误'cannot find module'

Angular2 lazy loading module error 'cannot find module'

module

lazy-loading

angular