Javascript 角度7-另一个通配符路由不工作

我在调试路由时遇到此错误：

 { path: 'login'                           , component : LoginComponent },
  { path : ''                               , component : DashboardComponent        , outlet: "main-route", pathMatch: 'full'},

  { path: '404'                             , component : PageNotFoundComponent     , outlet: "main-route"},
  { path: '403'                             , component : PermissionDeniedComponent , outlet: "main-route"},
  { path: '**'                              , redirectTo : '404' ,  pathMatch: 'full'}

这是我的路线

当我尝试时：

我期待着去404页。 然而，我得到了这个：

Router Event: NavigationStart
platform-browser.js:211 NavigationStart(id: 1, url: '/not-exist')
platform-browser.js:211 NavigationStart {id: 1, url: "/not-exist", navigationTrigger: "imperative", restoredState: null}
platform-browser.js:216 Router Event: NavigationError
platform-browser.js:211 NavigationError(id: 1, url: '/not-exist', error: Error: Cannot match any routes. URL Segment: 'not-exist')
platform-browser.js:211 NavigationError {id: 1, url: "/not-exist", error: Error: Cannot match any routes. URL Segment: 'not-exist'
    at ApplyRedirects.push../node_modules/…}
core.js:15724 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'not-exist'
Error: Cannot match any routes. URL Segment: 'not-exist'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2469)
    at CatchSubscriber.selector (router.js:2450)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)

我哪里错了

更新2019/10/07

角度误差有误导性。Angular需要一条“未命名”路线。然后，您可以添加一个命名的出口。 然后我试着打开这个出口

现在。Im包括一个子组件，其自身的路由将添加到主路由

//app.routing

 {
    path: 'external-module',
    loadChildren: () => import('./external-module/external-module.module').then(mod => mod.ExternalModuleModule)
  },
[...]

//external module routing

    const routes: Routes = [
      {
        path        : '',
        component   : ExternalModuleHomeComponent,
        outlet: 'sub'
      },
      {
        path        : 'second',
        component   : ExternalModuleSecondComponent,
      },
    ];



//layout.html
  <div style="padding: 20px 10px 10px 20px; border: 1px solid black;">
      <router-outlet></router-outlet>
    </div>

    <div style="padding: 20px 10px 10px 20px; border: 1px solid red;">
      <router-outlet name="sub"></router-outlet>
    </div>

这个解决方案行不通。我加载了著名的404页面

然后我试着在父亲体内移动“第二条”路线：

{
    path        : '',
    component   : ExternalModuleHomeComponent,
    children: [            
        {
            path: 'second', component: ExternalModuleSecondComponent, outlet: 'sub'
        }   
    ]    
    , 
    outlet: 'sub'
}

另一个404，甚至删除插座：“子”在孩子

---

我真的很累。互联网上没有像这样包含子应用路由的例子

通配符路由必须是

{path:'**'，重定向到：'404'}

//如果要重定向或

{path:'**'，component:NotFoundComponent}

//显示该组件

---

通配符路由必须是所有路由中的最后一个路由 应用程序有多个模块

想想看，您有多个模块，

WildcardRoutingModule

有

RouterModule.forChild([
    {
        path: '**',
        component: redirectTo : '404'
    }
])

在根模块中，您应该为

WildcardRoutingModule

@NgModule({
    imports: [
        BrowserModule,
        AppRoutingModule, // included Root routes 
        SignInModule, // included Child routes 
        LayoutModule, // included Child routes
        AdminpanelModule, // included Child routes       

        WildcardRoutingModule // Since it has wildcardRouting, it should be the last Module among all other Routing module
    ],
    .....
})
export class AppModule {
}

---

从回退（

**

）路由中删除

pathMatch:full

。

{
    path        : '',
    component   : ExternalModuleHomeComponent,
    children: [            
        {
            path: 'second', component: ExternalModuleSecondComponent, outlet: 'sub'
        }   
    ]    
    , 
    outlet: 'sub'
}

RouterModule.forChild([
    {
        path: '**',
        component: redirectTo : '404'
    }
])

@NgModule({
    imports: [
        BrowserModule,
        AppRoutingModule, // included Root routes 
        SignInModule, // included Child routes 
        LayoutModule, // included Child routes
        AdminpanelModule, // included Child routes       

        WildcardRoutingModule // Since it has wildcardRouting, it should be the last Module among all other Routing module
    ],
    .....
})
export class AppModule {
}