时间戳

首页 > 解决方案 > 错误：NullInjectorError：没有 CompilerFactory 的提供者！当我尝试在同一页面中运行 2 个角度元素时

angular - 错误：NullInjectorError：没有 CompilerFactory 的提供者！当我尝试在同一页面中运行 2 个角度元素时

问题描述

我有两个项目（2 个小部件），当我单独使用这些小部件时它工作正常，但我想在同一页面中使用它们，所以我遵循这个教程：https ://myview.rahulnivi.net/running-multiple-angular-元素页面/。但不幸的是我得到了这个错误：错误：NullInjectorError：没有编译器工厂的提供者！这是我的 index.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() {

}
}

当我运行 index.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)

标签： angularweb-componentangular-elements

解决方案

当您在 app.module.ts 中添加提供程序时，您必须在每个组件中添加一个 providedIn 条目：

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;
  }
}

这是一个完整的例子。

否则，您可以直接在组件的模块中提供服务：

服务模块.ts

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

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

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

看这里

推荐阅读