Ошибка: NullInjectorError: Нет поставщика для CompilerFactory! когда я пытаюсь запустить 2 angular элементов на той же странице - PullRequest
Новая
       48

Ошибка: NullInjectorError: Нет поставщика для CompilerFactory! когда я пытаюсь запустить 2 angular элементов на той же странице

0 голосов
/ 02 марта 2020

У меня есть два проекта (2 виджета), когда я использую эти виджеты по отдельности, они работают нормально, но я хочу использовать их на той же странице, поэтому я следую этому уроку: https://myview.rahulnivi.net/running-multiple-angular-elements-page/. Но, к сожалению, я получил эту ошибку: Ошибка: NullInjectorError: Нет поставщика для CompilerFactory! это мой индекс. html: 

  <!doctype html>
  <html lang="en">
  <head>
  <meta charset="utf-8">
  <title>ExampleHighchart</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="C:/Users/hiba.nebli/Desktop/hiba-exercice/example- 
  highchart/dist/example-highchart/favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" 
  rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="C:/Users/hiba.nebli/Desktop/hiba-exercice/example- 
  highchart/dist/example-highchart/styles.css"></head>
  <body class="mat-typography">

  <script src="C:/Users/Desktop/example-highchart/node_modules/@webcomponents/custom- 
 elements/src/native-shim.js"></script>
<script src="C:/Users/Desktop/example-highchart/node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
<script src="C:/Users/Desktop/example-highchart/node_modules/zone.js/dist/zone.js"></script>
<script src="C:/Users/Desktop/example-highchart/node_modules/rxjs/bundles/rxjs.umd.js"></script>
<script src="C:/UsersDesktop/example-highchart/node_modules/@angular/core/bundles/core.umd.js"></script>
<script src="C:/Users/Desktop/example-highchart/node_modules/@angular/common/bundles/common.umd.js"></script>
<script src="C:/Users/Desktop/example-highchart/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
<script src="C:/Users/Desktop/example-highchart/node_modules/@angular/elements/bundles/elements.umd.js"></script>
<script src="C:/Users/Desktop/example-highchart/dist/example-highchart/main.js"></script>
<script src="C:/Users/Desktop/front-exercice/dist/front-exercice/main.js"></script>

<!-- Calling Custom Element -->
<app-message class="kx-page__header kx-flex"></app-message>
<div >
<app-tab  style="position:fixed; left:0;bottom:0;background-color:#1a293e;color:white;text-align:center"></app-tab>
</div>
<script src="C:/Users/Desktop/example-highchart/dist/example-highchart/runtime.js" defer></script> 
<script src="C:/Users/hiba.nebli/Desktop/example-highchart/dist/example-highchart/polyfills.js" 
defer></script><script src="C:/Users/Desktop/example-highchart/dist/example-highchart/main.js" defer> 
</script></body>
</html>'

это App.module.ts: 

'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() {

}
}

И когда я запускаю индекс. html я получил эту ошибку : 

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)

1 Ответ

0 голосов
/ 02 марта 2020

Когда вы добавляете провайдера в app.module.ts, вы должны добавить запись в каждом компоненте: 

A Service that is provided in *root module (AppModule)*
import { Injectable } from '@angular/core';
@Injectable({
  **providedIn: 'root'**
})
export class VoteService {
  votes: number = 10;
  constructor() { }
  getVotes() {
    return this.votes;
  }
  setVotes(vote: number) {
      this.votes = vote;
  }
}

. Вот полный пример .

В противном случае вы можете предоставить услугу непосредственно в модуле компонента:

service.module.ts 

import { Injectable, NgModule } from '@angular/core';

@Injectable()
export class Service {
  doSomething(): void {
  }
}

@NgModule({
  **providers: [Service],**
})
export class ServiceModule {
}

см. здесь

...