route - change title angular 7

Módulo de aplicación Angular2 con importaciones de nivel raíz

Question

¿No deberían las importaciones en el nivel raíz estar disponibles globalmente (con globalmente me refiero a todos los submódulos y componentes)?

Tengo el siguiente módulo de raíz / aplicación:

import { BrowserModule } from ''@angular/platform-browser'';
import { NgModule, ApplicationRef } from ''@angular/core'';
import { CommonModule } from ''@angular/common'';
import { FormsModule } from ''@angular/forms'';
import { AppComponent } from ''./app.component'';
import { HttpModule } from ''@angular/http'';
import { RouterModule } from ''@angular/router'';
import { appRouterProviders, routing } from ''./app.routes'';
import { DashboardModule } from ''./dashboard/dashboard.module'';
import { DecisionModule } from ''./decision/decision.module'';
import { MdCoreModule } from ''@angular2-material/core'';
import { MdButtonModule } from ''@angular2-material/button'';
import { MdCardModule } from ''@angular2-material/card'';
import { MdListModule } from ''@angular2-material/list'';
import { MdSidenavModule } from ''@angular2-material/sidenav'';
import { MdToolbarModule } from ''@angular2-material/toolbar'';
import { MdIconModule } from ''@angular2-material/icon'';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CommonModule,
FormsModule,
HttpModule,
RouterModule,
routing,
DashboardModule,
MdCoreModule,
MdButtonModule,
MdCardModule,
MdListModule,
MdSidenavModule,
MdToolbarModule,
MdIconModule
],
providers: [
appRouterProviders
],
entryComponents: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {
}

Si trato de usar los elementos materiales en uno de mis submódulos que no muestran, este es el aspecto del submódulo:

import { NgModule } from ''@angular/core'';
import { CommonModule } from ''@angular/common'';
import { FormsModule } from ''@angular/forms'';
import { dashboardRouting } from ''./dashboard.routes'';
import { DashboardComponent } from ''./dashboard.component'';
import { ActionsDialogComponent } from ''./actions-dialog'';
@NgModule({
imports: [
CommonModule,
FormsModule,
dashboardRouting,
],
declarations: [
DashboardComponent,
ActionsDialogComponent
],
providers: [
]
})
export class DashboardModule {}

Sin embargo, si importo los módulos de material en el submódulo que muestran. Así es como se ve el submódulo cuando funcionan los componentes de diseño del material:

import { NgModule } from ''@angular/core'';
import { CommonModule } from ''@angular/common'';
import { FormsModule } from ''@angular/forms'';
import { dashboardRouting } from ''./dashboard.routes'';
import { DashboardComponent } from ''./dashboard.component'';
import { ActionsDialogComponent } from ''./actions-dialog'';
import { MdCoreModule } from ''@angular2-material/core'';
import { MdButtonModule } from ''@angular2-material/button'';
import { MdCardModule } from ''@angular2-material/card'';
import { MdListModule } from ''@angular2-material/list'';
import { MdSidenavModule } from ''@angular2-material/sidenav'';
import { MdToolbarModule } from ''@angular2-material/toolbar'';
import { MdIconModule } from ''@angular2-material/icon'';
@NgModule({
imports: [
CommonModule,
FormsModule,
dashboardRouting,
MdCoreModule,
MdButtonModule,
MdCardModule,
MdListModule,
MdSidenavModule,
MdToolbarModule,
MdIconModule,
],
declarations: [
DashboardComponent,
ActionsDialogComponent
],
providers: [
]
})
export class DashboardModule {}

¿Por qué los módulos de material deben importarse nuevamente en el subnivel si ya están importados en el nivel raíz?

Answer 1

En el concepto de Componentes en Angular2 no hay nada como un "nivel raíz" al que se refiere.
Los componentes son piezas modulares muy parecidas a las clases en un proyecto Java (o cualquier lenguaje de alto nivel), donde también importaría cada clase que use.
Se pueden anidar o usar uno dentro de otro, pero aún así, cada componente debe importar sus propias dependencias.
Tenga en cuenta que la importación en Angular2 es un enfoque muy diferente al de incluir un módulo / biblioteca externa en Angular 1 (entonces, esencialmente, se trata de una nueva referencia en index.html para cada dependencia).
Esas importaciones en Angular 2 están ahí primero, porque el compilador Typescript necesita saber qué se utiliza en su componente (agregando así más poder para hacer la comprobación de errores)
La compilación compilada y empaquetada debe incluir cada dependencia solo una vez (siempre que todo esté configurado correctamente).

Answer 2

La documentación de Angular es confusa, indican en varias áreas que los módulos que importas en el módulo raíz ( app.module.ts ) están disponibles a nivel mundial, pero lo que no es rápidamente evidente a menos que leas a fondo (blah) es que cuando se usa un submódulo rompe esa herencia y un submódulo crea su propio dominio de aplicación para los componentes (no servicios, los servicios siguen siendo globales, al menos de la forma en que lo leí). Esa es la razón por la que si era como yo, noté algunos elementos que tenía que importar a mi submódulo y otros que no, lo que realmente me confundió. Aquí está la sección sobre angular.io que trata esto: NgModule.html

Algo más que vale la pena mencionar: pensé que el desarrollo en Angular2 desde RC5 + significaba que tenía que resumir todas mis características en módulos, simplemente no es el caso. Los módulos no son realmente necesarios para que construyamos nuestro trabajo diario con Angular2 a menos que desee utilizar la carga perezosa o desee específicamente compartir código con otros, por ejemplo, un paquete npm.