使用 Angular Ivy 延迟加载:没有提供 InjectionToken ng-select-selection-model
Lazy-loading with Angular Ivy : No provider for InjectionToken ng-select-selection-model
错误描述
我正在使用 angular 的新 IVY 编译器,以及新的延迟加载功能(此处使用 ivy 延迟加载教程:https://www.debugbear.com/blog/lazy-loading-angular-components-without-a-router)
当延迟加载模块并将组件的实例添加到我的应用程序时,ng-select 没有出现在组件中,我在控制台中收到此错误:
core.js:6354 ERROR NullInjectorError: R3InjectorError(AppModule)[InjectionToken ng-select-selection-model -> InjectionToken ng-select-selection-model -> InjectionToken ng-select-selection-model]:
NullInjectorError: No provider for InjectionToken ng-select-selection-model!
at NullInjector.get (http://localhost:4200/vendor.js:8736:27)
at R3Injector.get (http://localhost:4200/vendor.js:24378:33)
at R3Injector.get (http://localhost:4200/vendor.js:24378:33)
at R3Injector.get (http://localhost:4200/vendor.js:24378:33)
at NgModuleRef.get (http://localhost:4200/vendor.js:40184:33)
at Object.get (http://localhost:4200/vendor.js:38095:35)
at getOrCreateInjectable (http://localhost:4200/vendor.js:12876:39)
at Module.ɵɵdirectiveInject (http://localhost:4200/vendor.js:28245:12)
at NodeInjectorFactory.NgSelectComponent_Factory [as factory] (http://localhost:4200/lazy-lazy-module.js:4143:398)
at getNodeInjectable (http://localhost:4200/vendor.js:13021:44)
可重现的例子
请参阅 https://github.com/boltex/ivy-lazyload-test 以获取暴露此错误的最小回购协议。
重现
1. 克隆示例 repo git clone https://github.com/boltex/ivy-lazyload-test
2. 运行 npm install
获取所有依赖
3.运行ng serve
预期行为
当使用 ng serve 在本地尝试此操作时,当程序加载到浏览器中时,请按 "Lazy load module & add instance of component below" 按钮。 (这会将一些组件实例添加到应用程序中)组件中应该有一个 ng-select。它没有,控制台中出现了预先提到的错误。
备注
忽略控制台中的第一个错误:Uncaught TypeError: ng.probe is not a function
这是使用 angular 9 时出现的正常错误,因为如果 window.ng 存在,Augury 假设 angular 开发模式处于活动状态,但 ivy 现在不导出探测器。
这是截图
我的当前设置
- OS: [windows 10]
- 浏览器 [chrome]
- 版本 [78.0.3904.108(正式版)(64 位)]
感谢您花时间关注此问题!
我找到了使用@HeroDev 的 'hero-loader' 组件的解决方案。
(有关它使用的其他技术,请参阅其相对较短的源代码:https://github.com/herodevs/herodevs-packages/tree/master/projects)
我使用的方法与通过延迟加载将组件、第 3 方或其他方式集成到现有应用程序中的所有方法都不完全兼容。 (不使用路由)
我已经用一个工作示例更新了我的存储库 https://github.com/boltex/ivy-lazyload-test,您可以在其中添加和删除任意数量的不同模块和组件到打开的应用程序中,而无需更改路由。
错误描述 我正在使用 angular 的新 IVY 编译器,以及新的延迟加载功能(此处使用 ivy 延迟加载教程:https://www.debugbear.com/blog/lazy-loading-angular-components-without-a-router)
当延迟加载模块并将组件的实例添加到我的应用程序时,ng-select 没有出现在组件中,我在控制台中收到此错误:
core.js:6354 ERROR NullInjectorError: R3InjectorError(AppModule)[InjectionToken ng-select-selection-model -> InjectionToken ng-select-selection-model -> InjectionToken ng-select-selection-model]:
NullInjectorError: No provider for InjectionToken ng-select-selection-model!
at NullInjector.get (http://localhost:4200/vendor.js:8736:27)
at R3Injector.get (http://localhost:4200/vendor.js:24378:33)
at R3Injector.get (http://localhost:4200/vendor.js:24378:33)
at R3Injector.get (http://localhost:4200/vendor.js:24378:33)
at NgModuleRef.get (http://localhost:4200/vendor.js:40184:33)
at Object.get (http://localhost:4200/vendor.js:38095:35)
at getOrCreateInjectable (http://localhost:4200/vendor.js:12876:39)
at Module.ɵɵdirectiveInject (http://localhost:4200/vendor.js:28245:12)
at NodeInjectorFactory.NgSelectComponent_Factory [as factory] (http://localhost:4200/lazy-lazy-module.js:4143:398)
at getNodeInjectable (http://localhost:4200/vendor.js:13021:44)
可重现的例子 请参阅 https://github.com/boltex/ivy-lazyload-test 以获取暴露此错误的最小回购协议。
重现
1. 克隆示例 repo git clone https://github.com/boltex/ivy-lazyload-test
2. 运行 npm install
获取所有依赖
3.运行ng serve
预期行为 当使用 ng serve 在本地尝试此操作时,当程序加载到浏览器中时,请按 "Lazy load module & add instance of component below" 按钮。 (这会将一些组件实例添加到应用程序中)组件中应该有一个 ng-select。它没有,控制台中出现了预先提到的错误。
备注 忽略控制台中的第一个错误:Uncaught TypeError: ng.probe is not a function 这是使用 angular 9 时出现的正常错误,因为如果 window.ng 存在,Augury 假设 angular 开发模式处于活动状态,但 ivy 现在不导出探测器。
这是截图
我的当前设置 - OS: [windows 10] - 浏览器 [chrome] - 版本 [78.0.3904.108(正式版)(64 位)]
感谢您花时间关注此问题!
我找到了使用@HeroDev 的 'hero-loader' 组件的解决方案。 (有关它使用的其他技术,请参阅其相对较短的源代码:https://github.com/herodevs/herodevs-packages/tree/master/projects)
我使用的方法与通过延迟加载将组件、第 3 方或其他方式集成到现有应用程序中的所有方法都不完全兼容。 (不使用路由)
我已经用一个工作示例更新了我的存储库 https://github.com/boltex/ivy-lazyload-test,您可以在其中添加和删除任意数量的不同模块和组件到打开的应用程序中,而无需更改路由。