angular-ui / ui-router

The de-facto solution to flexible routing with nested views in AngularJS
http://ui-router.github.io/
MIT License
13.56k stars 3.01k forks source link

angular-route dependency injection failing when using array #3645

Closed waleedahmed3045 closed 6 years ago

waleedahmed3045 commented 6 years ago

I'm submitting a bug

UI Router Version: (1.0.15)

Current behavior:

I am trying to inject "angular-ui-router": "^1.0.3" dependency by declaring an array but it gives me an error. It does work for version 0.3.2. image

I also tried to use "@uirouter/angularjs": "^1.0.15", but i see the following error image

Expected / new behavior: It should inject the dependency as I am using browsify by gulp to build to load all dependencies in one file.

Minimal reproduction of the problem with instructions: app.js file

var angular = require('angular');
var angularUiRouter = require('angular-ui-router');
var uiRouter = require('@uirouter/angularjs');

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

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);
});

gulpfile.js

var gulp = require('gulp');
var rename = require('gulp-rename');
var browserify = require('browserify');
var buffer = require('gulp-buffer');
let source = require('vinyl-source-stream');
let streamify = require('gulp-streamify');
let uglify = require('gulp-uglify');

gulp.task('default', function() {

    return browserify('app.js')
        .bundle()
        .pipe(source('app-release.js'))
         .pipe(buffer())

        .pipe(gulp.dest('app/'));
});

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>

<ui-view></ui-view>

</body>
</html>

package.json

{
  "name": "UIRouter",
  "version": "0.0.1",

  "dependencies": {
    "@uirouter/angularjs": "^1.0.15",
    "angular": "^1.6.9",
    "angular-route": "^1.6.9",
    "angular-ui-router": "^1.0.3",
    "browserify": "^16.1.0",
    "gulp": "^3.9.1",
    "gulp-browserify": "^0.5.1",
    "gulp-buffer": "0.0.2",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-streamify": "^1.0.2",
    "gulp-uglify": "^3.0.0",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0"
  }
}

AngularJS version: 1.6.9

Browser: All

christopherthielen commented 6 years ago

Change your require statement to

var angularUiRouter = require('angular-ui-router').default;

For more details, see: https://ui-router.github.io/guide/ng1/migrate-to-1_0#commonjs-module-name

Also, I recommend switching away from angular-ui-router and to @uirouter/angularjs because the latter npm package name is no longer receiving updates, see: https://ui-router.github.io/guide/ng1/migrate-to-1_0#npm-package-name-changed