角度ui-routerで1つのインスタンスbabel/polyfillのみが許可されています

Question

現在、私は学校プロジェクトで働いており、angularJsと流星でいくつかのグラフを表示したいと考えています。

私はui-routerプラグインを使いたいです。しかし、私はそれを使用しようとすると、私は次のエラーを取得する：

Error: only one instance of babel/polyfill is allowed 
at Object.eval (eval at <anonymous> (http://localhost:3000/packages/jquery.js?hash=22a0055f59bd150c435c5aba34c7c59076b8bcd9:397:22), <anonymous>:2872:9) 
at Object.1.180 (eval at <anonymous> (http://localhost:3000/packages/jquery.js?hash=22a0055f59bd150c435c5aba34c7c59076b8bcd9:397:22), <anonymous>:2875:4) 
at s (eval at <anonymous> (http://localhost:3000/packages/jquery.js?hash=22a0055f59bd150c435c5aba34c7c59076b8bcd9:397:22), <anonymous>:2863:254) 
at e (eval at <anonymous> (http://localhost:3000/packages/jquery.js?hash=22a0055f59bd150c435c5aba34c7c59076b8bcd9:397:22), <anonymous>:2863:425) 
at eval (eval at <anonymous> (http://localhost:3000/packages/jquery.js?hash=22a0055f59bd150c435c5aba34c7c59076b8bcd9:397:22), <anonymous>:2863:443) 
at eval (eval at <anonymous> (http://localhost:3000/packages/jquery.js?hash=22a0055f59bd150c435c5aba34c7c59076b8bcd9:397:22), <anonymous>:7043:4) 
at eval (eval at <anonymous> (http://localhost:3000/packages/jquery.js?hash=22a0055f59bd150c435c5aba34c7c59076b8bcd9:397:22), <anonymous>:7050:3) 
at eval (<anonymous>) 
at http://localhost:3000/packages/jquery.js?hash=22a0055f59bd150c435c5aba34c7c59076b8bcd9:397:22 
at Function.globalEval (http://localhost:3000/packages/jquery.js?hash=22a0055f59bd150c435c5aba34c7c59076b8bcd9:398:7) <div ui-view="" class="ng-scope" data-ng-animate="1"> 

また、私はこの警告を得る：

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. 

私は本当にこのメッセージが私に教えて欲しいものは考えています。私は一度に複数のバベル/ポリフィルをロードしませんでした。私はこのメッセージを受け取る前に、このプラグインについて知りませんでした。

これはUI-ルータのコードと私のmain.jsです：

import angular from 'angular'; 
import angularMeteor from 'angular-meteor'; 
import uiRouter from 'angular-ui-router'; 
import ngMaterial from 'angular-material'; 
import '../../../node_modules/angular-material/angular-material.css' 
import '../own.css'; 
import template from './main.html'; 
import { name as Navigation } from '../navigation/navigation'; 
import {name as Toolbar} from '../toolbar/toolbar'; 
import {name as View1} from '../view1/view1'; 
import {name as View2} from '../view2/view2'; 

class Main {} 

const name = 'main'; 

// create a module 
export default angular.module(name, [ 
angularMeteor, 
uiRouter, 
Navigation, 
Toolbar, 
View2, 
View1, 
ngMaterial 
]).component(name, { 
template, 
controllerAs: name, 
controller: Main 
}) 
.config(config); 
function config($mdThemingProvider,$urlRouterProvider,$stateProvider) { 
'ngInject'; 


$urlRouterProvider.otherwise('view1'); 

$stateProvider 
    .state('view1', { 
     url: '/', 
     templateUrl: 'test.html' 
    }); 

$mdThemingProvider 
    .theme('default') 
    .primaryPalette('orange') 
    .accentPalette('deep-orange') 
    .warnPalette('red'); 
} 

そして、これは、ビューが注入されなければならない私のmain.htmlとのコードです：

<div layout="column" style="height: 100%"> 
<toolbar scroll></toolbar> 
<section layout="row" flex> 

    <navigation></navigation> 

    <md-content flex layout-padding style="margin-top: 75px"> 
<div ui-view=""></div> 
    </md-content> 
</section> 

ui-routerがなければ正常に動作します。

ここで問題は何ですか？

Answer 1

ほとんどの場合、babel-polyfillをコンパイルする必要があり、複数のバージョンのbabelでグローバルな名前空間を汚染しているモジュールがあります。したがって、babelにnode_modulesディレクトリを無視するように指示し、babel-polyfillを必要とする依存関係を見つけてそれを回避する必要があります。

最後のオプションは、ランタイムトランスフォーマでコードをコンパイルすることです。

https://babeljs.io/docs/plugins/transform-runtime/

Answer 2

私は解決策を見つけました。

$ stateproviderに何か問題がありました。

は、私は、ビューにこのコード

$stateProvider 
.state('view1', { 
    url: '/', 
    templateUrl: 'test.html' 
}); 

をコピーし、これに、それを変更：

function config($stateProvider) { 
'ngInject'; 
$stateProvider 
    .state('view1', { 
     url: '/view1', 
     template: '<view1></view1>' 
    }); 

}

（最後のコード例は、すでに私のプロジェクトから、完成したコードです）。だからもうtemplateUrlではなく、今テンプレート。

私は本当にこれがなぜ機能するのか分かりませんが、動作します。たぶん、これを説明できる人がいますか？