Angular 4:无法解析Service所有参数,求助解决方案
我之前也遇到过类似的Angular依赖注入(DI)参数解析问题,结合你描述的场景——引入私有npm仓库的自定义模块、用ng-packagr打包、当前项目用@ngtools/webpack构建——大概率是模块导出配置、导入路径或DI依赖提供者缺失导致的,给你几个针对性的排查和解决步骤:
1. 修正导入路径,避免直接引用src目录
你当前的导入语句直接指向了模块的src目录:
import { MyHeaderModule } from 'my-header/src/app/modules/my-header/my-header.module'; import { PORTAL_URL, MAINHOME_URL, CURRENT_USER_LOGIN } from 'my-header/src/app/modules/my-base/base.service';
这种写法是错误的,因为ng-packagr打包后的npm包,src目录属于源码目录,不会被正确导出到包的发布结构中。你应该通过包的公开导出入口来导入,也就是自定义模块项目中public-api.ts里声明的导出项,正确的导入方式应该是:
import { MyHeaderModule, PORTAL_URL, MAINHOME_URL, CURRENT_USER_LOGIN } from 'my-header';
同时要确保自定义模块的public-api.ts已经包含了这些导出内容:
// my-header项目的public-api.ts export * from './src/app/modules/my-header/my-header.module'; export * from './src/app/modules/my-base/base.service';
2. 检查服务的@Injectable配置与模块提供者
错误提示中的([object Object], ?)说明服务的第二个构造参数找不到对应的DI提供者,你需要:
- 确认自定义模块中
BaseService的@Injectable装饰器配置正确,比如如果服务是模块级别的,要在MyHeaderModule的providers数组中声明;如果是全局服务,要设置providedIn: 'root'。 - 对于
PORTAL_URL这类注入令牌,要确保它们在MyHeaderModule中被正确提供,比如通过providers数组声明,或者通过forRoot()方法传递配置(如果模块支持的话):
然后在你的主项目中使用// MyHeaderModule的配置示例 @NgModule({ // ...其他配置 providers: [ BaseService, { provide: PORTAL_URL, useValue: '你的门户地址' } ] }) export class MyHeaderModule { static forRoot(config: PortalConfig): ModuleWithProviders { return { ngModule: MyHeaderModule, providers: [ { provide: PORTAL_URL, useValue: config.portalUrl } ] }; } }MyHeaderModule.forRoot(...)来导入。
3. 验证工厂函数的DI依赖配置
你提到的initConfigFactory工厂函数,如果是用来提供CURRENT_USER_LOGIN这类令牌的,要确保工厂函数的依赖被正确声明在deps数组中。比如如果工厂需要依赖某个服务,一定要在提供者配置中注明:
// 主项目app.module.ts中的提供者配置 providers: [ { provide: CURRENT_USER_LOGIN, useFactory: initConfigFactory, deps: [/* 这里填工厂函数需要注入的依赖,比如HttpClient或其他服务 */] } ]
错误中的?就是因为某个依赖没有被声明在deps里,导致Angular无法解析。
4. 检查ng-packagr打包配置与元数据
确保自定义模块用ng-packagr打包时,package.json的配置正确,尤其是ngPackage字段:
{ "ngPackage": { "lib": { "entryFile": "public-api.ts" } } }
打包完成后,检查发布到私有仓库的包中是否包含.d.ts类型文件和metadata.json文件——这些是Angular DI系统识别依赖的关键元数据,如果缺失会导致参数解析失败。
5. 清理缓存并重新构建
缓存问题也可能导致这类奇怪的DI错误,你可以尝试:
- 删除主项目和自定义模块的
node_modules目录 - 清理npm缓存:
npm cache clean --force - 重新安装依赖,重新打包自定义模块并发布到私有仓库,最后重新构建主项目。
6. 验证@ngtools/webpack版本兼容性
Angular 4对应的@ngtools/webpack版本应该是1.x系列,如果你用了更高版本,可能会出现元数据解析不兼容的问题。检查主项目package.json中的@ngtools/webpack版本,确保和Angular 4的版本匹配。
内容的提问来源于stack exchange,提问作者ZloDeeV

