延迟加载不会加载模块 - Angular 8答案

【问题标题】：Lazy loading doesn't load the module - Angular 8延迟加载不会加载模块 - Angular 8
【发布时间】：2019-10-04 18:21:31
【问题描述】：

我正在尝试延迟加载包含 PrimeNG 模块 (MenubarModule) 的主页，但它从未加载，因此我不断收到错误消息：

错误：模板解析错误：
'p-menubar' 不是已知元素：

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent
  ],
  imports: [
    AppRoutingModule,
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,

    PanelModule,
    InputTextModule,
    ButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的 app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: LoginComponent
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'home',
    component: HomeComponent,
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule) 
  }
];

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

我的 home.module.ts

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

@编辑
如果我将 MenubarModule 放在我的 app.module 中，它会起作用，但我希望它在我的 home.module 中延迟加载

【问题讨论】：

p-menubar 组件在哪里定义？
他在我的 home.component.html 如果我将 MenuBarModule 放在我的 app..module 中，一切正常，但这不是延迟加载，对吧？
我认为你没有得到它。你可以为你的问题创建一个 stackblitz/plunkr 吗？
看看stackblitz.com/edit/…

标签： angular routes lazy-loading angular8 angular-routing

【解决方案1】：

你需要在你的 stackblitz 中做一些事情来修复代码

index.html 应该是

<body><app-root></app-root></body>

而你有一些不同于app-root的入口标签

您还需要从应用模块和应用路由模块中删除对 HomeComponent 的所有引用，并在 Home 模块中添加 forChild 路由器定义为

RouterModule.forChild([{ path: "", component: HomeComponent }])

在堆栈闪电战中工作：https://stackblitz.com/edit/angular-fu9rx5

【讨论】：

非常感谢！你解决了！还有一件事，你能解释一下，为什么它现在起作用了吗？我做错了什么？

【解决方案2】：

如果您尝试延迟加载，您应该在home.module.ts 中声明您的子组件并在home-routing.module.ts 中定义路由，然后它会起作用。

从上面的图片admin.module.ts，它有两个组件home和settings现在让我们看看admin-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { SettingsComponent } from './settings/settings.component';


export const AdminRoutes: Routes = [{
  path: '',
  children: [
    { path: 'home', component: HomeComponent },
    { path: 'settings', component: SettingsComponent }]
}];

那些AdminRoutes被导入到admin.module.ts中，组件的声明方式如下。

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminRoutes } from './admin-routing.module';
import { HomeComponent } from './home/home.component';
import { SettingsComponent } from './settings/settings.component';
import { RouterModule } from '@angular/router';


@NgModule({
  declarations: [HomeComponent, SettingsComponent],
  imports: [
    CommonModule, RouterModule.forChild(AdminRoutes)
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class AdminModule { }

然后你将它定义为app-routing.module.ts 中的延迟加载，它将永远有效。

【讨论】：

【解决方案3】：

app.module.ts：

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

app-routing.module.ts:

const routes: Routes = [
  { path: 'home', loadChildren: () => import('./home/home.module').then(module => module.HomeModule)},
  { path: 'login', loadChildren: () => import('./login/login.module').then(login => login.LoginModule)}
];

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

app.component.html：

<a routerLink="/home">Home</a>
<br>
<a routerLink="/login">Login</a>

<router-outlet></router-outlet>

home.module.ts：

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

home-routing.module.ts

const routes: Routes = [
  { path: '', component: HomeComponent, children: [
     { path: 'some', component: SomeComponent }
  ]}
];

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

@NgModule({
  declarations: [LoginComponent],
  imports: [
    CommonModule
  ]
})
export class LoginModule { }

登录路由.module.ts

const routes: Routes = [
  { path: '', component: LoginComponent, children: [
     { path: 'another', component: AnotherComponent }
  ]}
];

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

现在它必须工作了。由于children:，您可以在LoginComponent 和HomeComponent 中使用<router-outlet></router-outlet> dom 元素。

【讨论】：

你没有尝试过 StackBlitz 吗？但在 Visual Studio Code 中？
@M4ESTRO 已更新。
@M4ESTRO 我在更新 answear 的延迟加载模块中的引导组件方面犯了一个错误。 XD