Inherit imports from parent module to child module in Angular2

问题

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

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

exports: [FormsModule]

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

According to this question, I tried to import the AppModule in the child module A. This doesn't work and give me the exception Exception: Call to Node module failed with error: Error: Unexpected value 'undefined' imported by the module 'AModule'

How can I inherit the imports to child modules? I need this for pipes, too.

回答1:

Just create a feature module (or shared module) that exports the components, directives, and pipes, that are usually used together and import this module to modules where you want to use any of these.

There is no way to make components, directives, or pipes available globally. They need to be added to imports of every module where they are used. All you can do is combine modules and make them available by importing only a single or few modules.

回答2:

Seems that this can only be done using a shared module, which collects the shared imports, like @Günter Zöchbauer said. I found an example in the official docs, which I used as a base to create my shared module for doing 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 shares a custom pipe from me (ObjectKeysPipe) and both widely used CommonModule and FormModule. The idea of reducing redudant mess worked. In my application modules, I don't need to add a bunch of imports/declarations. Instead, I only need to import my shared module like this:

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

来源：https://stackoverflow.com/questions/42192393/inherit-imports-from-parent-module-to-child-module-in-angular2