Angular router

El siguiente post es continuación del resumen de Angular 2

Hay varias formas de hacer un router en angular, una de ellas es la siguiente utilizando:

Para el ejemplo partimos de :

  • Un componente cualqiera como puede ser login situdado en /login/login.component el cual exportamos:

    import { Component, NgZone } from '@angular/core';
    
    @Component({
        selector: 'my-login',
        templateUrl: 'login.component.html',
        styleUrls: ['login.component.scss'],
    
    })
    export class LoginComponent {
      constructor() {}
    }
    
  • Creamos un modulo app-routing app-routing.module.ts, el cual importa:

    • Los componentes que vamos a routear
    • NgModule
    • Routes y RouterModule
    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { LoginComponent } from './login/login.component';
    
    

    En el modulo creamos un array de rutas del objeto Routes en el cual se indica el path y el componente a dicho path:

      export const routes: Routes = [
        { path: 'login', component: LoginComponent },
        { path: 'register', component: RegisterComponent }
      ];
    

    En @NgModule se importan las rutas para el routerModule y se exportan una vez añadidas las rutas:

      @NgModule({
        imports: [ RouterModule.forRoot(routes) ],
        exports: [ RouterModule ],
      })
    

Por último exportamos AppRoutingModule y además todos los componentes los cuales serán incluidos en AppModule para ser declarados, de esta forma no tenemos que importar uno a uno en AppModule, si no todos los componentes añadidos en el array de AppRoutingModule.

export class AppRoutingModule {}
export const routedComponents = [ LoginComponent, RegisterComponent ];

En definitiva AppRoutingModule sería por ejemplo:

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

import { LoginComponent } from './login/login.component';

export const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent },
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ],

})

export class AppRoutingModule {}

export const routedComponents = [ LoginComponent, RegisterComponent ];

Y en app.module se importa import { AppRoutingModule, routedComponents } from './app-routing.module'; para añadir a imports AppRoutingModule y declarar en declarations routedComponents.

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { AppRoutingModule, routedComponents } from './app-routing.module';
import { AuthModule } from './shared/auth.module';


@NgModule({
    imports: [
        BrowserModule,
        AppRoutingModule, // Important add AppRoutingModule
        HttpModule
    ],
    declarations: [
        AppComponent,
        routedComponents // All components in AppRoutingModule
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }