Repository: angular
Issue: Elements lazy load make unable to use providers in modules
Labels: type: bug/fix,workaround2: non-obvious,area: elements,state: confirmed,P3

<!--🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅

Oh hi there! 😄

To expedite issue processing please search open and closed issues before submitting a new one.
Existing issues often contain information about workarounds, resolution, or progress updates.

🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅-->


# 🐞 bug report

### Affected Package
<!-- Can you pin-point one or more @angular/* packages as the source of the bug? -->
The issue is caused by package @angular/elements.


### Is this a regression?

<!-- Did this behavior use to work in the previous version? -->
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](https://github.com/richardlnnr/angular-lazy-load-injectable/blob/master/src/app/feature/content/content.service.ts#L3)

[The providers in the module under a Lazy load route](https://github.com/richardlnnr/angular-lazy-load-injectable/blob/master/src/app/feature/content/content.module.ts#L13)

## 🔬 Minimal Reproduction
<!--
Please create and share minimal reproduction of the issue starting with this template: https://stackblitz.com/fork/angular-ivy
-->
https://richardlnnr.github.io/angular-lazy-load-injectable/

https://github.com/richardlnnr/angular-lazy-load-injectable

<!--
If StackBlitz is not suitable for reproduction of your issue, please create a minimal GitHub repository with the reproduction of the issue.
A good way to make a minimal reproduction is to create a new app via `ng new repro-app` and add the minimum possible code to show the problem.
Share the link to the repo below along with step-by-step instructions to reproduce the problem, as well as expected and actual behavior.

Issues that don't have enough info and can't be reproduced will be closed.

You can read more about issue submission guidelines here: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-submitting-an-issue
-->

## 🔥 Exception or Error
<pre><code>
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)
</code></pre>

<pre><code>
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)
</code></pre>


## 🌍  Your Environment

**Angular Version:**
<pre><code>
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
</code></pre>

**Anything else relevant?**
<!-- ✍️Is this a browser specific issue? If so, please specify the browser and version. -->

<!-- ✍️Do any of these matter: operating system, IDE, package manager, HTTP server, ...? If so, please mention it below. -->