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

Question

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

关于我的文件夹结构，我为每个功能创建了单独的app模块和路由模块，如下所示。主页和登录页面具有不同的布局。 我的auth路由由 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 { }

应用-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 { }

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

像这样：

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 { }