Elements lazy load make unable to use providers in modules

🐞 bug report

Affected Package

The issue is caused by package @angular/elements.

Is this a regression?

I’m not sure.

Description

When you export a Custom Element that contains a lazy load module, you aren’t able to create a service without the providedIn: ‘root’. If you create a service with a @Injectable() and than make the provider in a module under the lazy load module, it’ll break the application and throw a no provider error.

The service code

The providers in the module under a Lazy load route

🔬 Minimal Reproduction

https://richardlnnr.github.io/angular-lazy-load-injectable/

https://github.com/richardlnnr/angular-lazy-load-injectable

🔥 Exception or Error

core.js:6228 ERROR NullInjectorError: R3InjectorError(AppModule)[ContentService -> ContentService -> ContentService]: 
  NullInjectorError: No provider for ContentService!
    at NullInjector.get (http://localhost:4200/vendor.js:8310:27)
    at R3Injector.get (http://localhost:4200/vendor.js:22304:33)
    at R3Injector.get (http://localhost:4200/vendor.js:22304:33)
    at R3Injector.get (http://localhost:4200/vendor.js:22304:33)
    at NgModuleRef$1.get (http://localhost:4200/vendor.js:39605:33)
    at Object.get (http://localhost:4200/vendor.js:37339:35)
    at getOrCreateInjectable (http://localhost:4200/vendor.js:12112:39)
    at Module.ɵɵdirectiveInject (http://localhost:4200/vendor.js:26119:12)
    at NodeInjectorFactory.ContentComponent_Factory [as factory] (http://localhost:4200/feature-feature-module.js:26:162)
    at getNodeInjectable (http://localhost:4200/vendor.js:12257:44)

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[ContentService -> ContentService -> ContentService]: 
  NullInjectorError: No provider for ContentService!
NullInjectorError: R3InjectorError(AppModule)[ContentService -> ContentService -> ContentService]: 
  NullInjectorError: No provider for ContentService!
    at NullInjector.get (core.js:1085)
    at R3Injector.get (core.js:16955)
    at R3Injector.get (core.js:16955)
    at R3Injector.get (core.js:16955)
    at NgModuleRef$1.get (core.js:36329)
    at Object.get (core.js:33972)
    at getOrCreateInjectable (core.js:5848)
    at Module.ɵɵdirectiveInject (core.js:21103)
    at NodeInjectorFactory.ContentComponent_Factory [as factory] (content.component.ts:9)
    at getNodeInjectable (core.js:5993)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41632)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)

🌍 Your Environment

Angular Version:

Angular CLI: 9.1.7
Node: 10.18.0
OS: linux x64

Angular: 9.1.9
... animations, common, compiler, compiler-cli, core, elements
... forms, platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.7
@angular-devkit/build-angular     0.901.7
@angular-devkit/build-optimizer   0.901.7
@angular-devkit/build-webpack     0.901.7
@angular-devkit/core              9.1.7
@angular-devkit/schematics        9.1.7
@angular/cli                      9.1.7
@ngtools/webpack                  9.1.7
@schematics/angular               9.1.7
@schematics/update                0.901.7
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

Anything else relevant?

[gkalpak]

It turns out my analysis in https://github.com/angular/angular/issues/37441#issuecomment-639737971 is completely wrong 😁 I didn’t realize that you are importing ContentModule in FeatureModule and therefore it should work.

The problem seems to be how we create the component in @angular/elements and in particular how we pass in the injector. This line seems to be the problem:

https://github.com/angular/angular/blob/1197965e69d658c92422d49b1f2a1ba90498af67/packages/elements/src/component-factory-strategy.ts#L153

Replacing that with Injector.NULL (which is how components are created outside of @angular/elements) seems to fix the problem. I am not an expert on Injectors, so I am not sure what is the correct way to fix this (and how much of a breaking change it will be).

[wellingtonngallo]

I have the same problem here