web-dev-qa-db-fra.com

Importer plusieurs composants angulaires via un module

Mon projet angulaire est en croissance, donc je veux garder mon projet propre.

J'ai un composant angulaire qui dépend d'un composant angulaire imbriqué. 

Maintenant, j'ai besoin de deux instructions d'importation pour utiliser ces composants qui ne peuvent pas fonctionner sans l'autre. 

Comme solution, je voulais créer un petit module angulaire contenant ces deux composants et l'importer dans mon application principale. 

Après cela, je reçois une erreur qui indique que l’un des composants du petit module n’est pas reconnu. 

//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{ }

Ma question: Est-ce une bonne pratique de regrouper plusieurs composants dans un module et est-ce déjà pris en charge dans Angular?

ps . Je travaille avec Angular 2.0.0, pas avec des RC. Ma configuration est comparable à celle du didacticiel de Tour of Heroes. 

Edit: Code source https://github.com/Linksonder/Webdictaat/

Erreur msg: 

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)
angularmodulecomponentsseparation-of-concerns
17
Linksonder

Vous devez ajouter vos composants aux exportations de Dictaat.module.ts pour pouvoir les importer dans votre 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{ }
36
Stefan Svrkota

Les composants, directives et tuyaux qui devraient devenir disponibles en important ce module doivent être répertoriés dans exports. declarations consiste à rendre ces composants disponibles dans le module:

@NgModule({
    imports: [BrowserModule, HttpModule],
    declarations: [DictaatComponent, DictaatEntryComponent],
    exports: [DictaatComponent, DictaatEntryComponent],
})
export class DictaatModule{ }
8
Günter Zöchbauer

Pour les développeurs ioniques, utilisez des pages de chargement paresseuses. Cette erreur "ce n'est pas une propriété connue de" peut se produire même si vous l'importez au niveau du module App.

La raison en est que vous utilisez la fonctionnalité de chargement paresseux de ionic.

Donc, pour résoudre ce problème, il vous suffit de l’importer au niveau du module Page .

Bonnes ressources pour comprendre le chargement paresseux.

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

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

3
Lucianovici

Pour moi, j'ai de nombreux composants personnalisés, de sorte que j'ai créé un personnalisé-view.module.ts et exporte tous les composants.

Les autres modules veulent utiliser des vues personnalisées doivent importer CustomViewModule

custom-view.module.ts

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

Et dans d'autres modules qui veulent utiliser la vue personnalisée (RatingComponent dans ce cas)

@NgModule({
  imports: [
    CustomViewModule
  ]
})

export class OtherModule { }

J'utilise 4+ angulaire, puis exporter DictaatComponent puis importer DictaatModule dans le module d'application ne me convient pas. Il me reste à importer tous les DictaatModule dans chaque module qui souhaite utiliser DictaatComponent.

1
Frank Nguyen