Search code examples
angularlazy-loadingangular-ngselectangular-ivy

Lazy-loading with Angular Ivy : No provider for InjectionToken ng-select-selection-model

Bug Description I'm using angular's new IVY compiler, along with the new lazy-loading functionality (lazy-loading with ivy tutorial here: https://www.debugbear.com/blog/lazy-loading-angular-components-without-a-router)

When lazy-loading a module and adding an instance of a component to my app, the ng-select does not appear in the component and I get this error in the console:

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)

Reproducible example see https://github.com/boltex/ivy-lazyload-test for a minimal repo exposing this bug.

To Reproduce 1. clone the example repo git clone https://github.com/boltex/ivy-lazyload-test 2. run npm install to get all dependencies 3. run ng serve

Expected behavior When trying this locally with ng serve, when the program loads in your browser, press the "Lazy load module & add instance of component below" button. (This will add some components instance into the app) The component should have an ng-select in it. It doesn't and forementionned error appears in the console.

Note Ignore the first error in the console: Uncaught TypeError: ng.probe is not a function It is a normal error to get when using angular 9 because augury assumes angular dev mode is active if window.ng exists, but ivy doesn't export probe right now.

Here's a screenshot image

My Current Setup - OS: [windows 10] - Browser [chrome] - Version [78.0.3904.108 (Official Build) (64-bit)]

Thanks for your time and attention to this issue !

Solution

  • I've found a solution with @HeroDev's 'hero-loader' component. (See their relatively short source code for the additional techniques it uses: https://github.com/herodevs/herodevs-packages/tree/master/projects)

    The method I was using was not fully compatible with all methods of integrating componnent, 3rd party or otherwise, into an existing application by lazy-loading. (Not using routing)

    I've updated my repository https://github.com/boltex/ivy-lazyload-test with a working example where you can add, and remove, arbitrary number of different modules and components into an opened application without changing routes.