CREAR UN FRONTEND EN ANGULAR 6, NODE JS

1. Crear carpeta
2. ng new nombreproyecto
3. cd nombreproyecto
4. abrir la carpeta con visual studio code
5. crear componentes:
 ng g c login --spec=false -is
 ng g c nopagefound --spec=false -is
 ng g c pages/principal --spec=false -is
ng g c shared/header --spec=false -is
ng g c shared/sidebar --spec=false -is
 ng g c shared/breadcrumbs --spec=false -is
 ng g s services/shared --spec=false
 ng g s services/sidebar --spec=false
6. abrir el template y copiar en en index.html todas las referencias css,assets, boostrap, o en el angular.json agregar los css.
7. agregar de la pagina principal la parte de html en todas las rutas de shared, header, sidebar, etc..
8. agregar archivo app.routes.js y llenarlo:

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

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

import { NopagefoundComponent } from './shared/nopagefound/nopagefound.component';

import { PrincipalComponent } from './pages/principal/principal.component';

const appRoutes: Routes = [

{ path: 'login', component: LoginComponent },

{ path: 'register', component: LoginComponent },

{ path: 'principal', component: PrincipalComponent },

{ path: '', redirectTo: '/principal', pathMatch: 'full' },

{ path: '**', component: NopagefoundComponent }

];

export const APP_ROUTES = RouterModule.forRoot(appRoutes, {useHash : true});

agregar el appRouting en app.module.js:

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

//rutas

import { APP_ROUTES } from './app.routes';

import { AppComponent } from './app.component';

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

import { NopagefoundComponent } from './shared/nopagefound/nopagefound.component';

import { PrincipalComponent } from './pages/principal/principal.component';

import { HeaderComponent } from './shared/header/header.component';

import { SidebarComponent } from './shared/sidebar/sidebar.component';

import { BreadcrumbsComponent } from './shared/breadcrumbs/breadcrumbs.component';

@NgModule({

declarations: [

AppComponent,

LoginComponent,

NopagefoundComponent,

PrincipalComponent,

HeaderComponent,

SidebarComponent,

BreadcrumbsComponent

],

imports: [

BrowserModule, APP_ROUTES

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

9. crear componente pages:
 ng g c pages/pages --flat --spec=false
10. pegar el contenido de app.component.html a pages.component.html y en el app.component se deja : <router-outlet></router-outlet>
11. modificar el archivo de rutas: agregando direccion al pagesComponent

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

import { PagesComponent } from './pages/pages.component';

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

import { NopagefoundComponent } from './shared/nopagefound/nopagefound.component';

import { PrincipalComponent } from './pages/principal/principal.component';

const appRoutes: Routes = [

{ path: '', component: PagesComponent },

{ path: 'login', component: LoginComponent },

{ path: 'register', component: LoginComponent },

{ path: 'principal', component: PrincipalComponent },

// { path: '', redirectTo: '/principal', pathMatch: 'full' },

{ path: '**', component: NopagefoundComponent }

];

export const APP_ROUTES = RouterModule.forRoot(appRoutes, {useHash : true});

12. agregar el children y las rutas hijas:

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

import { PagesComponent } from './pages/pages.component';

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

import { NopagefoundComponent } from './shared/nopagefound/nopagefound.component';

import { PrincipalComponent } from './pages/principal/principal.component';

const appRoutes: Routes = [

{ path: '',

component: PagesComponent

children: [

{ path: 'principal', component: PrincipalComponent },

{ path: '', redirectTo: '/principal', pathMatch: 'full' }

]

},

{ path: 'login', component: LoginComponent },

{ path: 'register', component: LoginComponent },

// { path: '', redirectTo: '/principal', pathMatch: 'full' },

{ path: '**', component: NopagefoundComponent }

];

export const APP_ROUTES = RouterModule.forRoot(appRoutes, {useHash : true});

13. crear nuevo componente register:
ng g c login/register --flat --spec=false -is

14. crear un module en pages/

pages.module.ts

import { NgModule } from '@angular/core';

@NgModule({

declarations: [

],

exports:[

],

imports:[

]

})

export class PagesModule { }

llenarlo:

import { NgModule } from '@angular/core';

import { PrincipalComponent } from './principal/principal.component';

import { PagesComponent } from './pages.component';

@NgModule({

declarations: [

PrincipalComponent

],

exports: [

PrincipalComponent,

PagesComponent

],

imports: [

]

})

export class PagesModule { }

14. crear un modulo en shared/

shared.module.ts

import { NgModule } from '@angular/core';

import { NopagefoundComponent } from './nopagefound/nopagefound.component';

import { HeaderComponent } from './header/header.component';

import { SidebarComponent } from './sidebar/sidebar.component';

import { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component';

@NgModule({

declarations: [

NopagefoundComponent,

HeaderComponent,

SidebarComponent,

BreadcrumbsComponent

],

exports: [

NopagefoundComponent,

HeaderComponent,

SidebarComponent,

BreadcrumbsComponent

],

imports: [

]

})

export class SharedModule { }

agregar el shareModule a pages.module.ts

import { SharedModule } from '../shared/shared.module';

import { NgModule } from '@angular/core';

import { PrincipalComponent } from './principal/principal.component';

import { PagesComponent } from './pages.component';

@NgModule({

declarations: [

PrincipalComponent

],

exports: [

PrincipalComponent,

PagesComponent

],

imports: [

SharedModule

]

})

export class PagesModule { }

15. agregar el archivo : en pages/
pages.routes.ts

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

const pagesRoutes: Routes = [

];

export const APP_PAGES_ROUTES = RouterModule.forRoot(pagesRoutes, {useHash : true});