Angular 5 pass 模块作为路由器中的组件答案

【问题标题】：Angular 5 pass Module as Component in routerAngular 5 pass 模块作为路由器中的组件
【发布时间】：2018-07-04 11:51:28
【问题描述】：

我正在创建一个 Angular 5 应用程序，我想将登录模块与应用程序的其余部分分开。创建了两个独立的模块，login.module.ts 和 home.module.ts

login.module.ts 是

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login/login.component';

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

home.module.ts 是

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';

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

最后，我的 app.module.ts 是

const appRoutes: Routes = [
  { path: 'login', component: LoginModule },
  { path: 'home', component: HomeModule },
  { path: '', redirectTo: '/login', pathMatch: 'full' }
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    LoginModule,
    HomeModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

虽然在运行应用程序后，我在浏览器控制台中收到以下错误：

core.js:1440 错误错误：未捕获（承诺）：错误：未找到 LoginModule 的组件工厂。你把它添加到@NgModule.entryComponents 了吗？错误：未找到 LoginModule 的组件工厂。你把它添加到@NgModule.entryComponents 了吗？

谁能帮我解决这个问题，或者告诉我做错了什么。

【问题讨论】：

你不能对模块使用延迟加载吗？这样你就可以在登录后加载你想要的内容，通过保护你的惰性路由
没错。你能帮我实现同样的目标吗？

标签： angular typescript angular5

【解决方案1】：

试试这样的

//app.module.ts
import {CanLoad, Route, RouterModule, Routes} from '@angular/router';
//...
@Injectable()
//You should implement CanActivate as well
class CanLoadAuthenticatedRoute implements CanLoad
{
    constructor()
    {
    }

    canLoad(route: Route): boolean
    {
      //check here is user is logged in
      return false;
    }
}

const routes: Routes = [
{ path: 'login', component: LoginComponent },
     { path: 'lazy', loadChildren: './home.module#HomeModule', canLoad: [CanLoad]},
//other lazy loaded routes
];

【讨论】：

【解决方案2】：

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'home', component: HomeComponent },
  { path: '', redirectTo: '/login', pathMatch: 'full' }
];

模块用于声明组件，而组件用于向用户显示视图。您应该路由组件，而不是模块。

【讨论】：

感谢您的回复。好吧，这会起作用，但它不能满足要求，因为我必须在我的 app.module.ts 中提供所有内容（导入所有内容）。初始化应用程序时将加载所有内容。我只想在登录时加载与登录相关的内容，并在成功登录后加载其余内容。
什么。我什至不知道你在说什么。无论如何，你不能让 Angular 做你想做的事，你必须做 Angular 想做的事。而现实情况是你不能为路由提供模块？就是这样。
简单来说，我说的是“延迟加载”。我不希望在登录之前加载所有组件。谢谢你的回答。
这根本不是它的工作原理！你没看文档吗？