Angular 2 Routing findet keine Routen

Question

Ich habe Probleme, mein aktuelles Problem zu verstehen, wo ich die neue Seite nicht laden kann, wenn auf routerlink geklickt wird.

Ich habe viele verschiedene Strukturen für den Link versucht, aber egal was ich es zu dem Fehler in der Konsole ändern, sagt

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

ich Vorlage Layout bin dann meine Seiten Kinder dieser Layouts zu machen. Ein Layout ist sicher und ein Layout ist öffentlich.

In 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', 
      } 
     ] 
    } 
]; 

Jetzt habe ich einen Ordner für Profil und einen Ordner für Strom.

so, wenn Sie streamen Verzeichnis zu verschieben, ist dies der Strom-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 {} 

und das ist die Profil-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 {} 

Also diese lädt fein wenn die App rendert. Aber wenn ich versuche zu klicken,

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

Oder

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

oder

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

ich den Fehler oben erwähnt erhalten,

So aus dem / Verzeichnis

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

/profile/profile.component.ts & profile-routing.module.ts // Kann dies nicht aus dem öffentlichen Layout zugreifen.

Answer 1

ich diese Antwort bin Hinzufügen von jemand anderem zu helfen, die Probleme mit Multi-Level-Routing, Kind Routen ist mit, oder Author Wache.

ich zwei Template in meine apps,

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

Hier ist die secure-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 { } 
} 

Hier ist die öffentlich-layout.component Datei.ts file

Auf diese Weise kann ich Guard hinzufügen, um die nicht autorisierten Datenverkehr zurück zu der öffentlichen Vorlage umleiten. Aus der Datei /app.routing.ts erstelle ich Routen für die Layouts, und dann innerhalb der Komponenten, die ich erstelle, erstelle ich untergeordnete Routen, die zu untergeordneten Routen zu der jeweiligen Vorlage werden.

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 } 
]; 

In diesem Beispiel Strom ist, wo ich meine öffentlichen Ansichten und Profil halte, wo alle meine sicheren Ansichten sein werden. Also, wenn ich eine neue öffentliche Ansicht erstellen wollte, würde ich in den Stream gehen und eine neue Route erstellen und dann die HTML-Datei sowie die Datei component.ts erstellen.

Ich hoffe, das ist hilfreich. Ich denke, das ist eine sehr gute Möglichkeit, das Routing für jede App zu übernehmen.

Answer 2

Ich glaube, Sie nur die Strecke Umleitung entfernen müssen

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

wie

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', 
      } 
     ] 
    } 
];