Angular SharedModule声明EditableComponent后导入不生效问题排查

问题原因及修复方案 #

以下是你的配置中存在的三处核心问题，按优先级修复即可：

1. SharedDeclarationsModule未导入CommonModule
   你封装的ViewModeDirective、EditModeDirective均为结构型指令，依赖Angular CommonModule提供的基础结构指令能力，所有自定义模块只要用到Angular内置指令、自定义结构型指令，都必须在自身的imports数组中导入CommonModule。
2. 依赖指令未跨模块暴露
   EditableComponent的正常运行依赖FocusableDirective，但你将该指令声明在了UserModule中，SharedDeclarationsModule内的组件无法访问其他模块中声明且未导出的内容。
3. 拼写错误隐患
   你导入SharedDeclarationsModule的路径中文件名写为shared.declarstions.module，正确拼写应为shared.declarations.module，拼写错误会直接导致模块导入失效。

修正后代码示例 #

SharedDeclarationsModule

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

import { EditableComponent } from './table-edittable/editable.component';
import { ViewModeDirective } from './table-edittable/view-mode.directive';
import { EditModeDirective } from './table-edittable/edit-mode.directive';
import { EditableOnEnterDirective } from './table-edittable/editable-on-enter.directive';
// 引入FocusableDirective并移至当前模块管理
import { FocusableDirective } from '你的对应文件路径';

@NgModule({
  imports: [CommonModule],
  declarations: [
    EditableComponent,
    ViewModeDirective,
    EditModeDirective,
    EditableOnEnterDirective,
    FocusableDirective
  ],
  exports: [
    EditableComponent,
    ViewModeDirective,
    EditModeDirective,
    EditableOnEnterDirective,
    FocusableDirective
  ]
})
export class SharedDeclarationsModule {
}

UserModule

import { SharedDeclarationsModule } from '../../layout-module/shared.declarations.module';

@NgModule({
  declarations: [
    UserComponent,
    LeftsideComponent,
    DetailComponent
    // 删除已经移至SharedDeclarationsModule的FocusableDirective
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    CommonModule,
    SharedModule,
    MatCheckboxModule,
    FormsModule,
    MatGridListModule,
    SharedDeclarationsModule
  ],
  exports: [
    UserComponent,
    LeftsideComponent,
    DetailComponent
    // 无需导出SharedDeclarationsModule，除非上层导入UserModule的模块需要用到其中的组件指令
  ]
})
export class UserModule { }

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