Angular 4 - 延迟加载路线不起作用

Question

我试图让延迟加载路由工作，但我做不到。如果你能帮助我，我真的很感激。

我有 3 个模块 PublicModule、AdminModule 和 AppModule

这是我所期望的（现在使用公共模块）：

.../public => 它应该显示公共组件内的信息

这是 routing.module.ts 中的 mi 代码：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes} from '@angular/router';
import {IndexComponent} from './public/index/index.component';

const appRoutes: Routes = [
{
path: 'test',
component: IndexComponent,
data: { title: 'Index' }
},
{path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule'},
{path: 'public', loadChildren: 'app/public/public.module#PublicModule'}
];

@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(appRoutes)
],
exports: [ RouterModule ],
declarations: []
})
export class RoutingModule { }

这是我在 app.module.ts 中的代码

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatToolbarModule, MatMenuModule, MatIconModule} from '@angular/material';
import {HttpModule} from '@angular/http';
import { IndexComponent } from './public/index/index.component';
import {RoutingModule} from './routing.module';


@NgModule({
declarations: [
  AppComponent,
  IndexComponent
],
imports: [
  BrowserModule,
  BrowserAnimationsModule,
  MatToolbarModule,
  MatMenuModule,
  MatIconModule,
  HttpModule,
  RoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

最后，我在 public.module.ts 中的代码

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PublicComponent } from './public.component';
import {RouterModule, Routes} from '@angular/router';

const appRoutes: Routes = [
{
path: '',
component: PublicComponent
}
]

@NgModule({
imports: [
CommonModule,
RouterModule.forChild(appRoutes)
],
declarations: []
})
export class PublicModule { }

如果我去：

http://127.0.0.1:4200/test => 有效，显示 index.component 的信息

http://127.0.0.1:4200/public => 重定向到http://127.0.0.1:4200

我做错了什么？它应该显示“公共作品！”正如我所料。

附加信息：如果我在公共模块中评论这一行 RouterModule.forChild(appRoutes)，它会转到 http://127.0.0.1:4200/public 但它没有显示“公共工程！”，所以我认为 appRoutes 出了点问题。

Answer 1

我发现了问题，模块中使用的所有组件都应该在声明设置中。

所以，public.module.ts 中的声明应该是：

declarations: [PublicComponent]