例外：未捕获（承诺）：错误：找不到模块'app/home/home.module'答案

【问题标题】：EXCEPTION: Uncaught (in promise): Error: Cannot find module 'app/home/home.module'例外：未捕获（承诺）：错误：找不到模块'app/home/home.module'
【发布时间】：2017-05-14 18:58:07
【问题描述】：

我正在尝试使用路由器延迟加载 Angular 2 模块，但出现此错误：

error_handler.js:50 例外：未捕获（承诺中）：错误：找不到模块 '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{}

home.routes

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

export default RouterModule.forChild(routes);

Package.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 中使用的版本，因为它在那里工作。

【问题讨论】：

从声明中移除 HomeModule 并将其替换为 HomeComponent
谢谢！我错过了这个，但在 kill ng serve 之后仍然是同样的问题！！！
不确定此导出 DEFAULT 类的含义。尝试删除默认值。
已删除 home.module 上的默认值！没有！同样的问题！

标签： angular lazy-loading angular2-routing angular-cli webpack-dev-server

【解决方案1】：

对于 Angular 8 和 9，延迟加载声明已更改。由于 Angular 8 引入了新的推荐模块加载方法，以前延迟加载模块的默认方法是指定模块的字符串路径：

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

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

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

【讨论】：

我有一个类似的问题。我想动态导入一个模块，但在路由器上下文之外。所以它只是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 有问题。我怎样才能做到这一点？
作为附加信息：我安装了 zone.js 补丁 import 'zone.js/dist/zone-patch-rxjs'; 并在 this.ngZone.runOutsideAngular(() => {...}) 内运行了所有上述代码以将其移出 ngZone，但错误消息仍然保持不变.
我遇到了类似的问题，但为了使用上面的语法，我还必须将 tsconfig.json 中的模块设置更改为 es2020。（是 es2015）。
节省了我数小时的研究时间。谢谢。

【解决方案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) }
];

【讨论】：

【解决方案3】：

我以非常相似的症状和背景回答了这个问题，所以说this answer to another question 帮助了我似乎很有用。

在我的具体情况下，我有点关注the lazy feature modules docs，我什至忠实地尝试复制the associated StackBlitz example 代码。由于某种原因，该示例逃脱了：

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 时对我来说都很有意义并且对我有用。

【讨论】：

【解决方案4】：

当您使用 export default class SomeModule { } ...以及其他一些细微差别时，似乎 angular-cli 渲染器存在延迟加载问题。

这就是我在解决 Heroku 部署时遇到的相同“错误：找不到模块...”的方法：

从应用根目录获取所有 loadChildren 路径并为您的模块名称添加一个哈希
- loadChildren: 'app/main/some-module/some-module.module#SomeModule'
将export default class SomeModule { } 更改为export class SomeModule { }

【讨论】：

是的，您使用 # 注释指定特定模块是正确的，但是是否有它的文档我无法找到它
我也遇到了同样的问题，把相对路径改成绝对解决了

【解决方案5】：

这样使用

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

【讨论】：

【解决方案6】：

我设法让它工作，这是我所做的：

1 - 在模块中制作路由代码（不是文件）

2 - 在组件的父目录下制作模块文件

3 - 像这样删除导出中的“默认”

export DEFAULT class HomeModule { }

变成了

export class HomeModule { }

您可以在此处看到它适用于 beta 24： https://github.com/mauricedb/lazy-routes

不知道怎么回事！！！

【讨论】：

【解决方案7】：

对我来说，我必须使用 Module Map 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 {}

【讨论】：

【解决方案8】：

还要注意文件“app-routing.module.ts”中的以下内容，即

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

在上面的粗体字母应该是大写

【讨论】：

【解决方案9】：

在 Angular 6 上听起来很傻。

我在开发我的应用程序时使用了这个命令ng build --aot --watch。不知何故进入该区域，我保存了很多文件（从其他一些项目复制粘贴）。构建确实有效，但未显示错误，但浏览器显示此错误。

我关闭了构建，并再次重建它，所有未显示的错误（与上述无关）都出现了！！。

【讨论】：

我在 Angular 8 中看到了类似的脆弱性。我能够通过从 app-routing.module.ts 中删除条目并保存它，然后再次添加条目并再次保存路由模块来消除错误。

【解决方案10】：

Angular CLI：6.1.5 节点：8.11.3 操作系统：win32 x64 角度：6.1.6

【讨论】：

【解决方案11】：

我只需要重新启动服务器，我猜这与捆绑有关。

npm start

或

ng serve

查看另一个 StackOverflow link 描述相同的内容。

【讨论】：

【解决方案12】：

我遇到了问题，虽然它就像这里的答案 https://stackoverflow.com/a/51199693/5621221 并通过在 home.module 文件中添加 providers: [] 解决了它。

【讨论】：