Angular 19：同一模块组件无需导入调用的实现方案

核心答案 #

同一NgModule下的组件完全可以互相调用，想要“不直接导入目标组件”实现调用，分两种场景处理：

场景1：组件是非独立组件（未设置standalone: true） #

非独立组件必须声明在NgModule的declarations数组中，同一模块内的这类组件直接通过选择器就能调用，无需在组件级别导入对方。

场景2：组件是独立组件（即你当前使用的类型，设置了standalone: true） #

独立组件默认是隔离状态，要实现不直接导入目标组件的调用，可通过共享NgModule的方式完成：

1. 确保目标组件已添加到NgModule的imports和exports数组中（你的代码这部分逻辑是对的）
2. 在调用方组件的@Component.imports数组中导入该NgModule，而非直接导入目标组件

针对你代码的修正方案 #

修正后的 partone.module.ts #

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { componentone } from './components/one/one.component';
import { componenttwo } from './components/two/two.component';

@NgModule({
  // 独立组件无需放入declarations，保持为空即可
  declarations: [],
  imports: [
    CommonModule,
    componentone,
    componenttwo
  ],
  exports: [
    componentone,
    componenttwo
  ]
})
export class partoneModule { }

修正后的 one.component.ts（无需直接导入componenttwo） #

import { Component } from '@angular/core';
import { partoneModule } from '../../partone.module'; // 导入共享模块

@Component({
  selector: 'comp-one',
  imports: [partoneModule], // 导入模块而非直接导入componenttwo
  standalone: true,
  templateUrl: './one.component.html',
  styleUrl: './one.component.scss'
})
export class componentone { }

two.component.ts（无需修改） #

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

@Component({
  selector: 'comp-two',
  imports: [],
  standalone: true,
  templateUrl: './two.component.html',
  styleUrl: './two.component.scss'
})
export class componenttwo { }

one.component.html（无需修改） #

<comp-two></comp-two>

原理说明 #

当你把partoneModule导入到componentone的imports中时，模块导出的componenttwo会自动对componentone开放访问权限，这样就实现了“不直接导入目标组件”的调用需求。

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