Inherit import from parent module to child module in Angular2

Question

I made an Angular2 application as described here . It has two components (A, B) that are imported by the global app.module . My idea was to enable common modules in app.module , so I don't need to mess up every module with redundant code. I want to do this, for example, using FormsModule . So in app.module I have

 imports: [ UniversalModule, CommonModule, FormsModule, AModule RouterModule.forRoot([]) ], exports: [FormsModule] 

But in module A, I got the exception Can't bind to 'ngModel' since it isn't a known property of 'select'. , which seems to be caused by a missing FormsModule . It only works when I import FormsModule into each child module using imports: [FormsModule] . This is exactly what I want to avoid.

In accordance with this question, I tried to import AppModule into child module A. This does not work and gives me an exception Exception: Call to Node module failed with error: Error: Unexpected value 'undefined' imported by the module 'AModule'

How can I inherit the import of child modules? I need this for pipes too.

Answer 1

Just create a function module (or general module) that exports the components, directives, and channels that are commonly used together and imports this module into the modules in which you want to use any of them.

Unable to create global components, directives or pipes. They must be added to the import of each module in which they are used. All you can do is combine the modules and make them available by importing only one or more modules.

Answer 2

It seems that this can only be done using a common module that collects general imports, such as @ Günter Zöchbauer. I found an example in white papers that I used as the basis for creating my general module for this:

 import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ObjectKeysPipe } from './../shared/pipes/object-keys.pipe'; @NgModule({ imports: [CommonModule], declarations: [ ObjectKeysPipe ], exports: [ CommonModule, FormsModule, ObjectKeysPipe ] }) export class GlobalSharedModule{} 

This separates the user channel from me ( ObjectKeysPipe ) and both are widely used by CommonModule and FormModule . The idea of ​​reducing the messy mess worked. In my application modules, I do not need to add a bunch of import / declarations. Instead, I only need to import my general module as follows:

 import { GlobalSharedModule } from './../shared/global-shared.module'; @ngModule({ imports: GlobalSharedModule })