Question

我正在尝试使用gulp-browsify在一个app-release.js文件中加载所有依赖项。

文件构建正常，但当我尝试注入@uiRouter依赖项时，我在浏览器中遇到以下错误

如果我注射angular-route就好了。

这是代码

gulpfile.js

var gulp = require('gulp');
var rename = require('gulp-rename');
var browserify = require('gulp-browserify');
var buffer = require('gulp-buffer');

gulp.task('default', function() {
    gulp.src('app.js')
        .pipe(browserify({
            insertGlobals: false,
            debug: true
        }))
        .pipe(buffer())
        .pipe(rename('app-release.js'))
        .pipe(gulp.dest('app/'));
});

app.js

var angular = require('angular');
var uiRouter = require('@uirouter/angularjs');
var ngRoute = require('angular-route');

var app = angular.module("app",[uiRouter]);

app.config(function($stateProvider) {
    var helloState = {
        name: 'hello',
        url: '/',
        template: '<h3>hello world!</h3>'
    }

    var aboutState = {
        name: 'about',
        url: '/about',
        template: '<h3>Its the UI-Router hello world app!</h3>'
    }

    $stateProvider.state(helloState);
    $stateProvider.state(aboutState);
});

的index.html

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Ui Router Test</title>
    <!--<script type="text/javascript" src="/node_modules/angular/angular.js"></script>-->
    <script src="app/app-release.js" type="application/javascript"></script>
</head>
<body>
<a ui-sref="hello">Hello</a>
<a ui-sref="about">About</a>
<p></p>
<!--<a href="#!red">Red</a>-->
<!--<a href="#!green">Green</a>-->
<!--<a href="#!blue">Blue</a>-->
<!--<div ng-view></div>-->
<ui-view></ui-view>

</body>
</html>

感谢您提供帮助：）

Answer 1

我可能来不及帮助你，但也许这会帮助别人，问题是定义uiRouter模块的方式，你设置uiRouter变量的方式保存一个对象，UiRouter对象，但它希望将一个字符串注入到模块声明中。

可以从默认导出中获取该字符串，并通过将var uiRouter = require('@uirouter/angularjs').default声明为与上述方式相对应的方式获得该字符串。

在结尾处声明.default后，您的变量将保留字符串 “ui.router”，而不是UI路由器对象，您现在可以正如你所做的那样传递那个变量。

请注意，如果使用ES6样式的import语句而不是commonJs require，则不会出现此问题。

<强> TLDR

将.default添加到uiRouter require call的末尾。

Angular 1.6.9 @uiRouter：错误：[ng：cpws]无法复制！不支持制作Window或Scope实例的副本

1 个答案: