Angular 17独立项目构建库时public-api路径解析错误求助

你遇到的问题核心是导入库组件时用了错误的路径——Angular库应该通过库名称别名导入，而非直接引用dist目录下的文件。以下是具体的解决步骤：

1. 修正导入路径 #

打开src/app/layout/standard/standard.component.ts，把指向dist的相对路径导入替换为库的别名导入。
原错误导入：

import { TestComponent } from '../../../../dist/test/public-api';

替换为（@your-workspace/test是创建库时自动生成的别名，可查看根目录tsconfig.json的compilerOptions.paths确认）：

import { TestComponent } from '@your-workspace/test';

2. 确认public-api.ts的导出配置 #

检查projects/test/src/public-api.ts文件，确保已正确导出TestComponent：

export * from './lib/test.component';

如果没有这条语句，手动添加，否则应用无法识别库中的组件。

3. 调整构建运行顺序 #

不要在同一个终端同时运行库构建监听和应用服务：

1. 第一个终端执行库的构建监听：

ng build test --watch

2. 打开第二个终端，待库构建完成后再启动应用：

ng serve

确保库先生成dist文件，应用启动时才能正确解析依赖。

4. 独立组件的导入配置 #

如果StandardComponent是独立组件，需要在组件的imports数组中添加TestComponent（或库对应的NgModule）：

@Component({
  selector: 'app-standard',
  standalone: true,
  imports: [TestComponent], // 若库基于NgModule，则导入TestModule
  templateUrl: './standard.component.html',
  styleUrls: ['./standard.component.css']
})
export class StandardComponent {}

5. 验证tsconfig路径映射 #

检查根目录tsconfig.json和tsconfig.app.json的compilerOptions.paths，确保两者都包含库的路径配置，示例：

{
  "compilerOptions": {
    "paths": {
      "@your-workspace/test": [
        "projects/test/src/public-api.ts"
      ]
    }
  }
}

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