Question

我更改了我的角度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 { }

我现在的问题是当我点击主页组件中的注册按钮时：

<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中没有脚本，我将使用正确的链接重定向到空白组件：

本地主机：4200 /注册

控制台没有错误。

P.S。：如果我键入localhost：4200 / singin，它会显示正常的登录组件

Answer 1

在我看来，你有一个循环依赖。

AuthModule会将包含ChildRoutingModule路由的signup导入到AuthModule。这就是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都会被延迟加载，而你的网址与你拥有的网址一样。

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

1 个答案: