Angular 18独立组件类库构建与引入问题排查求助

核心错误是你在类库的源码目录执行npm pack，而非构建后的产物目录，导致安装的是未编译的源码文件，而非Angular可识别的类库包。

修正后的完整操作步骤 #

1. 重新构建并打包类库 #

在类库工作区根目录（lib文件夹）执行以下命令：

# 明确构建类库项目
ng build test-lib
# 进入构建后的产物目录
cd dist/test-lib
# 打包生成可用的类库包
npm pack

此时生成的test-lib-0.0.1.tgz才是包含编译后代码、类型声明的合法包。

2. 在测试项目中安装正确的包 #

回到测试项目（test文件夹）根目录，安装刚生成的产物包：

npm install {你的完整路径}/lib/dist/test-lib/test-lib-0.0.1.tgz -S

3. 正确导入使用组件 #

在app.component.ts中正常导入，并添加到独立组件的imports数组：

import { Component } from '@angular/core';
import { TestLibComponent } from 'test-lib';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TestLibComponent], // 必须添加这一行
  template: `<app-test-lib></app-test-lib>`,
})
export class AppComponent {}

为什么之前的操作会出错 #

• projects/test-lib是类库的源码目录，未经过Angular编译打包，其package.json中的入口配置（main、module、types）指向的是源码文件，TypeScript无法识别为合法模块，因此出现Cannot find module错误。
• 直接导入test-lib/src/public-api会指向未编译的源码，而Angular默认会排除node_modules中的源码文件参与编译，因此出现编译错误。

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