Intentemos demostrar esto a través de una aplicación práctica. Configuraremos nuestra aplicación de tal manera que podamos usar la estructura del módulo angular que debería aclarar las cosas. Primero, generaremos el módulo central, el componente central, y luego un módulo compartido usando los siguientes comandos:ng generate module coreng generate component core
Si configuramos el módulo primero, se creará una carpeta con nuestro módulo central. Luego, cuando el componente sea generado, se colocará dentro de la misma carpeta y será declarado en el módulo por nuestro CLI.
ng g module sharedNo estamos planeando hacer nada con nuestro SharedModule todavía, pero lo generaremos para su uso futuro.
A continuación, tenemos que informar a nuestro AppModule sobre el CoreModule. Así que importaremos el CoreModule dentro de AppModule y lo añadiremos a la matriz de «importaciones». Así es como AppModule debería verse:
123456789101112131415importar{Módulo de Navegador}de$0027@angular/plataforma-navegador$0027;importar{MóduloCore}de$0027./core/core.módulo$0027;importar{NgMódulo}de$0027@angular/core$0027;importar{ComponenteAplicación}de$0027. /app.component$0027;@NgModule({ declaraciones:[AppComponent], importa:[BrowserModule,CoreModule], proveedores:[], bootstrap:[AppComponent]})exportclassAppModule{}javascript
Ahora abriremos app.component.html y reemplazaremos el contenido con my-app-core.También «my-app-core» es el selector de nuestro componente principal. Así que, esencialmente, sólo estamos pidiendo a nuestro AppComponent que sirva CoreComponent.Si ejecutamos ng serve y pulsamos localhost:4200, observaremos un error en la consola diciendo que my-app-core no es un elemento conocido y no se muestra nada en la página. Esto implica que nuestra aplicación no conoce ningún componente con el selector «my-app-core». Analicemos por qué es así. Declaramos CoreComponent dentro de nuestro CoreModule, pero no lo expusimos a nuestra aplicación. Para ello, tendremos que añadir el componente central a la matriz de «exportaciones» dentro de nuestro módulo central. Así que nuestro Módulo Central debería verse algo como lo que se muestra a continuación:
12345678910importar{NgModule}de$0027@angular/core$0027;importar{CoreComponent}de$0027./core.component$0027;importar{CommonModule}de$0027@angular/common$0027;@NgModule({ importaciones:[CommonModule], declaraciones:[CoreComponent], exportaciones:[CoreComponent]})exportclaseCoreModule{}javascript
Ahora, cuando ejecutamos ng serve de nuevo y verificamos en el navegador, veríamos «¡Mi componente principal funciona!», que representa el contenido/plantilla de nuestro componente principal.