Can't load shared directives of a NgModule in other NgModules

问题

Following this discussion, where I had the same problem : I couldn't import the directives of angular2-materialize in more than one module, without having the error message "Type X is part of the declarations of 2 modules"

I decided to follow the solution given : put the angular2-materialize in its own module, then import the module in my AppModule and my ChildrenModule.

So my MaterializeModule :

import { NgModule } from '@angular/core';

// Import Materialize CSS + Directives, like indicated in the readme 
// https://github.com/InfomediaLtd/angular2-materialize
import 'materialize-css';
import 'angular2-materialize';

import { MaterializeDirective } from 'angular2-materialize';

@NgModule({
    declarations: [ MaterializeDirective ]
})
export class MaterializeModule {
}

My AppModule :

import { MaterializeModule } from './shared/materialize.module';

@NgModule({
  bootstrap: [ AppComponent ],
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    NoContentComponent
  ],
  imports: [ // import Angular's modules
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterializeModule,
    RouterModule.forRoot(ROUTES, { useHash: false })
  ],
  providers: [ // expose our Services and Providers into Angular's dependency injection
    ENV_PROVIDERS,
    APP_PROVIDERS
  ]
})
export class AppModule {}

And my ChildrenModule :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// Import shared modules
import { MaterializeModule } from '../shared/materialize.module';

// Import child routes
import { detailsRouting } from './details.routing';

// Import app modules
import { DetailsComponent} from './details.component';

@NgModule({
    imports: [
        BrowserModule,
        MaterializeModule,
        detailsRouting
    ],
    declarations: [
        DetailsComponent
    ]
})
export class ChildrenModule { } //

And to finish, in both module, I simply put a template with a MD modal :

<a materialize="leanModal" [materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger blue" href="#missionAccept">
                <i class="material-icons left">check</i>Accepter
            </a>

I thought that it would definitely resolve my problem, but no.

I have :

can't bind to 'materializeParams' since it isn't a known property of 'a'

like it never imported MaterializeDirective.

I'm on this issue since hours now, where might it come from ?

edit

That resolved my problem :

in my MaterializeModule, never forget to export the directives :

@NgModule({
    ...
    exports: [ MaterializeDirective ]
})

回答1:

The key here is to use a shared module per the instructions on angular.io. You create the module and import anything you want shared with other modules. To use them, you import the sharedmodule into the module where you need the directives or pipes.

Here is my shared module:

import { NgModule, ModuleWithProviders } from '@angular/core';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { AuthorizationService } from '../services/authorization.service';
import { LoginService } from '../services/login.service';
import { RegisterService } from '../services/register.service';
import { ValidationService } from '../services/validation.service';
import { AppMenuService } from '../services/appMenu.service';
import { AuthGuardService } from '../services/authGuard.service';
import {InputTextModule, GalleriaModule, MenubarModule } from 'primeng/primeng'

@NgModule({
   imports: [ CommonModule, RouterModule, HttpModule, MenubarModule, 
              GalleriaModule, InputTextModule ],
   declarations: [ ], 
   exports:  [ CommonModule, ReactiveFormsModule, HttpModule, RouterModule, 
               MenubarModule, GalleriaModule, InputTextModule ] 
})

export class SharedModule {
  static forRoot(): ModuleWithProviders {
  return {
     ngModule: SharedModule,
     providers: [ AppMenuService, AuthorizationService, LoginService, 
                  RegisterService, ValidationService, AuthGuardService ]
      };
   }
}

Since its shareable, I use it all over my app.

来源：https://stackoverflow.com/questions/39278573/cant-load-shared-directives-of-a-ngmodule-in-other-ngmodules