angular - directives - ng-template

Importar múltiples componentes angulares vía módulo

Question

Mi proyecto Angular está creciendo, así que quiero mantener mi proyecto limpio.

Tengo un componente angular que depende de un componente angular anidado.

Ahora necesito dos instrucciones de importación para usar estos componentes que no pueden funcionar sin el otro.

Como solución, quería crear un pequeño módulo angular que contenga estos dos componentes e importar el módulo a mi módulo de aplicaciones principal.

Después de hacer esto, aparece un error que indica que uno de los componentes dentro del módulo pequeño no es reconocido.

//app.module.ts
@NgModule({
imports: [BrowserModule, HttpModule, DictaatModule],
declarations: [AppComponent, DictatenComponent, FilePreviewComponent],
bootstrap: [AppComponent]
})
//Dictaat.module.ts
import { DictaatComponent } from ''./dictaat.component'';
import { DictaatEntryComponent } from ''./dictaat-entry.component'';
@NgModule({
imports: [BrowserModule, HttpModule],
declarations: [DictaatComponent, DictaatEntryComponent],
})
export class DictaatModule{ }

Mi pregunta: ¿Es una buena práctica agrupar múltiples componentes en un módulo y esto ya está soportado en Angular?

PD. Estoy trabajando con Angular 2.0.0, no con ningún RC. Mi configuración es comparable a la configuración de la gira de héroes tutorial.

Edición: Código fuente https://github.com/Linksonder/Webdictaat/

Mensaje de error:

Unhandled Promise rejection: Template parse errors:
Can''t bind to ''dictaatName'' since it isn''t a known property of ''wd-dictaat''.
1. If ''wd-dictaat'' is an Angular component and it has ''dictaatName'' input, then verify that it is part of this module.
2. If ''wd-dictaat'' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the ''@NgModule.schema'' of this component to suppress this message.
("
</div>
<div class="col-md-3">
<wd-dictaat [ERROR ->][dictaatName]="selectedDictaat.name" *ngIf="selectedDictaat">Loading dictaat...</wd-dictaat>
</d"): DictatenComponent@21:20
''wd-dictaat'' is not a known element:
1. If ''wd-dictaat'' is an Angular component, then verify that it is part of this module.
2. If ''wd-dictaat'' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the ''@NgModule.schema'' of this component to suppress this message. ("
</div>
<div class="col-md-3">
[ERROR ->]<wd-dictaat [dictaatName]="selectedDictaat.name" *ngIf="selectedDictaat">Loading dictaat...</wd-dicta"): DictatenComponent@21:8 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
Can''t bind to ''dictaatName'' since it isn''t a known property of ''wd-dictaat''.
1. If ''wd-dictaat'' is an Angular component and it has ''dictaatName'' input, then verify that it is part of this module.
2. If ''wd-dictaat'' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the ''@NgModule.schema'' of this component to suppress this message.
("
</div>
<div class="col-md-3">
<wd-dictaat [ERROR ->][dictaatName]="selectedDictaat.name" *ngIf="selectedDictaat">Loading dictaat...</wd-dictaat>
</d"): DictatenComponent@21:20
''wd-dictaat'' is not a known element:
1. If ''wd-dictaat'' is an Angular component, then verify that it is part of this module.
2. If ''wd-dictaat'' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the ''@NgModule.schema'' of this component to suppress this message. ("
</div>
<div class="col-md-3">
[ERROR ->]<wd-dictaat [dictaatName]="selectedDictaat.name" *ngIf="selectedDictaat">Loading dictaat...</wd-dicta"): DictatenComponent@21:8
at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:8530:21)
at RuntimeCompiler._compileTemplate (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16905:53)
at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:85)
at Set.forEach (native)
at compile (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:49)
at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:192:28)
at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:85:43)
at http://localhost:3000/node_modules/zone.js/dist/zone.js:451:57
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:225:37)
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:125:47)

Answer 1

Los componentes, las directivas y las canalizaciones que deberían estar disponibles al importar este módulo, deben enumerarse en las exports . declarations son para hacer que estos componentes estén disponibles dentro del módulo:

@NgModule({
imports: [BrowserModule, HttpModule],
declarations: [DictaatComponent, DictaatEntryComponent],
exports: [DictaatComponent, DictaatEntryComponent],
})
export class DictaatModule{ }

Answer 2

Para desarrolladores iónicos, usar páginas de carga perezosa. Este error "no es una propiedad conocida de" puede ocurrir incluso si lo importa al nivel del Módulo de aplicaciones.

La razón de esto es que estás usando la función de carga perezosa de ionic.

Así que para solucionarlo solo necesita importarlo en el nivel del Módulo de página .

Buenos recursos para entender la carga perezosa.

http://blog.ionic.io/ionic-and-lazy-loading-pt-1/

http://blog.ionic.io/ionic-and-lazy-loading-pt-2/

Answer 3

Para mí, tengo muchos componentes personalizados, por lo que creé un custom-view.module.ts y exporté todos los componentes.

Otros módulos quieren usar vistas personalizadas para importar CustomViewModule

custom-view.module.ts

@NgModule({
imports: [
CommonModule
],
declarations: [ RatingComponent ],
exports: [ RatingComponent ]
})
export class CustomViewModule { }

Y en otros módulos que quieran usar vista personalizada (RatingComponent en este caso)

@NgModule({
imports: [
CustomViewModule
]
})
export class OtherModule { }

Estoy usando angular 4+, y exportar DictaatComponent y luego importar DictaatModule al módulo de aplicaciones no me funciona. Todavía tengo que importar todos los módulos de Dictaat a cada módulo que quiera usar DictaatComponent.

Answer 4

Dictaat.module.ts agregar sus componentes a las exportaciones de Dictaat.module.ts para que se puedan importar en su app.module.ts :

//Dictaat.module.ts
import { DictaatComponent } from ''./dictaat.component'';
import { DictaatEntryComponent } from ''./dictaat-entry.component'';
@NgModule({
imports: [BrowserModule, HttpModule],
declarations: [DictaatComponent, DictaatEntryComponent],
exports: [DictaatComponent, DictaatEntryComponent]
})
export class DictaatModule{ }