Угловая 2 Маршрутизация не находит маршруты

Question

У меня возникли проблемы с пониманием моей текущей проблемы, когда я не могу загрузить новую страницу при нажатии на кнопку routerlink.

Я пробовал много различных конструкций для ссылки, но независимо от того, что я могу изменить его на ошибки в консоли говорит

VM39436:48 EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'stream'

Я использую для шаблонов и макетов затем сделать мои страницы детей этих макетов. Один макет является безопасным, а один макет является общедоступным.

В app.routing.ts

const APP_ROUTES: Routes = [ 
     { 
     path: '', 
     redirectTo: 'stream', 
     pathMatch: 'full', 
    }, 
    { 
     path: 'profile', 
     component: SecureLayoutComponent, 
     data: { 
      title: 'Secure Views' 
     }, 
     children: [ 
      { 
       path: 'Profile', 
       loadChildren: 'profile/profile.module#ProfileModule' 
      } 
     ] 
    }, 
    { 
     path: '', 
     component: PublicLayoutComponent, 
     data: { 
      title: 'Public Views' 
     }, 
     children: [ 
      { 
       path: 'stream', 
       loadChildren: 'stream/stream.module#StreamModule', 
      } 
     ] 
    } 
]; 

Теперь у меня есть папка для профиля и папку для потока.

поэтому при переходе на поток каталога это Стрим routing.module.ts

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

import { StreamComponent } from './stream.component'; 

const routes: Routes = [ 
    { 
     path: '', 
     component: StreamComponent, 
     data: { 
      title: 'Stream' 
     } 
    } 
]; 

@NgModule({ 
    imports: [RouterModule.forChild(routes)], 
    exports: [RouterModule] 
}) 
export class StreamRoutingModule {} 

И это профилированные-routing.module.ts

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

import { ProfileComponent } from './profile.component'; 

export const routes: Routes = [ 
    { 
     path: '', 
     data: { 
      title: 'Secure Pages' 
     }, 
     children: [ 
      { 
       path: 'profile', 
       component: ProfileComponent, 
       data: { 
        title: 'Profile Page' 
       } 
      } 
     ] 
    } 
]; 

@NgModule({ 
    imports: [RouterModule.forChild(routes)], 
    exports: [RouterModule] 
}) 
export class ProfileRoutingModule {} 

Так что грузы штраф когда приложение отображает. Но когда я пытаюсь нажать,

<a class="nav-link" routerLinkActive="active" [routerLink]="['../profile/profile']">Profile</a> 

Или

<a class="nav-link" routerLinkActive="active" [routerLink]="['../profile']">Profile</a> 

или

<a class="nav-link" routerLinkActive="active" [routerLink]="['/profile']">Profile</a> 

я получаю ошибку, упомянутых выше,

Так из каталога /

/app.routing.ts 

/stream/stream.component.ts & stream-routing.module.ts

/profile/profile.component.ts & profile-routing.module.ts // Не удается получить доступ к этому от общественного макете.

Answer 1

Я добавляю этот ответ, чтобы помочь кому-то, кто есть проблемы с маршрутизацией многоуровневой, детскими маршрутами, или auth guard.

Я использую два шаблона в моих программах,

/templates/public.component.ts 
/templates/secure.component.ts 

Вот защищенные-layout.component.ts файл

import { Component, OnInit }  from '@angular/core'; 
import { Router }     from '@angular/router'; 
import { Auth }      from './../services/auth.service'; 

@Component({ 
    providers: [ Auth ], 
    selector: 'app-dashboard', 
    templateUrl: './secure-layout.component.html' 
}) 
export class SecureLayoutComponent implements OnInit { 

    constructor(private router: Router, private auth: Auth) { } 

    ngOnInit(): void { } 
} 

Вот общественно-layout.component.TS файл

import { Component, OnInit } from '@angular/core'; 
import { Router }    from '@angular/router'; 
import { Auth }     from './../services/auth.service'; 

@Component({ 
    providers: [ Auth ], 
    selector: 'app-dashboard', 
    templateUrl: './public-layout.component.html' 
}) 
export class PublicLayoutComponent implements OnInit { 

    constructor(private router: Router, private auth: Auth) { } 

    ngOnInit(): void { } 
} 

Этот путь я могу добавить охранника к защищенному шаблона для перенаправления неавторизованного трафика на публичный шаблон. Поэтому из файла /app.routing.ts я создаю маршруты для макетов, а затем внутри создаваемых компонентов создаю дочерние маршруты, которые становятся дочерними маршрутами к соответствующему шаблону.

app.routing.ts

import { Routes, RouterModule }  from "@angular/router"; 

import {Guard}      from "./services/guard.service"; 

//Layouts 
import { PublicLayoutComponent } from './layouts/public-layout.component'; 
import { SecureLayoutComponent } from './layouts/secure-layout.component'; 

import { STREAM_ROUTES }   from "./stream/stream.routes"; 
import { PROFILE_ROUTES }   from "./profile/profile.routes"; 

const APP_ROUTES: Routes = [ 
    { path: '', redirectTo: '/stream', pathMatch: 'full', }, 
    { path: '', component: PublicLayoutComponent, data: { title: 'Public Views' }, children: STREAM_ROUTES }, 
    { path: '', component: SecureLayoutComponent, canActivate: [Guard], data: { title: 'Secure Views' }, children: PROFILE_ROUTES } 
]; 



export const routing = RouterModule.forRoot(APP_ROUTES); 

/stream/stream.routes.ts

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    templateUrl: './stream.component.html', 
}) 

export class StreamComponent { 

    constructor() { } 

} 

/profile/profile.routes.ts

import { Routes } from "@angular/router"; 

import { ProfileComponent } from './profile.component'; 

export const PROFILE_ROUTES: Routes = [ 
    { path: '', redirectTo: 'profile', pathMatch: 'full' }, 
    { path: 'profile', component: ProfileComponent } 
]; 

В этом примере поток где я держу свои общедоступные представления и профиль, где все мои надежные взгляды будут. Поэтому, если бы я захотел создать новый публичный вид, я бы пошел в поток и создаю новый маршрут, затем создам файл html, а также файл component.ts.

Надеюсь, это полезно. Я думаю, что это очень хороший способ обработки маршрутизации для любого приложения.

Answer 2

Я думаю, вам просто нужно удалить перенаправлять маршрут

{ 
    path: '', 
    redirectTo: 'stream', 
    pathMatch: 'full', 
    }, 

как

const APP_ROUTES: Routes = [ 
    { 
     path: 'profile', 
     component: SecureLayoutComponent, 
     data: { 
      title: 'Secure Views' 
     }, 
     children: [ 
      { 
       path: 'Profile', 
       loadChildren: 'profile/profile.module#ProfileModule' 
      } 
     ] 
    }, 
    { 
     path: '', 
     component: PublicLayoutComponent, 
     data: { 
      title: 'Public Views' 
     }, 
     children: [ 
      { 
       path: 'stream', 
       loadChildren: 'stream/stream.module#StreamModule', 
      } 
     ] 
    } 
];