在主應用程序路由器中使用'**'進行重定向時忽略模塊子路由

Question

我嘗試使用自己的路由創​​建模塊。該路由被忽略並重定向到主應用路由中找不到的頁面組件。當我從主應用程序路由模塊路徑工作時刪除以下代碼 - {path：'**'，component：PageNotFoundPage}。但是現在我不能使用以前的代碼來處理我的404重定向。有誰知道爲什麼發生這種情況，以及如何解決它？

主要應用模塊：

// Application Dependencies 
import { NgModule, ApplicationRef } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { HttpModule } from '@angular/http'; 
import { FormsModule } from '@angular/forms'; 

// Application Pages 
/* Public Pages */ 
import { LandingPage } from './pages/public/landing.page'; 
import { EmailLoginPage } from './pages/public/email-login.page'; 
import { LinkedinLoginPage } from './pages/public/linkedin-login.page'; 
import { PageNotFoundPage } from './pages/public/page-not-found.page'; 
/* Private Parent Page */ 
import { DashboardComponent } from './pages/authenticated/dashboard.component'; 
/* Private Pages */ 
import { DevicesPage } from './pages/authenticated/devices.page'; 
import { DeviceDetailsPage } from './pages/authenticated/device-details.page'; 

import { GroupsPage } from './pages/authenticated/groups.page'; 
import { GroupDetailsPage } from './pages/authenticated/group-details.page'; 
import { GroupScorePage } from './pages/authenticated/group-score.page'; 
import { GroupDevicesPage } from './pages/authenticated/group-devices.page'; 
import { GroupMembersPage } from './pages/authenticated/group-members.page'; 
import { GroupInviteMemberPage } from './pages/authenticated/group-invite-member.page'; 

import { SitesPage } from './pages/authenticated/sites.page'; 
import { SiteDetailsPage } from './pages/authenticated/site-details.page'; 
import { SiteScorePage } from './pages/authenticated/site-score.page'; 
import { SiteDevicesPage } from './pages/authenticated/site-devices.page'; 
import { SiteTenantsPage } from './pages/authenticated/site-tenants.page'; 
import { SiteInviteTenantPage } from './pages/authenticated/site-invite-tenant.page'; 

import { CyberScorePage } from './pages/authenticated/cyber-score.page.'; 
import { ProfilePage } from './pages/authenticated/profile.page'; 

// Application Modules 
import { RoutingModule } from './app.routing'; 
import { AuthModule } from './modules/auth/auth.module'; 

/* ======== testing ======== */ 
import { TestingModule } from './modules/testing/testing.module'; 
/* ======== testing ======== */ 

// Application Components 
import { AppComponent } from './app.component'; 
import { ToolbarComponent } from './components/site/toolbar/toolbar.component'; 
import { NotificationsComponent } from './components/site/notifications/notifications.component'; 
/* Page Components */ 
import { LandingComponent } from './components/pages/landing/landing.component'; 
import { EmailLoginComponent } from './components/pages/email-login/email-login.component'; 
import { LinkedinLoginComponent } from './components/pages/linkedin-login/linkedin-auth.component'; 
import { PageNotFoundComponent } from './components/pages/page-not-found/page-not-found.component'; 

import { DevicesComponent } from './components/pages/devices/devices.component'; 
import { DeviceDetailsComponent } from './components/pages/devices/device-details.component'; 

import { GroupsComponent } from './components/pages/groups/groups.component'; 
import { GroupDetailsComponent } from './components/pages/groups/group-details.component'; 
import { GroupScoreComponent } from './components/pages/groups/group-score.component'; 
import { GroupDevicesComponent } from './components/pages/groups/group-devices.component'; 
import { GroupMembersComponent } from './components/pages/groups/group-members.component'; 
import { GroupInviteMemberComponent } from './components/pages/groups/group-invite-member.component'; 

import { SitesComponent } from './components/pages/sites/sites.component'; 
import { SiteScoreComponent } from './components/pages/sites/site-score.component'; 
import { SiteDetailsComponent } from './components/pages/sites/site-details.component'; 
import { SiteDevicesComponent } from './components/pages/sites/site-devices.component'; 
import { SiteTenantsComponent } from './components/pages/sites/site-tenants.component'; 
import { SiteInviteTenantComponent } from './components/pages/sites/site-invite-tenant.component'; 

import { CyberScoreComponent } from './components/pages/cyber-score/cyber-score.component'; 
import { ProfileComponent } from './components/pages/profile/profile.component'; 

// Application Services 
import { Env } from '../_env'; 
import { removeNgStyles, createNewHosts } from '@angularclass/hmr'; 
import { HttpHeaders } from './shared/services/httpHeaders'; 
import { Notifications } from './components/site/notifications/notifications.service'; 

import { InviteTenantHttp } from './components/pages/sites/site-invite-tenant-http.service'; 
import { GroupsHttp } from './components/pages/groups/groups-http.service'; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    HttpModule, 
    FormsModule, 
    RoutingModule, 
    // Custom Modules 
    AuthModule, 
    TestingModule 
    ], 
    declarations: [ 
    AppComponent, 
    ToolbarComponent, 
    NotificationsComponent, 
    // Public Pages 
    LandingPage, 
    LandingComponent, 
    EmailLoginPage, 
    EmailLoginComponent, 
    LinkedinLoginPage, 
    LinkedinLoginComponent, 
    PageNotFoundPage, 
    PageNotFoundComponent, 
    // Private Pages 
    DashboardComponent, 
    ProfilePage, 
    ProfileComponent, 
    DevicesPage, 
    DevicesComponent, 
    DeviceDetailsPage, 
    DeviceDetailsComponent, 
    /* Groups */ 
    GroupsPage, 
    GroupsComponent, 
    GroupDetailsPage, 
    GroupDetailsComponent, 
    GroupScorePage, 
    GroupScoreComponent, 
    GroupDevicesPage, 
    GroupDevicesComponent, 
    GroupMembersPage, 
    GroupMembersComponent, 
    GroupInviteMemberPage, 
    GroupInviteMemberComponent, 
    /* Sites */ 
    SitesPage, 
    SitesComponent, 
    SiteDetailsPage, 
    SiteDetailsComponent, 
    SiteScorePage, 
    SiteScoreComponent, 
    SiteDevicesPage, 
    SiteDevicesComponent, 
    SiteTenantsPage, 
    SiteTenantsComponent, 
    SiteInviteTenantPage, 

    SiteInviteTenantComponent, 

    CyberScorePage, 
    CyberScoreComponent 
    ], 
    providers: [ 
    Env, 
    HttpHeaders, 
    InviteTenantHttp, 
    GroupsHttp, 
    Notifications 
    ], 
    bootstrap: [ 
    AppComponent 
    ] 
}) 

export class AppModule { 

    constructor(public appRef: ApplicationRef) {} 

    hmrOnInit(store) { 
    console.log('HMR store', store); 
    } 

    hmrOnDestroy(store) { 
    let cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement); 
    // recreate elements 
    store.disposeOldHosts = createNewHosts(cmpLocation); 
    // remove styles 
    removeNgStyles(); 
    } 

    hmrAfterDestroy(store) { 
    // display new elements 
    store.disposeOldHosts(); 
    delete store.disposeOldHosts; 
    } 
} 

主要應用途徑：

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

// Application Pages; 
/* Public Pages */ 
import { LandingPage } from './pages/public/landing.page'; 
import { EmailLoginPage } from './pages/public/email-login.page'; 
import { LinkedinLoginPage } from './pages/public/linkedin-login.page'; 
import { PageNotFoundPage } from './pages/public/page-not-found.page'; 
/* Private Parent Page */ 
import { DashboardComponent } from './pages/authenticated/dashboard.component'; 
/* Private Pages */ 
import { DevicesPage } from './pages/authenticated/devices.page'; 
import { DeviceDetailsPage } from './pages/authenticated/device-details.page'; 

import { GroupsPage } from './pages/authenticated/groups.page'; 
import { GroupDetailsPage } from './pages/authenticated/group-details.page'; 
import { GroupScorePage } from './pages/authenticated/group-score.page'; 
import { GroupDevicesPage } from './pages/authenticated/group-devices.page'; 
import { GroupMembersPage } from './pages/authenticated/group-members.page'; 
import { GroupInviteMemberPage } from './pages/authenticated/group-invite-member.page'; 

import { SitesPage } from './pages/authenticated/sites.page'; 
import { SiteDetailsPage } from './pages/authenticated/site-details.page'; 
import { SiteScorePage } from './pages/authenticated/site-score.page'; 
import { SiteDevicesPage } from './pages/authenticated/site-devices.page'; 
import { SiteTenantsPage } from './pages/authenticated/site-tenants.page'; 
import { SiteInviteTenantPage } from './pages/authenticated/site-invite-tenant.page'; 

import { ProfilePage } from './pages/authenticated/profile.page'; 
import { CyberScorePage } from './pages/authenticated/cyber-score.page.'; 

// Services 
import { AuthGuard } from './modules/auth/auth-guard.service'; 

const routes: Routes = [ 
    { path: 'landing', component: LandingPage }, 
    { path: 'email-login', component: EmailLoginPage }, 
    { path: 'linkedin-login', component: LinkedinLoginPage }, 
    { 
    path: 'dashboard', 
    component: DashboardComponent, 
    canActivate: [AuthGuard], 
    children: [ 
     { path: 'devices', component: DevicesPage }, 
     { path: 'device/:id', component: DeviceDetailsPage }, 

     { path: 'groups', component: GroupsPage }, 
     { path: 'group/:id', component: GroupDetailsPage }, 
     { path: 'group-score', component: GroupScorePage }, 
     { path: 'group-devices', component: GroupDevicesPage }, 
     { path: 'group-members', component: GroupMembersPage }, 
     { path: 'group-invite-member', component: GroupInviteMemberPage }, 

     { path: 'sites', component: SitesPage }, 
     { path: 'site/:id', component: SiteDetailsPage }, 
     { path: 'site-score', component: SiteScorePage }, 
     { path: 'site-devices', component: SiteDevicesPage }, 
     { path: 'site-tenants', component: SiteTenantsPage }, 
     { path: 'site-invite-tenant', component: SiteInviteTenantPage }, 

     { path: 'profile', component: ProfilePage }, 
     { path: 'cyber-score', component: CyberScorePage }, 
     { path: '', component: DevicesPage } 
    ] 
    }, 
    { 
    path: '', 
    redirectTo: '/landing', 
    pathMatch: 'full' 
    }, 
    { path: '**', component: PageNotFoundPage } 
]; 

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

export class RoutingModule {} 

測試模塊.module.ts文件：

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 

// Components: 
import { TestingComponent } from './testing.component'; 

// Modules: 
import { TestingRoutingModule } from './testing-routing.module'; 

// Services: 

@NgModule({ 
    imports: [ 
    CommonModule, 
    TestingRoutingModule 
    ], 
    declarations: [ 
    TestingComponent 
    ], 
    providers: [ 

    ] 
}) 

export class TestingModule {} 

條

測試模塊路線：

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

import { TestingComponent } from './testing.component'; 

const testingRoutes: Routes = [ 
    { path: 'test-route', component: TestingComponent } 
]; 

@NgModule({ 
    imports: [ 
    RouterModule.forChild(testingRoutes) 
    ], 
    exports: [ 
    RouterModule 
    ] 
}) 

export class TestingRoutingModule {} 

Answer 1

當使用新的路由器時，在根路由器之前放置子模塊路由。這應該可以解決您的問題。

Answer 2

我發現這個問題是由於我的模塊導入的順序。我改變了模塊順序，如下所示，問題已修復：

// Custom Module 
AuthModule, 
TestingModule, 
// Routing 
RoutingModule