Angular导入自定义npm包报Unexpected value和@NgModule注解错误

问题解决方案 #

1. 检查私有库的模块导出与注解配置 #

• 确认私有库中MyAppModule确实添加了@NgModule()装饰器，且在库的入口文件（通常为public-api.ts/index.ts）中显式导出该模块：

// 私有库入口文件示例
export * from './lib/my-app.module';

• 确认MyAppModule的@NgModule配置中，所有需要对外暴露的组件、指令已加入exports数组，公共服务已通过providedIn: 'root'或模块providers数组声明。

2. 修正库的构建配置 #

Angular库不能直接用tsc编译，必须通过Angular官方构建流程处理元数据：

• 如果你使用Angular CLI管理库项目，必须使用ng build @my_appstore/my-app命令执行构建，不要直接调用tsc
• 检查库的tsconfig.lib.json配置：
  • 禁止将skipTemplateCodegen设为true，该配置会跳过Angular装饰器元数据的生成
  • 如果业务项目使用Angular 12及以上版本，建议在配置中添加"compilationMode": "partial"生成跨版本兼容的部分编译产物

3. 校验私有库的package.json配置 #

发布到AWS的私有库package.json必须包含以下正确的入口配置：

{
  "main": "bundles/@my_appstore-my-app.umd.js",
  "module": "fesm2015/@my_appstore-my-app.js",
  "typings": "@my_appstore-my-app.d.ts",
  "metadata": "@my_appstore-my-app.metadata.json"
}

• 确保构建产物中存在.metadata.json文件，该文件存储了Angular所需的装饰器元信息，缺失会导致业务项目无法识别@NgModule注解
• 确认所有入口路径和实际构建生成的文件路径完全匹配

4. 清理业务项目缓存 #

删除业务项目下的node_modules目录、package-lock.json/yarn.lock文件，重新执行依赖安装，排除缓存导致的依赖加载异常。同时检查业务项目tsconfig.json的paths配置，无和私有库包名冲突的别名规则，避免导入路径错误。

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