Angular 18跨项目导入组件依赖路径配置及NG0203错误问题

问题概述 #

使用Angular 18，尝试将app1项目中的reusable.component.ts组件直接导入到app2项目，要求组件依赖从app2的node_modules加载而非app1自身目录。目前组件能正常导入，但ng serve开发模式下控制台抛出NG0203注入上下文错误，生产构建可正常运行。

文件夹结构 #

root
├──app1
│  ├──...
│  ├──node_modules
│  ├──src
│  │  ├──...
│  │  ├──app
│  │  │  ├──...
│  │  │  ├──reusable.component.ts
│  
├──app2
│  ├──...
│  ├──node_modules
│  ├──src
│  │  ├──...
│  │  ├──app
│  │  │  ├──...
│  │  │  ├──app.component.ts

相关代码 #

app1/src/app/reusable.component.ts

import { Component } from '@angular/core'; // 需要从app2/node_modules导入

@Component({
  selector: 'reusable-component',
  standalone: true,
  template: 'Reusable Component',
})
export class ReusableAppComponent {
  title = 'ReusableAppComponent';
}

app2/src/app/app.component.ts

import { Component } from '@angular/core';
import { ReusableAppComponent } from '../../../app1/src/app/reusable.component' // 修正原路径笔误

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReusableAppComponent],
  template: '<reusable-component></reusable-component>',
})
export class AppComponent {
  title = 'app2';
}

已尝试操作及错误信息 #

• 环境搭建：用ng new初始化两个项目，删除app1/node_modules
• 修改app2/tsconfig.json的compilerOptions添加路径映射
• 错误信息：

ERROR RuntimeError: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`.
    at injectInjectorOnly (main.js:650:11)
    at ɵɵinject (main.js:660:59)
    at Object.factory (main.js:14888:45)
    at chunk-IMMNNYUP.js?v=a145dfc3:1965:35
    at runInInjectorProfilerContext (chunk-IMMNNYUP.js?v=a145dfc3:567:5)
    at R3Injector.hydrate (chunk-IMMNNYUP.js?v=a145dfc3:1964:11)
    at R3Injector.get (chunk-IMMNNYUP.js?v=a145dfc3:1854:23)
    at definition.getStandaloneInjector (main.js:14895:27)
    at ComponentFactory.create (chunk-IMMNNYUP.js?v=a145dfc3:9692:53)
    at _ApplicationRef.bootstrap (chunk-IMMNNYUP.js?v=a145dfc3:18388:38)

更新：该错误仅在ng serve开发模式下出现，生产构建可正常运行。

解决方案 #

方案一：使用Angular Library（推荐，彻底避免依赖冲突） #

1. 在app1项目中生成Angular库：

ng generate library reusable-components

2. 将reusable.component.ts的代码迁移到库的组件文件中，确保组件标记为standalone并导出。
3. 构建库：

ng build reusable-components

4. 在app2项目中本地安装该库：

npm install ../app1/dist/reusable-components

5. 在app2中直接从库导入组件：

import { ReusableAppComponent } from 'reusable-components';

这种方式下，库会自动复用app2的node_modules依赖，不会出现多实例问题，同时支持开发模式热更新。

方案二：调整开发服务器配置（适合直接引用源码场景） #

1. 完善tsconfig.json路径映射：确保所有Angular相关依赖都指向app2的node_modules，避免多实例加载：

// app2/tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@angular/*": ["node_modules/@angular/*"],
      "rxjs": ["node_modules/rxjs"],
      "tslib": ["node_modules/tslib"]
    }
  }
}

2. 开启preserveSymlinks：修改app2的angular.json，在开发服务器选项中添加preserveSymlinks: true，确保跨目录导入的模块被正确解析：

// app2/angular.json
"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "app2:build",
      "preserveSymlinks": true
    }
  }
}

3. 清理缓存并重启开发服务器：

ng serve --clearCache

原因分析 #

开发模式下，Angular DevServer默认的模块解析逻辑可能无法正确处理跨项目的源码引用，导致@angular/core等核心依赖被加载多个实例，注入上下文无法共享，从而触发NG0203错误。生产构建时，打包工具会自动合并重复依赖，因此不会出现该问题。

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