Angular 5 路由路径无法识别

Question

我正在考虑这个简单的用例，但我想不通。

我有以下路由：

const routes: Routes = [
    {path: '', redirectTo: 'app', pathMatch: 'full'},
    {path: 'login', component: LoginComponent},
    {path: 'app', component: DssComponent},
    {path: '**', redirectTo: 'app'},
];

在我的应用模块中：

import {routes} from '@app/app-routing';
    @NgModule({
        declarations: [
            AppComponent
        ],
        imports: [
         CoreModule,
         SharedModule,
         DssModule,             
         RouterModule,
         RouterModule.forRoot(routes, {enableTracing: true})
        ],
        bootstrap: [
            AppComponent
        ]
    })
    export class AppModule {}

我的 CoreModule 看起来像：

@NgModule({
    imports: [
        CommonModule,
        HttpClientModule,
    ],
    declarations: [],
    providers: [
        AuthenticationService,
        CanActivateAuthGuard
    ]
})
export class CoreModule {}

我的 SharedModule 看起来像：

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        BrowserModule,
        HttpClientModule
    ],
    declarations: [LoginComponent],
    exports: [
        CommonModule,
        FormsModule,
        BrowserModule,
        HttpClientModule,
        LoginComponent
    ],

})
export class SharedModule {}

我的 DssModule 看起来像：

@NgModule({
    imports: [
        CoreModule,
        SharedModule
    ],
    declarations: [
        DssComponent
    ],
    exports: [
        DssComponent
    ]
})
export class DssModule {}

ng serve 之后，我似乎无法匹配“/login”。

当我输入/login 时，网址转到http://localhost:4200/login/app。

我不明白，查看跟踪信息，它似乎只匹配斜线 (/)：

Router Event: NavigationStart
platform-browser.js:367 NavigationStart(id: 1, url: '/')
platform-browser.js:367 NavigationStart {id: 1, url: "/"}
core.js:3675 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
platform-browser.js:380 Router Event: RoutesRecognized
platform-browser.js:367 RoutesRecognized(id: 1, url: '/', urlAfterRedirects: '/app', state: Route(url:'', path:'') { Route(url:'app', path:'app') } )
platform-browser.js:367 RoutesRecognized {id: 1, url: "/", urlAfterRedirects: "/app", state: RouterStateSnapshot}
platform-browser.js:380 Router Event: GuardsCheckStart
platform-browser.js:367 GuardsCheckStart(id: 1, url: '/', urlAfterRedirects: '/app', state: Route(url:'', path:'') { Route(url:'app', path:'app') } )
platform-browser.js:367 GuardsCheckStart {id: 1, url: "/", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
platform-browser.js:380 Router Event: ChildActivationStart
platform-browser.js:367 ChildActivationStart(path: '')
platform-browser.js:367 ChildActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ActivationStart
platform-browser.js:367 ActivationStart(path: 'app')
platform-browser.js:367 ActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: GuardsCheckEnd
platform-browser.js:367 GuardsCheckEnd(id: 1, url: '/', urlAfterRedirects: '/app', state: Route(url:'', path:'') { Route(url:'app', path:'app') } , shouldActivate: true)
platform-browser.js:367 GuardsCheckEnd {id: 1, url: "/", urlAfterRedirects: UrlTree, state: RouterStateSnapshot, shouldActivate: true}
platform-browser.js:380 Router Event: ResolveStart
platform-browser.js:367 ResolveStart(id: 1, url: '/', urlAfterRedirects: '/app', state: Route(url:'', path:'') { Route(url:'app', path:'app') } )
platform-browser.js:367 ResolveStart {id: 1, url: "/", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
platform-browser.js:380 Router Event: ResolveEnd
platform-browser.js:367 ResolveEnd(id: 1, url: '/', urlAfterRedirects: '/app', state: Route(url:'', path:'') { Route(url:'app', path:'app') } )
platform-browser.js:367 ResolveEnd {id: 1, url: "/", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
dss.component.ts:19 dsscomponent!
platform-browser.js:380 Router Event: ActivationEnd
platform-browser.js:367 ActivationEnd(path: 'app')
platform-browser.js:367 ActivationEnd {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ChildActivationEnd
platform-browser.js:367 ChildActivationEnd(path: '')
platform-browser.js:367 ChildActivationEnd {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: NavigationEnd
platform-browser.js:367 NavigationEnd(id: 1, url: '/', urlAfterRedirects: '/app')
platform-browser.js:367 NavigationEnd {id: 1, url: "/", urlAfterRedirects: "/app"}

不管我输入什么，我都会被重定向到“xxx/app”

解决方案： 我不知道为什么，但这个问题的解决方案是删除我的“node_modules”文件夹并再次执行“npm install”。那行得通。令人毛骨悚然的东西。

Answer 1

您发布的代码看起来不错，但您的环境中还有其他原因导致此问题。

真正的问题可能归结为，您是否将<router-outlet> 放在主组件中，您是否在该模块中声明或导入了所有使用的组件

将 app.module.ts 与 app-routing.module.ts 拆分以保持更整洁的模块文件是很常见的。

请参阅下面的示例，了解您使用所提供信息的第一篇文章。

Reproduced on stackblitz as is

Answer 2

您需要在导入中包含RouterModule, 和RouterModule.forRoot(routes, {enableTracing: true})。 forRoot() 用于启用子导航