title: Error : NullInjectorError: No provider for CompilerFactory! when I try to run 2 angular elements in the same page
body: <p>I have two projects (2 widgets) , when I use these widgets individually it works fine but I want to use them in the same page so i follow this tutoriel : <a href="https://myview.rahulnivi.net/running-multiple-angular-elements-page/" rel="nofollow noreferrer">https://myview.rahulnivi.net/running-multiple-angular-elements-page/</a> . But unfortunately i got this error : Error : NullInjectorError: No provider for CompilerFactory!
    this is my index.html :</p>
  
  <pre><code>  &lt;!doctype html&gt;
    &lt;html lang="en"&gt;
    &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;ExampleHighchart&lt;/title&gt;
    &lt;base href="/"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="C:/Users/hiba.nebli/Desktop/hiba-exercice/example- 
    highchart/dist/example-highchart/favicon.ico"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&amp;display=swap" 
    rel="stylesheet"&gt;
    &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" href="C:/Users/hiba.nebli/Desktop/hiba-exercice/example- 
    highchart/dist/example-highchart/styles.css"&gt;&lt;/head&gt;
    &lt;body class="mat-typography"&gt;
  
    &lt;script src="C:/Users/Desktop/example-highchart/node_modules/@webcomponents/custom- 
   elements/src/native-shim.js"&gt;&lt;/script&gt;
  &lt;script src="C:/Users/Desktop/example-highchart/node_modules/@webcomponents/custom-elements/custom-elements.min.js"&gt;&lt;/script&gt;
  &lt;script src="C:/Users/Desktop/example-highchart/node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
  &lt;script src="C:/Users/Desktop/example-highchart/node_modules/rxjs/bundles/rxjs.umd.js"&gt;&lt;/script&gt;
  &lt;script src="C:/UsersDesktop/example-highchart/node_modules/@angular/core/bundles/core.umd.js"&gt;&lt;/script&gt;
  &lt;script src="C:/Users/Desktop/example-highchart/node_modules/@angular/common/bundles/common.umd.js"&gt;&lt;/script&gt;
  &lt;script src="C:/Users/Desktop/example-highchart/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"&gt;&lt;/script&gt;
  &lt;script src="C:/Users/Desktop/example-highchart/node_modules/@angular/elements/bundles/elements.umd.js"&gt;&lt;/script&gt;
  &lt;script src="C:/Users/Desktop/example-highchart/dist/example-highchart/main.js"&gt;&lt;/script&gt;
  &lt;script src="C:/Users/Desktop/front-exercice/dist/front-exercice/main.js"&gt;&lt;/script&gt;
  
  &lt;!-- Calling Custom Element --&gt;
  &lt;app-message class="kx-page__header kx-flex"&gt;&lt;/app-message&gt;
  &lt;div &gt;
  &lt;app-tab  style="position:fixed; left:0;bottom:0;background-color:#1a293e;color:white;text-align:center"&gt;&lt;/app-tab&gt;
  &lt;/div&gt;
  &lt;script src="C:/Users/Desktop/example-highchart/dist/example-highchart/runtime.js" defer&gt;&lt;/script&gt; 
  &lt;script src="C:/Users/hiba.nebli/Desktop/example-highchart/dist/example-highchart/polyfills.js" 
  defer&gt;&lt;/script&gt;&lt;script src="C:/Users/Desktop/example-highchart/dist/example-highchart/main.js" defer&gt; 
  &lt;/script&gt;&lt;/body&gt;
  &lt;/html&gt;'
  </code></pre>
  
  <p>this is the App.module.ts:</p>
  
  <pre><code>'import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { HighchartsChartModule } from 'highcharts-angular';
  import {HttpClientModule } from '@angular/common/http';
  import { HighchartComponent } from './highchart/highchart.component';
  import { BooksnameService } from './booksname.service';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import {  MatFormFieldModule} from '@angular/material/form-field';
  import { FormsModule } from '@angular/forms';
  import {MatInputModule} from '@angular/material/input';
  import {MatButtonModule} from '@angular/material/button';
  import  { Injector} from '@angular/core';
  import  { createCustomElement } from '@angular/elements';
  @NgModule({
  declarations: [
  AppComponent,
  HighchartComponent
  ],
  imports: [
  BrowserModule,
  AppRoutingModule,
  HighchartsChartModule,
  HttpClientModule,
  BrowserAnimationsModule,
  MatFormFieldModule,
  FormsModule,
  MatInputModule,
  MatButtonModule
  ],
  exports: [HighchartComponent],
  providers: [BooksnameService],
  entryComponents: [HighchartComponent],
  
  
  })
  export class AppModule {
  constructor(private injector: Injector) {
  const customElement = createCustomElement(HighchartComponent, { injector });
  customElements.define('app-message', customElement);
  }
  
  ngDoBootstrap() {
  
  }
  }
  </code></pre>
  
  <p>And when I run the index.html i got this error :</p>
  
  <pre><code>injector_compatibility.ts:229 Uncaught NullInjectorError: StaticInjectorError(Platform: core) 
  [CompilerFactory]: 
  NullInjectorError: No provider for CompilerFactory!
  at NullInjector.get (file:///C:/Users/Desktop/example- 
  highchart/node_modules/@angular/core/bundles/core.umd.js:1095:29)
  at resolveToken (file:///C:/Users/Desktop/example- 
  highchart/node_modules/@angular/core/bundles/core.umd.js:11996:28)
  at tryResolveToken (file:///C:/Users/Desktop/example- 
  highchart/node_modules/@angular/core/bundles/core.umd.js:11940:20)
  at StaticInjector.get (file:///C:/Users/Desktop/example- 
  highchart/node_modules/@angular/core/bundles/core.umd.js:11834:24)
  at compileNgModuleFactory__PRE_R3__ (file:///C:/UsersDesktop/example- 
  highchart/node_modules/@angular/core/bundles/core.umd.js:27912:40)
  at PlatformRef.bootstrapModule (file:///C:/Users/Desktop/example- 
  highchart/node_modules/@angular/core/bundles/core.umd.js:28141:20)
  at Module../src/main.ts (file:///C:/Users/Desktop/example-highchart/dist/example- 
  highchart/main.js:51722:77)
  at __webpack_require__ (file:///C:/Users/Desktop/example-highchart/dist/example- 
  highchart/runtime.js:80:30)
  at Object.0 (file:///C:/Users/Desktop/example-highchart/dist/example-highchart/main.js:51735:18)
  at __webpack_require__ (file:///C:/Users/Desktop/example-highchart/dist/example- 
  highchart/runtime.js:80:30)
  </code></pre>