Angular 5.x集成bn-ng-idle 2.0.1时出现Injectable读取错误求助

环境信息 #

• 使用库："bn-ng-idle": "2.0.1"
• Angular CLI: 1.7.4
• Angular: 5.2.1

执行ng serve时的错误 #

bn-ng-idle.mjs:32 Uncaught TypeError: Cannot read properties of undefined (reading 'Injectable')
at eval (bn-ng-idle.mjs:32:162)
at ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs (vendor.bundle.js:1958:1)
at __webpack_require__ (inline.bundle.js:55:30)
at eval (app.module.ts:20:1)
at ./src/app/app.module.ts (main.bundle.js:60:1)
at __webpack_require__ (inline.bundle.js:55:30)
at eval (main.ts:4:1)
at ./src/main.ts (main.bundle.js:1123:1)
at __webpack_require__ (inline.bundle.js:55:30)
at 0 (main.bundle.js:1131:18)

VS Code控制台警告 #

WARNING in ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs
32:143-161 "export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'

WARNING in ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs
32:23-44 "export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'

WARNING in ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs
33:24-48 "export 'ɵɵngDeclareInjectable' (imported as 'i0') was not found in '@angular/core'

WARNING in ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs
34:0-27 "export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'

WARNING in ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs
43:141-159 "export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'

WARNING in ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs
43:22-43 "export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'

WARNING in ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs
44:22-44 "export 'ɵɵngDeclareNgModule' (imported as 'i0') was not found in '@angular/core'

WARNING in ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs
45:22-44 "export 'ɵɵngDeclareInjector' (imported as 'i0') was not found in '@angular/core'

WARNING in ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs
46:0-27 "export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'

解决步骤 #

原因分析 #

bn-ng-idle 2.0.1是为Angular 12及以上版本开发的，使用了Angular 5中不存在的内部编译API（如ɵɵngDeclareFactory、ɵɵngDeclareInjectable等），导致旧版本Angular无法识别这些导出项，从而抛出错误和警告。

操作步骤 #

1. 卸载当前版本的bn-ng-idle：

npm uninstall bn-ng-idle

2. 安装兼容Angular 5的1.x版本：

npm install bn-ng-idle@1.0.1 --save

3. 重新启动项目：

ng serve

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