角度：6.1.6

Question

我正在尝试使用路由器延迟加载Angular 2模块，我遇到了这个错误：

error_handler.js：50 EXCEPTION：未捕获（承诺）：错误：找不到模块'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中使用的版本是什么？因为它在那里工作!!!

Answer 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) }

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) }
];

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

Answer 4

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

这就是我为解决同样问题而做的事情＃34;错误：无法找到模块......＆＃34;我正在进行Heroku部署：

从app root＆amp;中获取所有loadChildren路径。包含模块名称的哈希值
- loadChildren: 'app/main/some-module/some-module.module#SomeModule'
将export default class SomeModule { }更改为export class SomeModule { }

Answer 5

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

Answer 6

像这样使用它

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

Answer 7

我设法让它发挥作用，这就是我所做的：

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

2 - 将模块文件放在组件的父目录中

3 - 像这样删除导出中的'default'

export DEFAULT class HomeModule { }

成了

export class HomeModule { }

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

我不知道发生了什么!!!

Answer 8

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

角度：6.1.6

loadChildren：'./ customers / customers.module＃CustomersModule'对我有用，但我必须重新启动服务器。

Answer 9

听起来很傻，在Angular 6上。

在开发应用程序时，我正在使用此命令ng build --aot --watch。不知何故进入该区域，我保存了很多文件（从其他项目中复制粘贴）。生成确实可以，但是没有显示错误，但是浏览器显示了此错误。

我关闭了构建，然后重新构建，所有未显示的错误（与以上无关）都显示出来！！

Answer 10

还要注意在文件“ app-routing.module.ts”中进行跟踪，例如

const路线：路线= [ {path：'login'，loadChildren：'./ login / login.module＃ L oginModule'}， {path：'registration'，loadChildren：'./ registration / registration.module＃ R egistrationModule'} ];

上方粗体字母应为大写字母

Answer 11

我所需要做的就是重启服务器，这与我猜想的捆绑有关。

npm start

或

ng serve

看看另一个描述它的StackOverflow link。

Answer 12

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

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

12 个答案:

角度：6.1.6