web-dev-qa-db-ja.com

モジュールを介して複数のAngularコンポーネントをインポート

私のAngularプロジェクトは成長しているので、プロジェクトをクリーンに保ちたい。

ネストされたAngularコンポーネントに依存する1つのAngularコンポーネント。

ここで、これらのコンポーネントを使用するために2つのimportステートメントが必要になりますが、これらのコンポーネントは互いに機能しなければ機能しません。

解決策として、これらの2つのコンポーネントを含む小さなAngularモジュールを作成し、そのモジュールをメインのapp.moduleにインポートしました。

これを実行すると、小さなモジュール内のコンポーネントの1つが認識されないことを示すエラーが表示されます。

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

私の質問：複数のコンポーネントを1つのモジュールにグループ化するのは良い習慣ですか？これは既にAngularでサポートされていますか？

追伸私はAngular 2.0.0で、RCではありません。私のセットアップは、ヒーローツアーのチュートリアルのセットアップに匹敵します。

編集：ソースコード https://github.com/Linksonder/Webdictaat/

エラーメッセージ：

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

コンポーネントをDictaat.module.tsにインポートするには、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{ }
37
Stefan Svrkota

このモジュールをインポートすることで利用可能になるはずのコンポーネント、ディレクティブ、およびパイプは、exportsにリストする必要があります。 declarationsは、これらのコンポーネントをモジュール内で使用可能にすることです。

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

ionic devs、遅延読み込みページを使用。この「既知のプロパティではありません」というエラーは、App Moduleレベルでインポートしても発生する可能性があります。

その理由は、ionicの遅延読み込み機能を使用しているためです。

そのため、修正するには Page Moduleレベル でインポートするだけです。

遅延読み込みを理解するための優れたリソース。

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

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

3
Lucianovici

私には多くのカスタムコンポーネントがあるため、1つのcustom-view.module.tsを作成し、すべてのコンポーネントをエクスポートします。

カスタムビューを使用する他のモジュールは、CustomViewModuleをインポートする必要があります

custom-view.module.ts

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

また、カスタムビューを使用する他のモジュール（この場合はRatingComponent）

@NgModule({
  imports: [
    CustomViewModule
  ]
})

export class OtherModule { }

angular 4+を使用しています。DictaatComponentをエクスポートしてからDictaatModuleをアプリモジュールにインポートしても動作しません。すべてのDictaatModuleをDictaatComponentを使用する各モジュールにインポートする必要があります。

1
Frank Nguyen