Angular跨模块导入后 为何组件TS仍需单独引入组件/指令

你混淆了Angular NgModule的依赖管理规则和TypeScript源码的引用规则，二者是完全独立的机制：

• NgModule层的imports/exports配置，仅作用于模板编译阶段：只要模块正确导出了组件、指令，当前模块下的组件模板就可以直接用对应选择器，不需要重复声明，这套机制不会自动把类注入到TS文件的作用域中。
• TypeScript编译要求：只要你在TS代码中直接使用某个类的类名（比如@ViewChild()中传入指令类做查询令牌、createComponent()中传入组件类做动态加载参数），就必须在当前TS文件顶部显式写import语句引入对应类，这个要求和NgModule的配置没有任何关联。

你之前认为「导入了导出对应组件/指令的模块，就不需要在组件TS里单独引入类」的认知是错误的，你现在在webpage.component.ts顶部写的两个NavbarComponent、ComponentLoaderDirective的导入语句不是冗余代码，是动态加载场景下必须存在的合法代码。

你的objects.module.ts存在配置错误：当前写法把整个components数组作为单个元素传入了declarations和exports数组，Angular不会自动展开嵌套数组，会导致组件、指令实际未被正确声明/导出，运行时会抛错。需要修改为展开运算符写法：

@NgModule({
  declarations: [...components],
  imports: [CommonModule, MaterialModule],
  exports: [...components]
})
export class ObjectsModule {}

如果你使用的是Angular 14及以上版本的独立组件（standalone: true），规则也是一致的：组件元数据里的imports数组仅负责让模板识别对应选择器，TS代码里用到类的时候依然需要显式写import语句引入。

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