title: Angular5: Dynamic component loading - StaticInjector error with @angular/core dependencies
body: <p>I am migrating an electron application from AngularJS to Angular5 and I am facing issues in a part where I need to load an arbitrary module with its components and render the main component to the view dynamically (it's an addon system).
  In my application, an addon is an angular5 module containing a component which is rendered in my angular5 application.</p>
  
  <p>I load dynamically the component like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>@ViewChild("view", { read: ViewContainerRef })
  view: ViewContainerRef;
  
  constructor(
    // ...
    private compiler: Compiler,
    private injector: Injector,
    private moduleRef: NgModuleRef&lt;any&gt;
  ) {}
  </code></pre>
  
  <p>then, </p>
  
  <pre class="lang-js prettyprint-override"><code>const addonModule = addonObject.getModule();
  this.compiler
    .compileModuleAndAllComponentsAsync(addonModule)
    .then(factories =&gt; {
      const factory = factories.componentFactories.find(
        componentFactory =&gt;
          addonObject.getViewComponent().name ==
          componentFactory.componentType.name
      );
      if (factory) {
        const cmpRef = factory.create(this.injector, [], null, this.moduleRef);
        cmpRef.instance.config = {
          from: "afd@test.com",
          apikey: "dsfkjd"
        };
        this.view.insert(cmpRef.hostView);
      }
    });
  </code></pre>
  
  <p>it works great but when I add Material Component in the template, it fails at <code>factory.create()</code> with this error:</p>
  
  <p>template:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
      &lt;button mat-button&gt;test&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>error:</p>
  
  <pre><code>ERROR Error: Uncaught (in promise): Error: StaticInjectorError[Renderer2]: 
    StaticInjectorError[Renderer2]: 
      NullInjectorError: No provider for Renderer2!
  </code></pre>
  
  <p>or</p>
  
  <p>template:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div fxLayout="row" fxFlex&gt;
      test
  &lt;/div&gt;
  </code></pre>
  
  <p>error:</p>
  
  <pre><code>ERROR Error: Uncaught (in promise): Error: StaticInjectorError[MediaMonitor]: 
    StaticInjectorError[MediaMonitor]: 
      NullInjectorError: No provider for MediaMonitor!
  </code></pre>
  
  <p>The Material modules seems well imported in my addon module else if it's not loaded I have different behaviors: it ignores directives (e.g. <code>&lt;button mat-button&gt;&lt;/button&gt;</code> is just a <code>&lt;button&gt;&lt;/button&gt;</code> without material effect and without errors) and material component throw errors (e.g. <code>&lt;mat-card&gt;test&lt;mat-card&gt;</code> throws <code>Error: Template parse errors: 'mat-card' is not a known element...</code>)</p>
  
  <p>I have tried to bundle the dynamic module in many different ways: tsc / ngc / ng-packagr / webpack.</p>
  
  <p>The bundle is working when I import it normally (static) in the NgModule of another app built with ng-cli.</p>
  
  <p>Does someone know how to render dynamically a component which has material component/directive used in the template like fxFlex / mat-button / mat-card ?</p>
  
  <p>EDIT: I have made a reproduction of the bug with SystemJS here: <a href="https://github.com/thyb/repro-dynamic-loading" rel="nofollow noreferrer">https://github.com/thyb/repro-dynamic-loading</a></p>
  
  <p>Angular: 5.0.2</p>
  
  <p>Angular Material: 5.0.0-rc1</p>