Angular2延迟加载模块错误'找不到模块'

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

56
投票

重启ng serve为我工作

Answer 2

在一个用例场景中，通过一个延迟加载的模块将一个不同的特性（例如test.module.ts）从它的根应用程序（即app.module.ts）中分离出来，我们可以创建一个测试模块和它的子组件。 -folder（例如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);

“父”模块（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 3

我改变了

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

你需要改变

export default class TestModule { }

至

export class TestModule { }

这应该可以解决你的问题

Answer 5

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

不工作

管理模块

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

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

在根模块的路由配置中，使用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 7

我在使用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 8

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

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

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

Answer 9

它通过使用对我有用。

../app/

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

Answer 10

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

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

Answer 11

确保在'@ angular / router'中包含import {Routes，RouterModule};在模块中懒散地加载

Answer 12

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

Answer 13

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

Angular2延迟加载模块错误'找不到模块'

问题描述投票：40回答：13

13个回答

最新问题

Angular2延迟加载模块错误'找不到模块'

问题描述 投票：40回答：13

13个回答

最新问题

问题描述投票：40回答：13