只有一個babel/polyfill實例允許使用角度UI路由器

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/. 

我真的不知道這消息要告訴我。我沒有多次加載babel/polyfill。在我收到這個消息之前，我甚至不知道這個插件。

這是我main.js與UI路由器代碼：

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路由器，它工作正常！

這裏有什麼問題？

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，但現在的模板。

我真的不知道爲什麼這個工程，但它的作品。也許有人可以解釋這一點？