异常：未捕获（在Promise中）：错误：找不到模块'app/home/home.module'。

Question

我正在尝试使用路由器懒加载Angular 2模块，但出现了以下错误：

error_handler.js：50 EXCEPTION：Uncaught（in promise）：Error：Cannot find module 'app/home/home.module'

我尝试了所有似乎对其他人有效的答案，比如这个看起来是每个遇到此问题的人的解决方案，但对我不起作用 Lazy loading in Angular2 RC7 and angular-cli webpack

这是我的代码：app.module

import { MediatorService } from './home/mediator.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

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


import appRoutes from "./app.routes";


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

app.routes

：应用程序的路由配置。

import { RouterModule } from '@angular/router';

const routes = [
 {path : '', loadChildren: './home/home.module#HomeModule'},
 {path: 'devis', loadChildren: './forms/forms.module#FormsModule'}
];

export default RouterModule.forRoot(routes);

home.module

import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import homeRoutes from "./home.routes";

@NgModule({
  imports:[CommonModule, homeRoutes],
  declarations: [HomeComponent]
})
export default class HomeModule{}

主页路由

import {RouterModule} from "@angular/router";
import {HomeComponent} from "./home.component";
const routes = [
  {path: '', component: HomeComponent}
];

export default RouterModule.forChild(routes);

包json

{
  "name": "insurance",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "bootstrap": "^4.0.0-alpha.5",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
   },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "^2.0.34",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.24",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.0.2",
    "typescript": "~2.0.3"
  }
}

更新

我设法在plunker上使其工作。

https://plnkr.co/edit/uLxmxDIeCdDzxbFjYQS7?p=preview

但是在我的电脑上还是没有任何反应！！！

更新

我安装了一个新的虚拟机ubuntu 16.04，并且我遇到了同样的问题！它可能是因为模块的版本吗，我指的是package.json上的模块？我该如何找出在plunker中使用的版本，因为它在那里运行。

- Sid Ali

---

从声明中删除HomeModule并将其替换为HomeComponent。 - Igor Janković

谢谢！我错过了这个，但是在杀死ng serve之后仍然存在相同的问题!!! - Sid Ali

不确定 export DEFAULT class 是什么意思。尝试移除 default。 - Igor Janković

在 home.module 上删除了 DEFAULT！什么也没有！同样的问题！ - Sid Ali

Answer 1

对于Angular 8和9，懒加载声明已经发生了变化。由于Angular 8引入了新的建议模块加载方法，以前默认的懒加载模块方法是指定一个字符串路径到模块：

{ path: 'auth', loadChildren: 'src/app/auth/auth.module#AuthModule' }

导入模块的方法已更改为动态导入。动态导入是基于 Promise 的，可以让你访问模块，其中模块的类可以被调用。因此，你现在应该将导入方式更改为：

import('module-name').then(module => {
  // Use module here
});

  { path: 'auth', loadChildren: () => import('src/app/auth/auth.module').then(m => m.AuthModule) }

- Youssef

---

我有一个类似的问题。我想在路由器上下文之外动态导入一个模块。所以只需要使用 import('src/some.module').then(m => do_something(m)) 就可以了。然而，为了使其真正动态化，我需要在 import() 内部使用一个变量，例如 let path = 'src/some.module'; import(path).then(m => do_something(m))，但是我遇到了错误 Uncaught (in promise): Error: Cannot find module 'src/some.module' at elements lazy namespace object:5 at ZoneDelegate.push..，似乎 zone 对此存在问题。我该如何解决这个问题？ - yogibimbi

仅作为额外信息：我安装了zone.js修补程序 import 'zone.js/dist/zone-patch-rxjs'; 并在 this.ngZone.runOutsideAngular(() => {...}) 内运行了所有上述代码，将其移出了ngZone，但错误消息仍然相同。 - yogibimbi

我遇到了类似的问题，但为了使用上述语法，我还需要将tsconfig.json中的模块设置更改为es2020（它原来是es2015）。 - woodge

Answer 2

您需要更改app-routing.module.ts中的代码：

import { RouterModule } from '@angular/router';

const routes = [
 {path : '', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
 {path: 'devis', loadChildren: () => import('./forms/forms.module').then(m => m.FormsModule) }
];

- Arnur Kuatov

Answer 3

我遇到了一个非常相似的症状和背景的问题，所以这篇回答对我很有帮助。在我的具体情况下，我有点按照懒加载特性模块文档进行操作，我甚至忠实地尝试复制相关的StackBlitz示例代码。由于某种原因，那个示例可以得逞：

loadChildren: 'app/customers/customers.module#CustomersModule'

尽管我的基于Angular CLI（v6）的试验具有类似的文件夹结构，但我需要执行以下操作之一：

// Full path including `src` at the start:
loadChildren: 'src/app/customers/customers.module#CustomersModule'

或者这个：

// Relative path from the `app-routing.module.ts` file:
loadChildren: './customers/customers.module#CustomersModule'

我不知道为什么StackBlitz的示例可以使用第一个代码示例，但是其他两个代码示例在我执行ng serve时都是有意义并且可行的。

- Jeroen

Answer 4

似乎 angular-cli 渲染器在使用 export default class SomeModule { } 时存在延迟加载问题，还有一些其他细节需要注意。

以下是我解决 Heroku 部署中遇到的 "Error: Cannot find module..." 错误的方法：

• 将所有 loadChildren 路径从应用程序根目录开始并包含模块名称的哈希值
  • loadChildren: 'app/main/some-module/some-module.module#SomeModule'
• 将 export default class SomeModule { } 更改为 export class SomeModule { }

- dustintheweb

---

是的，你说得对，可以使用#注释来指定特定的模块，但是有没有相关的文档呢？我找不到。 - Black Mamba

我曾经遇到过同样的问题，将相对路径改为绝对路径解决了这个问题。 - lyolikaa

Answer 5

像这样使用它

{
  path : 'company', 
  loadChildren: () => import('./company/company.module').then(m => m.CompanyModule)
},

- amanverma

Answer 6

我成功让它工作了，这是我所做的：

1. 在模块中编写路由代码（不是文件）。 2. 将模块文件放在组件的父目录中。 3. 删除导出中的“default”，像这样：

export class HomeModule { } 可以看到它在beta 24中可以正常工作，链接如下： https://github.com/mauricedb/lazy-routes 我不知道发生了什么！！！

- Sid Ali

Answer 7

对我来说，我必须使用模块映射NgFactory Loader，你可以这样做：

npm install @nguniversal/module-map-ngfactory-loader --save

请将module-map-ngfactory-loader添加到您的服务器模块中：

import {ModuleMapLoaderModule} from '@nguniversal/module-map-ngfactory-loader';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ModuleMapLoaderModule
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

- Khaled Jamal

Answer 8

请在'app-routing.module.ts'文件中注意以下内容：

const routes: Routes = [ {path:'login',loadChildren:'./login/login.module#LoginModule'}, {path:'registration',loadChildren:'./registration/registration.module#RegistrationModule'} ];

以上加粗字母应大写。

- Ashish Devade

Answer 9

Angular CLI版本：6.1.5 Node版本：8.11.3 操作系统：win32 x64 Angular版本：6.1.6

- Vishal

Answer 10

我遇到了问题，尽管答案在这里 https://dev59.com/-VgR5IYBdhLWcg3wXcam#51199693, 但是通过在home.module文件中添加providers: []解决了它。

- roxhens