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

应用-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

重新启动ng serve为我工作

Answer 2

我遇到过同样的问题。我通过做两件事来解决它：

在根模块的路由配置中，使用loadChildren和延迟加载的角度模块的相对路径。该字符串用＃分隔，其中split的右侧是延迟加载的模块的类名。

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

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

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

yarn add angular-router-loader -D

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

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

它为我工作。

Answer 3

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

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

我找不到Angular（loader）的最低版本支持这种语法。

可能与AOT一起使用的方法是用常规方法替换lambda语法：

export function getTestModule() { return TestModule; }

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

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

Answer 4

对于使用最近的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 5

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

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

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

Answer 6

通过使用它为我工作。

../app/

我使用VS代码中的建议弹出窗口解决了这个问题。您可以   也是如此。无需去任何地方。（我想，路径可能会有所不同   每个项目。）

Answer 7

在我刚刚接手的项目中，我已经进行了几个小时的故障排除。以上解决方案均无效，但后来我意识到所有延迟加载的模块均具有.ts扩展名。

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

Answer 8

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

您可以看看official documentation

Answer 9

确保包含从'@ angular / router'导入{Routes，RouterModule}; 在模块中加载lazely

Answer 10

我有一个类似的问题。我刚刚重新启动服务器，它正常工作。：）

Answer 11

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

Answer 12

在一个用例场景中，通过一个延迟加载的模块将一个不同的特性（例如test.module.ts）从它的根应用程序（即app.module.ts）中分离出来，我们可以创建测试模块及其组件在子文件夹中（例如src / app / test /）。 test-routing.module可以这样配置：

vector

“父”模块（app-routing.module.ts）的路由如下：

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

这允许强制加载的根应用程序和入口组件随后在需要时将test.module.ts作为子项延迟加载。

Answer 13

我改变了这个

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

您需要更改

export default class TestModule { }

到

export class TestModule { }

那应该解决你的问题

Answer 15

在我的情况下，该路径与我在其他地方声明的路径共享同一路径，并假定它们是相对路径。例如下面的

不起作用

管理模块

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

Angular2延迟加载模块错误＆＃39;找不到模块＆＃39;

15 个答案: