angular ui-router 只允许使用一个 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/.

我真的不知道这条消息想告诉我什么。我没有多次加载 babel/polyfill。在我收到这条消息之前，我什至不知道这个插件。

这是我的 main.js 和 ui-router 代码：

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，而是现在的模板。

我真的不知道为什么会这样，但它确实有效。也许有人可以解释一下？

Answer 3

尝试删除本地文件

build/
dist/

但是，它对我有用。