javascript - Angular 4 应用程序错误 : "core.es5.js:1169 Uncaught Error: No provider for PlatformRef!"

Question

我在尝试使用浏览器运行单页应用程序时遇到以下错误(我对 chrome 和 safari 也有同样的问题)。我正在起诉 angular cli (angular 4) 和 typescript 。我确实有一个独特的组件和一个独特的模块。使用主要组件，我试图从后端请求一些数据。

浏览器提出的问题:

core.es5.js:1169 Uncaught Error: No provider for PlatformRef!
at injectionError (core.es5.js:1169)
at noProviderError (core.es5.js:1207)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489)
at createPlatform (core.es5.js:4239)
at core.es5.js:4265
at core.es5.js:4262
at core.es5.js:4262

错误似乎是由在主模块中注入(inject)的主组件中编写的以下代码行引起的: let res = new CalculatorCore().getMaxProfitCurrencyPath(500, dataManager.getCalculateDataStructure("EUR"));

这里是 CalculatorCore 类:

import { Currency } from "./currency";
import { Map } from 'collections/map';

export class CalculatorCore {

private inputOutputCurrency: string = "EUR";

constructor() {
}


getMaxProfitCurrencyPath( price: number, currency: Currency, steps?: number, path?: Currency[]):Map<number,string[]> {

let returningPath: Map<number, string[]> =  new Map<number,string[]>();

currency.getConvertibles().forEach((key:Currency, value:number) => {

    if (!steps) {
      steps = 2;
    } else if (steps > 0) {
      steps--;
      if (currency.getLabel() == this.inputOutputCurrency){
        path = [];
    }

      path.push(key);

      this.getMaxProfitCurrencyPath(price*value, key, steps, path);
    } else if (steps == 0 && key.getConvertibles().has(this.inputOutputCurrency)){
          path.push(key.getConvertibles().get(this.inputOutputCurrency));
          returningPath.add(key.getConvertibles().get(this.inputOutputCurrency)*price, path);
        }
      });

return returningPath;
   }
}

这里是组件代码:

import {Component, OnInit} from '@angular/core';
import { KrakenClient } from 'kraken-api/kraken.js';
import {DataManager} from "./data-manager";
import {CalculatorCore} from "./calculator-core";


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{

  ngOnInit(): void {
   let dataManager = new DataManager();

   let res =  new CalculatorCore().getMaxProfitCurrencyPath(500, dataManager.getCalculateDataStructure("EUR"));

   console.log(res);

  }

  constructor(){
    console.log("App-component constructor")
  }

}

有人能解释一下这个错误吗？ 谢谢，

Answer 1

由无效的 bootstrap 设置引起。

修复

使用 angular-cli 创建一个新项目，并将您的引导方式与 angular 的最新推荐指南进行比较。