Angular 2/5懒加载模块中指令声明及复用问题

这个坑我之前踩过！Angular的核心规则就是：同一个指令、组件或者管道绝对不能被多个模块直接声明，哪怕是懒加载的子模块也不例外。你现在把AddDirective同时放在SharedModule和GdprModule里声明，肯定会触发那个重复声明的错误，下面给你最标准的解决方案：

方案一：创建专门的指令共享模块（推荐） #

专门建一个只用来托管复用指令的模块，职责单一，后续维护起来更清晰：

1. 新建一个模块文件（比如directive-shared.module.ts），在里面唯一一次声明AddDirective并导出它：

import { NgModule } from '@angular/core';
import { AddDirective } from './path-to-your-add.directive';

@NgModule({
  declarations: [AddDirective], // 只在这里声明！
  exports: [AddDirective] // 导出指令，让其他模块能访问到
})
export class DirectiveSharedModule { }

2. 在需要使用AddDirective的SharedModule和GdprModule中，只需要导入这个共享模块就行，绝对不要再在这两个模块里声明AddDirective：
   比如SharedModule的修改：

import { NgModule } from '@angular/core';
import { DirectiveSharedModule } from './directive-shared.module';
// 其他必要的导入...

@NgModule({
  imports: [DirectiveSharedModule], // 导入共享模块
  declarations: [/* 这里只放SharedModule自己的组件/指令/管道 */],
  exports: [
    DirectiveSharedModule, // 如果其他模块要通过SharedModule用这个指令，可以导出共享模块
    // 其他需要导出的内容
  ]
})
export class SharedModule { }

GdprModule同理：

import { NgModule } from '@angular/core';
import { DirectiveSharedModule } from './directive-shared.module';
// 其他必要的导入...

@NgModule({
  imports: [DirectiveSharedModule], // 导入共享模块
  declarations: [/* GdprModule自己的组件/指令/管道 */],
  // 按需导出内容
})
export class GdprModule { }

方案二：复用现有SharedModule（如果合适） #

如果你不想新建模块，也可以直接用现有的SharedModule来托管AddDirective：

1. 只在SharedModule里声明AddDirective并导出它：

import { NgModule } from '@angular/core';
import { AddDirective } from './path-to-your-add.directive';
// 其他导入...

@NgModule({
  declarations: [AddDirective, /* SharedModule其他声明 */],
  exports: [AddDirective, /* SharedModule其他导出 */]
})
export class SharedModule { }

2. 然后在GdprModule里导入SharedModule即可，同样不要在GdprModule里声明AddDirective。

补充说明 #

为什么父模块声明不行？因为你的子模块是懒加载的，懒加载模块是完全独立的模块，不会自动继承父模块的声明内容——只有当懒加载模块主动导入某个模块时，才能使用该模块导出的指令/组件。所以父模块声明的指令，懒加载子模块是访问不到的，必须通过“声明在一个模块+导出+其他模块导入”的方式来复用。

内容的提问来源于stack exchange，提问作者Nico Schuck