には、Aureliaのpolyfillをwebpack

Question

にフェッチすることが含まれているので、私はPhantomJsでこのエラーが発生していることに気付きました。@type/whatwg-fetchがあるのでpolyfillが含まれていると思いました。私はこのWebPACKの事情で推奨ポリフィルをロードするかどうかはわかりません

Error: HttpClient requires a Fetch API implementation, but the current environment doesn't support it. You may need to load a polyfill such as https://github.com/github/fetch. in spec-bundle.js (line 18057) 

、何NPMモジュール私はインストールする必要がありますか？私は、コードをフェッチ見ることができるとどのように私は（WebPACKのtypescriptです-webackスケルトンに基づく）のWebPACKに

この

import { Aurelia } from 'aurelia-framework'; 
import '../styles/styles.css'; 
import 'font-awesome/css/font-awesome.css'; 
import 'bootstrap/dist/css/bootstrap.css'; 
import 'bootstrap'; 
import * as Bluebird from 'bluebird'; 
import 'whatwg-fetch'; 
// we want font-awesome to load as soon as possible to show the fa-spinner 

// comment out if you don't want a Promise polyfill (remove also from webpack.config.js) 
Bluebird.config({ warnings: false }); 

export async function configure(aurelia: Aurelia) { 
    aurelia.use 
    .standardConfiguration() 
    .developmentLogging(); 

    // Uncomment the line below to enable animation. 
    // aurelia.use.plugin('aurelia-animator-css'); 
    // if the css animator is enabled, add swap-order="after" to all router-view elements 

    // Anyone wanting to use HTMLImports to load views, will need to install the following plugin. 
    // aurelia.use.plugin('aurelia-html-import-template-loader') 

    await aurelia.start(); 
    aurelia.setRoot('app'); 

    // if you would like your website to work offline (Service Worker), 
    // install and enable the @easy-webpack/config-offline package in webpack.config.js and uncomment the following code: 
    /* 
    const offline = await System.import('offline-plugin/runtime'); 
    offline.install(); 
    */ 
} 

、ここをしようとしたことを追加し、私は

npm ls whatwg-fetch            slave-vi 
aurelia-skeleton-navigation-webpack@1.0.0 /home/xenoterracide/IdeaProjects/rpf-ui 
└── whatwg-fetch@1.0.0 

をインストールし何ん私のapp-bundle.jsでは、しかし、私はまだ上記のエラーを投げてPhantomJSを参照してください

Answer 1

HttpClientと同じクラスでインポートする必要があるようです。 typescript-webpack骨格の場合、これはapp.ts

import 'isomorphic-fetch'; 
import { Router, RouterConfiguration } from 'aurelia-router'; 
import { Logger } from 'aurelia-logging'; 
import { Container, LogManager, autoinject } from 'aurelia-framework'; 
import { Route } from './main/Route'; 
import { HttpClient } from 'aurelia-fetch-client'; 

@autoinject 
export class App { 
    router: Router; 
    private log: Logger = LogManager.getLogger(App); 

    constructor(container: Container) { 
     let client: HttpClient = new HttpClient; 
     client.configure(config => { 
      config.useStandardConfiguration() 
       .withBaseUrl("http://localhost:8080/") 
       .withDefaults({ 
        credentials: 'include' 
       }); 
     }); 
     container.registerSingleton(HttpClient,() => client); 
    } 

Answer 2

これを行う最も簡単な方法は、パッケージisomorphic-fetch、フェッチポリ塗りつぶしはノードとブラウザで動作します（webpackとBrowserifyで）。

ブラウザのポリフィルを使用したい場合は、パッケージwhatwg-fetchを使用することもできます。これだけです

import "isomorphic-fetch"; // or whatwg-fetch 
// Other imports go here 

：

あなたがisomorphic-fetchやwhatwg-fetchをインストールしたら、単純にすべての他の非ポリフィルの輸入の前に、あなたのエントリポイントの開始時に、それをインポートします！その後、インポートwindow.fetchは必要に応じてポリ充てんされます！