3
respostas

Múltiplos layouts com angular 2

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)
3 respostas

Se não me engano, você não pode ter um router-link para a rota '', precisa usar /. Mas não ficou claro se o problema é assim que sua página inicia ou quando você mete um clique.

Quando coloco uma rota '/' ele reclama falando que rotas não podem começar com / por isso coloquei a rota ''.

O erro acontece assim que a página é carregada

Me referi a outra coisa. Rotas que equivalem a / são feitas com '', no entanto, para acessar via router-link, você não pode usar '', tem que usar /. Tem que verse há algum router-link no template que usa '', o que não é permitido.