Импортировать несколько компонентов Angular через модуль

Мой проект Angular растет, поэтому я хочу, чтобы мой проект был чистым.

У меня есть один компонент Angular, который зависит от вложенного компонента Angular.

Теперь мне нужны два оператора импорта для использования этих компонентов, которые не могут работать без друг друга.

В качестве решения я хотел создать небольшой модуль Angular, который содержит эти два компонента и импортирует модуль в мой основной модуль приложения.

После этого я получаю сообщение об ошибке, которое утверждает, что один из компонентов внутри малого модуля не распознается.

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

Мой вопрос: полезно ли группировать несколько компонентов в один модуль, и это уже поддерживается в Angular?

пс. Im работает с Angular 2.0.0, а не с RC. Моя настройка сопоставима с настройкой тура по учебнику героев.

Изменить: Исходный код https://github.com/Linksonder/Webdictaat/

Ошибка 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"): [email protected]: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"): [email protected]: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"): [email protected]: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"): [email protected]: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)

Ответ 1

Вам нужно добавить свои компоненты в Dictaat.module.ts export, чтобы они были импортированы в ваш 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{ }

Ответ 2

Компоненты, директивы и трубы, которые должны стать доступными при импорте этого модуля, должны быть перечислены в exports. declarations состоит в том, чтобы сделать эти компоненты доступными в модуле:

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

Ответ 3

Для ионных разработчиков, используя ленивые страницы загрузки. Это "не известное свойство" ошибки может возникнуть, даже если вы импортируете его на уровне модуля приложения.

Причина в том, что вы используете функцию ленивой загрузки от ионной.

Итак, чтобы исправить это, вам просто нужно импортировать его на Уровень модуля страницы.

Хорошие ресурсы для понимания ленивой загрузки.

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

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

Ответ 4

Для меня у меня много настраиваемых компонентов, поэтому я создал один custom-view.module.ts и экспортировал все компоненты.

Другие модули хотят использовать пользовательские представления для импорта CustomViewModule

заказные-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.