Creando el CMS Module

Layout

<div>
  <header>
    <h3>Title</h3>
  </header>
  <nav>
    <ul>
      <li><a routerLink="grid">Grid Page</a></li>
      <li><a routerLink="tasks">Tasks Page</a></li>
    </ul>
  </nav>
  <main>
    <router-outlet></router-outlet>
  </main>
</div>

layout.scss

div {
  display: grid;
  height: 100vh;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
      "header header header"
      "nav content content";
  header {
    grid-area: header;
    background-color: #3E51B5;
    color: white;
    padding: 1em;
    box-shadow: 1px 2px 4px 0 rgb(21 99 157 / 16%);
    border-bottom: 1px solid rgba(21,99,157,0.16);
  }
  nav {
    grid-area: nav;
    border-right: 1px solid rgba(21,99,157,0.16);
    background-color: #fff;
    a {
      margin: 0;
      padding: 0;
      padding: 1em;
      cursor: pointer;
      position: relative;
      display: block;
      text-decoration: none;
      color: #000;
    }
  }
  main {
    grid-area: content;
    background-color: #f3f8fb;
    padding: 1em;
  }
}```

Creando el módulo CMS y los componentes

ng g m cms --routing
ng g c cms/pages/tasks
ng g c cms/pages/grid
ng g c cms/components/layout

Estilos del layout

div {
  display: grid;
  height: 100vh;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
      "header header header"
      "nav content content";
  header {
    grid-area: header;
    background-color: #3E51B5;
    color: white;
    padding: 1em;
    box-shadow: 1px 2px 4px 0 rgb(21 99 157 / 16%);
    border-bottom: 1px solid rgba(21,99,157,0.16);
  }
  nav {
    grid-area: nav;
    border-right: 1px solid rgba(21,99,157,0.16);
    background-color: #fff;
    a {
      margin: 0;
      padding: 0;
      padding: 1em;
      cursor: pointer;
      position: relative;
      display: block;
      text-decoration: none;
      color: #000;
    }
  }
  main {
    grid-area: content;
    background-color: #f3f8fb;
    padding: 1em;
  }
}

Al tratarse de dos módulos que crecerán mucho en el tiempo, el Website y el CMS, y que cada uno tiene diferentes propósitos, uno para administradores y otro para usuarios normales. Personalmente recomiendo en un proyecto real separar ambos módulos en dos proyectos distintos. La página web, por un lado, y otro repositorio para el Backoffice.

Me gusto la clase, de esta forma puedo manejar mejor mis rutas 💻.

Me sirvio para entender mejor: el router-outlet de app.component.html, puede renderizar 3 posibles contenidos

1. el layoutComponent
2. el modulo del cms
3. el componente not-found.
   a su vez el router-outlet del layout.html puede renderizar los contenidos que se encuentran en el children del app-routing.module.

para entenderlo mejor, se pueden fijar en el navbar, este solo va a salir en los componentes o contendios renderizados por el layout, es decir las rutas hijas del LayuoutComponent que estan en app-routing.module, por tal motivo al obtener el componente not-found, ya no tenemos navbar, ya que este componente (el not-found) no esta dentro de las rutas hijas del LayoutComponent. exelente clase, me despejo muchas dudas aun despues de haber trabajado un año en angular.

Para generaciones flojas del fututo aquí tenemos esto jaja

ng g m cms --routing && ng g c cms/pages/tasks && ng g c cms/pages/grid && ng g c cms/components/layout

Aqui los comandos

$ ng g m cms --routing
$ ng g c cms/pages/tasks
$ ng g c cms/pages/grid
$ ng g c cms/components/layout

Me está saliendo este error

Error: src/app/cms/components/layout/layout.component.html:12:5 - error NG8001: ‘router-outlet’ is not a known element:

1. If ‘router-outlet’ is an Angular component, then verify that it is part of this module.
2. If ‘router-outlet’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.