Angular 4 - 懒加载路由不起作用

问题描述：

我试图让懒加载路由工作，但我不能。如果你能帮助我，我真的很感激。Angular 4 - 懒加载路由不起作用

我有3个模块PublicModule，AdminModule和的AppModule

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

... /公共=>它应该显示公共组件

内的信息

这是routing.module.ts英里代码：

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，但它不显示“public works！”，所以我认为appRoutes出了问题。

答

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

因此，内public.module.ts声明应该是：

declarations: [PublicComponent]

Angular 4 - 懒加载路由不起作用

相关推荐