Angular Ivy的延迟加载:没有提供InjectionToken ng-select-selection-model

时间:2019-12-10 22:25:52

标签: angular lazy-loading angular-ngselect angular-ivy

错误说明 我使用的是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$1.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.克隆示例存储库git clone https://github.com/boltex/ivy-lazyload-test 2.运行npm install以获取所有依赖项 3.运行ng serve

预期的行为 使用ng serve在本地尝试时,当程序在浏览器中加载时,请按“延迟加载模块并在下面添加组件实例”按钮。 (这会将一些组件实例添加到应用程序中)。组件中应具有ng-select选项。否,控制台中出现强行错误。

注意 忽略控制台中的第一个错误:未捕获的TypeError:ng.probe不是函数 使用angular 9时会出现一个正常错误,因为如果存在window.ng,则预示功能会假定Angular dev模式处于活动状态,但ivy现在不会导出探针。

以下是屏幕截图 image

我的当前设置  -操作系统:[Windows 10]  -浏览器[chrome]  -版本[78.0.3904.108(正式版本)(64位)]

感谢您的时间和精力来解决这个问题!

1 个答案:

答案 0 :(得分:0)

我已经找到了@HeroDev的“ hero-loader”组件的解决方案。 (请参见其相对简短的源代码,了解其使用的其他技术:https://github.com/herodevs/herodevs-packages/tree/master/projects

我使用的方法与通过延迟加载将componnent,3rd party或其他方式集成到现有应用程序中的所有方法并不完全兼容。 (不使用路由)

我已经通过一个有效的示例更新了存储库https://github.com/boltex/ivy-lazyload-test,在其中您可以在打开的应用程序中添加和删除任意数量的不同模块和组件,而无需更改路由。