Angular 2延迟加载重定向到空白页面

Question

我更改了我的 Angular 2 脚本并创建了一个包含注册和登录页面组件的新功能模块:

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { SignupComponent } from './signup/signup.component';
import { SigninComponent } from './signin/signin.component';
import { NotfoundComponent } from '../notfound/notfound.component';
import { ChildRoutingModule } from './auth.route';
@NgModule({
    declarations:[
        SignupComponent,
        SigninComponent,
        NotfoundComponent
    ],

    imports:[
        FormsModule,
        HttpModule,

        ChildRoutingModule
    ]
})

export class AuthModule{}

当然，我创建了一个名为 ChildRoutingModule 的子路由文件:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { SigninComponent } from './signin/signin.component';
import { SignupComponent } from './signup/signup.component';

const childRoutes: Routes = [
    {path: 'signup', loadChildren: './auth.module#AuthModule'},
    {path: 'signin', component: SigninComponent}

];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(childRoutes)
  ],
  exports:[RouterModule]
})
export class ChildRoutingModule { }

在这个路由文件中，我创建了一个延迟加载到主页的方法:

{path: 'signup', loadChildren: './auth.module#AuthModule'},

正如您在 AuthModule 导出类中看到的那样。

这是父根模块:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SigninComponent } from './auth/signin/signin.component';
import { SignupComponent } from './auth/signup/signup.component';
import { NotfoundComponent } from './notfound/notfound.component';
import { ChildRoutingModule } from './auth/auth.route';
import { HomeComponent } from './home/home.component';

const appRoutes: Routes = [
    //{path: '', redirectTo:'signup', pathMatch:'full'},
    {path: '', component: HomeComponent},

    {path: '**', component: NotfoundComponent}
];

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

这是父模块 app.module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

import {RouterModule} from '@angular/router';

import { AppComponent } from './app.component';
import { AuthModule } from './auth/auth.module';

import {AuthService} from './auth/auth.service';

import { AppRoutingModule } from './routes';
import { ChildRoutingModule } from './auth/auth.route';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    ChildRoutingModule,
    BrowserModule,
    AuthModule,
    RouterModule,
    AppRoutingModule,
    CommonModule

  ],
  providers: [AuthService],
  bootstrap: [AppComponent]
})
export class AppModule { }

我现在的问题是，当我点击 home 组件中的注册按钮时:

<h1>Home Page</h1>
<button [routerLink]="['/signup']" type="button" class="btn btn-primary">Register</button>
<hr>
<button type="button" class="btn btn-primary">Login</button>

由于 home.component.ts 中没有脚本，我将重定向到具有正确链接的空白组件:

localhost:4200/signup

而且控制台没有错误。

P.S.: 如果我输入 localhost:4200/singin 它会正常显示登录组件

Answer 1

在我看来你有循环依赖。

AuthModule 导入 ChildRoutingModule，其中包含延迟加载到 AuthModule 的 signup 路由。这就是为什么 signin 有效，但 signup 无效，因为 signup 是循环依赖。

编辑

为了解决这个问题，我会稍微更改一下您的路由。首先，我不会创建单独的 NgModules 来保存路由配置。将路由配置添加到适当的模块。我还没有测试过这个确切的代码，但它应该看起来像这样:

//app.routes.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { NotfoundComponent } from './notfound/notfound.component';

export const ROUTES: Routes = [
    {path: '', component: HomeComponent},
    {path: 'signin', loadChildren: './auth/auth.module#AuthModule'},
    {path: '**', component: NotfoundComponent}
];

在您的 AppModule 中使用它:

// app.module.ts

import { ROUTES as appRoutes } from './app.routes';

...

imports: [
    ...
    RouterModule.forRoot(appRoutes)
],

然后对 AuthModule 的路由配置做类似的事情:

//auth.routes.ts

import { Routes } from '@angular/router';
import { SigninComponent } from './signin/signin.component';
import { SignupComponent } from './signup/signup.component';

export const ROUTES: Routes = [
    {path: '', component: SigninComponent},
    {path: 'signup', loadChildren: './auth.module#AuthModule'}
];

并将其导入您的AuthModule:

//auth.module.ts

import { ROUTES as authRoutes } from './auth.routes';

imports: [
    ...
    RouterModule.forChild(authRoutes)
]

这样，您的整个 AuthModule 就会被延迟加载，并且您的 url 与您拥有的一样。