Question

感谢您的阅读。我正在尝试使用Angular 7延迟加载模块，但遇到一个错误，无法看到我在哪里做错了。

这是我的结构：

/app/routes/app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from '../pages/home/home.component';
import { RegisterContainerModule } from '../modules/register-container.module';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'register',
    component: RegisterContainerModule
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {enableTracing: true})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

homeComponent路由可以正常运行，这是我尝试路由到register时遇到的问题：

/app/modules/register-container.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { RegisterComponent } from '../pages/register/register.component';

@NgModule({
  declarations: [
    RegisterComponent
  ],
  exports: [
    RegisterComponent
  ],
  imports: [
    CommonModule
  ],
  entryComponents: [
    RegisterComponent
  ],
  bootstrap: [RegisterComponent]
})
export class RegisterContainerModule { }

默认情况下，registerComponent是根据ng generate component register创建的，并放置在/app/pages/register/中，只是说“注册作品”。没有其他工作要做。

我的主要app-module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './routes/app-routing.module';
import { RegisterContainerModule } from './modules/register-container.module';

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

import { HomeComponent } from './pages/home/home.component';
import { RegisterComponent } from './pages/register/register.component';

...

@NgModule({
  declarations: [
    HomeComponent,
    RegisterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RegisterContainerModule
  ],
  providers: [],
  entryComponents: [
    RegisterComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

lazy loading documentation涵盖的方法与您采用的方法不同。它具有很好的功能覆盖范围，建议阅读。

下面显示了如何根据您的情况进行操作：

您没有对要延迟加载的模块的代码引用。如果这样做，那么该代码最终将放在错误的捆绑软件中。因此，您必须使用字符串引用。

首先，您不想在app-module.ts中注册组件因此，删除entryComponents个项目和import

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './routes/app-routing.module';

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

import { HomeComponent } from './pages/home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

将/app/routes/app-routing.module.ts更改为：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from '../pages/home/home.component';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'register',
    loadChildren: '../modules/register-container.module#RegisterContainerModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {enableTracing: true})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

然后，您需要一个路由模块routes/register-container-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RegisterComponent } from '../pages/register/register.component';

const routes: Routes = [
  {
    path: '',
    component: RegisterComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class RegisterContainerRoutingModule {}

最后，在RegisterContainerModule中，您将需要导入新的RoutingModule。您也不需要entryComponents部分。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { RegisterComponent } from '../pages/register/register.component';
import { RegisterContainerRoutingModule } from '../routes/register-continer-routing.module';

@NgModule({
  declarations: [
    RegisterComponent
  ],
  exports: [
    RegisterComponent
  ],
  imports: [
    CommonModule,
    RegisterContainerRoutingModule
  ]
})

export class RegisterContainerModule { }

Answer 2

在您的 AppRoutingModule 中，像这样修改 register 的路由

{
path: 'register',
loadChildren: '../modules/registercontainer.module#RegisterContainerModule'
}

loadChildren 将为 RegisterContainerModule 进行延迟加载。

现在，一旦您懒加载了RegisterContainerModule，就必须为该模块创建路由（子路由）。像这样

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RegisterComponent } from './pages/register/register.component';
const childRoutes: Routes = [
{
path: '',
component: RegisterComponent
}
];
@NgModule({
  imports: [RouterModule.forChild(childRoutes)],
  exports: [RouterModule]
})
export class RegisterModuleRoute{ }

请参见延迟加载模块的路由，我们正在使用 forChild 方法注册路由。

您需要在代码中进行更多更改

1。）您不需要提供引导程序组件引导程序： RegisterContainerModule

中的[RegisterComponent]

2。） RegisterComponent 只能在 RegisterContainerModule 中声明，而不能在AppModule中声明。

感谢

路由问题错误：Angular 7找不到组件工厂

2 个答案: