無法識別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 ，URL轉到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分開以保留更整潔的模塊文件是非常普遍的。

請參閱下面的示例，以了解第一篇使用您提供的信息的帖子。

照原樣在stackblitz上轉載

Answer 2

您需要在RouterModule,中包括RouterModule,以及RouterModule.forRoot(routes, {enableTracing: true}) 。 forRoot()用於啟用子導航