Angular 2路由器错误：始终重定向到家

Question

我创建了 Angular 5 应用程序，它正在调试，没有任何编译错误。 它以前工作过。当时我只为整个项目使用了一个 route.ts 文件和一个 app.module.ts 文件。然后我意识到当项目变大时它会更复杂。然后我只是改变了我的文件夹结构。现在每个当我转到其他网址时，它会重定向到主页。

关于我的文件夹结构，我为每个功能创建了单独的应用程序模块和路由模块，如下所示。主页和登录页面有不同的布局。 我的身份验证路由由 auth-routing.module.ts 处理，并导入到 auth.module.ts。 我有 app-routing.module.ts 来处理主要路线，它为 app.moduele.ts

导入

我的文件夹结构

auth-routing.modules.ts

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

import { NoAuthGuard } from '../auth/no-auth-guard.service';
import { HomeAuthResolver } from '../layout/home-auth-resolver.service';

import { AuthComponent } from '../auth/components/index';

const routes: Routes = [  
    { path: 'login', component: AuthComponent},
    { path: 'register', component: AuthComponent }       
];

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forRoot(routes)
    ],
    exports: [RouterModule]
})
export class AuthRoutingModule { }

auth.module.ts

import { ModuleWithProviders, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

import { AuthRoutingModule } from './auth-routing.module';
import { AuthComponent} from './components/index';

@NgModule({
  declarations: [     
    AuthComponent          
  ],
  imports: [
    BrowserModule,    
    AuthRoutingModule   
  ],
  providers: [ ]     
})
export class AuthModule { }

app-routing.module.ts

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

import { NoAuthGuard } from './auth/no-auth-guard.service';
import { HomeAuthResolver } from './layout/home-auth-resolver.service';

import {LayoutComponent,  PUBLIC_ROUTES } from './layout/index';

const routes: Routes = [ 
    { path: '', component: LayoutComponent, data: { title: 'Secure Views' }, children: PUBLIC_ROUTES },
    { path: '**', component: LayoutComponent, data: { title: 'Secure Views' }, children: PUBLIC_ROUTES }
];

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

app.module.ts

import { ModuleWithProviders, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

//modules
import { AppRoutingModule } from './app-routing.module';
import { AuthModule } from './auth/auth.module';

// Layouts
import { AppComponent } from './app.component';
import { LayoutComponent, HomeAuthResolver } from './layout/index';

//child components
import { HomeComponent } from './home/home.component';

//shared components
import { ApiService, AuthGuard, FooterComponent, HeaderComponent } from './shared';


@NgModule({
  declarations: [
    AppComponent,
    FooterComponent,
    HeaderComponent,
    LayoutComponent,
    HomeComponent,

  ],
  imports: [
    BrowserModule,
    AppRoutingModule,   
    AuthModule
  ],
  providers: [
    ApiService,
    AuthGuard,
    HomeAuthResolver,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

您不会将AuthRoutingModule 导出到auth.module.ts。

把auth.module.ts改成这个：

import { ModuleWithProviders, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

import { AuthRoutingModule } from './auth-routing.module';
import { AuthComponent} from './components/index';

@NgModule({
  declarations: [     
    AuthComponent          
  ],
  imports: [
    BrowserModule,    
    AuthRoutingModule   
  ],
  exports: [AuthRoutingModule],
  providers: [ ]     
})
export class AuthModule { }

并从auth-routing.module.ts 中删除CommonModule 用法。

像这样：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { NoAuthGuard } from './auth/no-auth-guard.service';
import { HomeAuthResolver } from './layout/home-auth-resolver.service';

import {LayoutComponent,  PUBLIC_ROUTES } from './layout/index';

const routes: Routes = [ 
    { path: '', component: LayoutComponent, data: { title: 'Secure Views' }, children: PUBLIC_ROUTES },
    { path: '**', component: LayoutComponent, data: { title: 'Secure Views' }, children: PUBLIC_ROUTES }
];

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