Tenho uma aplicação feita em angular 2 onde eu quero que na página de login ele tenha um layout e na página de dashboard em diante ele tenha um outro layout.
Busco uma forma parecida com os partials do ruby on rails ou angular.js.
Tentei utilizar vários componentes aninhados com o router-outlet porém não obtive sucesso. O angular reclama falando que não foi possível identificar as rotas.
Esse é o meu arquivo de rotas
import { RouterModule, Routes } from '@angular/router';
import { SignUpComponent } from './sign_up/sign_up.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { FullLayoutComponent } from './layout/full_layout.component';
import { SimpleLayoutComponent } from './layout/simple_layout.component';
import { TestComponent } from './test/test.component'
import { Test2Component } from './test/test2.component'
const appRoutes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{
path: 'home', component: FullLayoutComponent, children: [
{ path: '', component: TestComponent, outlet: 'main' }
]
},
{
path: 'sign-up', component: SimpleLayoutComponent, children: [
{ path: '', component: Test2Component, outlet: 'main' }
]
}
];
export const routing = RouterModule.forRoot(appRoutes);
Esse é o meu app.module.ts
import { SimpleLayoutComponent } from './layout/simple_layout.component';
import { FullLayoutComponent } from './layout/full_layout.component';
import { TestComponent } from './test/test.component';
import { Test2Component } from './test/test2.component';
import 'rxjs/add/operator/map';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { SignUpComponent } from './sign_up/sign_up.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { routing } from './app.routes';
@NgModule({
imports: [
BrowserModule,
HttpModule,
routing
],
declarations: [ AppComponent, SignUpComponent, DashboardComponent, TestComponent, Test2Component, SimpleLayoutComponent, FullLayoutComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
e esse é o erro apresentado
Error: Uncaught (in promise): Error: Cannot match any routes: ''
at resolvePromise (zone.js:418)
at zone.js:395
at ZoneDelegate.invoke (zone.js:192)
at Object.onInvoke (:3000/node_modules/@angular/core/bundles/core.umd.js:6242)
at ZoneDelegate.invoke (zone.js:191)
at Zone.run (zone.js:85)
at zone.js:451
at ZoneDelegate.invokeTask (zone.js:225)
at Object.onInvokeTask (:3000/node_modules/@angular/core/bundles/core.umd.js:6233)
at ZoneDelegate.invokeTask (zone.js:224)