Crear un nuevo proyecto en angular
ng new example
Nos uicamos en el directorio del proyecto e iniciamos el servidor para comprobar la instalación
ng s
Instalamos primeng primeicons primeflex
npm install primeng –save
npm install primeicons –save
npm install primeflex –save
Descomprimir el archivo diamond-ng-14.2.1 y copiar todo el contenido de assets y app/layout
Editar angular.json
«styles»: [
«src/styles.css»,
«node_modules/primeicons/primeicons.css»,
«node_modules/primeng/resources/primeng.min.css»,
«node_modules/primeflex/primeflex.css»,
«src/assets/layout/styles/layout/layout.css»
],
En src/index.html en el header incluir la siguiente linea
<link id=»theme-link» rel=»stylesheet» type=»text/css» href=»assets/layout/styles/theme/theme-light/blue/theme.css»>
Creamos el modulo prime-ng para ahi consolidar todos los componentes de prime ng
ng g m primeNg
En app.module.ts importamos la siguiente libreria
imports: [
BrowserModule,
BrowserAnimationsModule,
PrimeNgModule
],
Creamos los modulos necesarios, empezamos con
ng g m auth
Dentro del modulo auth creamos la carpeta pages y generamos un componente auth
ng g c auth/pages/login –skip-tests
Creamos el archivo para manejar rutas tanto el principal asi como en cada modulo
general
ng g m appRouting –flat –module=app
auth
ng g m auth/authRouting –flat
Dentro de auth creamos la carpeta guards
ng g g auth/guards/auth –flat –skip-tests
Implementamos dos metodos canLoad canActivate
Creamos un módulo home
ng g m home
creamos una carpeta pages para alojar los componentes
creamos un compononete inicio aqui se iniciara la app luego de loguearse
ng g c home/pages/inicio –skip-tests
Importante: importar en appModule
imports: [
BrowserModule,
BrowserAnimationsModule,
AppLayoutModule,
AppRoutingModule
],
En app.menu.component.ts cambiamos los menus
Creamos un módulo y routing clientes