Trouble with angular seed/loader and ui.router #2898

linqFR · 2016-07-29T13:15:27Z

Hello

I am trying to make part of your angular seed work with ui.router and i am getting the same error over and over. Reading past issues, i thought there were no trouble anymore about angular-loader and seed and ui.router, are they still some? of something is wrong in asyn loading order?

I am using Chrome Version 52.0.2743.82 m.

angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module oxapp due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router.state due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router.router due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router.util due to:
TypeError: forEach is not a function
    at new $UrlMatcherFactory (https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js:1573:3)
    at Object.instantiate (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:4733:14)
    at provider (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:4547:36)
    at Object.provider (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:4539:16)
    at runInvokeQueue (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:4611:35)
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:4619:11
    at forEach (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:321:20)
    at loadModules (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:4601:5)
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:4618:40
    at forEach (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:321:20)....

my code is :
Index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- ox styles -->
    <link rel="stylesheet" href="/css/style.css">
    <style>[ng-cloak] {display: none;}</style>
    <!-- scripts -->
        <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-loader.js'></script>
    <script>
        /*!
         * $script.js v1.3
         * https://github.com/ded/script.js
         * Copyright: @ded & @fat - Dustin Diaz, Jacob Thornton 2011
         * Follow our software http://twitter.com/dedfat
         * License: MIT
         */
        !function(a,b,c){function t(a,c){var e=b.createElement("script"),f=j;e.onload=e.onerror=e[o]=function(){e[m]&&!/^c|loade/.test(e[m])||f||(e.onload=e[o]=null,f=1,c())},e.async=1,e.src=a,d.insertBefore(e,d.firstChild)}function q(a,b){p(a,function(a){return!b(a)})}var d=b.getElementsByTagName("head")[0],e={},f={},g={},h={},i="string",j=!1,k="push",l="DOMContentLoaded",m="readyState",n="addEventListener",o="onreadystatechange",p=function(a,b){for(var c=0,d=a.length;c<d;++c)if(!b(a[c]))return j;return 1};!b[m]&&b[n]&&(b[n](l,function r(){b.removeEventListener(l,r,j),b[m]="complete"},j),b[m]="loading");var s=function(a,b,d){function o(){if(!--m){e[l]=1,j&&j();for(var a in g)p(a.split("|"),n)&&!q(g[a],n)&&(g[a]=[])}}function n(a){return a.call?a():e[a]}a=a[k]?a:[a];var i=b&&b.call,j=i?b:d,l=i?a.join(""):b,m=a.length;c(function(){q(a,function(a){h[a]?(l&&(f[l]=1),o()):(h[a]=1,l&&(f[l]=1),t(s.path?s.path+a+".js":a,o))})},0);return s};s.get=t,s.ready=function(a,b,c){a=a[k]?a:[a];var d=[];!q(a,function(a){e[a]||d[k](a)})&&p(a,function(a){return e[a]})?b():!function(a){g[a]=g[a]||[],g[a][k](b),c&&c(d)}(a.join("|"));return s};var u=a.$script;s.noConflict=function(){a.$script=u;return this},typeof module!="undefined"&&module.exports?module.exports=s:a.$script=s}(this,document,setTimeout)
        // load all of the dependencies asynchronously.
        $script([
          'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js',
          'https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js',
          '/js/oxapp.js'
        ], function() {
          // when all is done, execute bootstrap angular application
        angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
        angular.bootstrap(document, ['oxapp']);
        });
      </script>
</head>
<body ng-cloak></body>
</html>

and oxapp.js

(function() {
'use strict';

    var oxapp = angular.module('oxapp',['ui.router']);

    var stateProvider;

    oxapp
    .config(['$stateProvider', '$urlRouterProvider','$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
        // For any unmatched url, redirect to /state1
        $locationProvider.html5Mode(true);
        stateProvider = $stateProvider;
        $urlRouterProvider.deferIntercept();
    }])
    .run(($http, $urlRouter) => {
        // get routes
        $http.get('/js/states.json').then(resp => {
            // got routes; register them with the state provider
            resp.data.forEach(state => stateProvider.state(state));
            // tell ui-router to sync the url and listen for changes
            $urlRouter.listen();
            $urlRouter.sync();
        });
    })

})(); //function end

The text was updated successfully, but these errors were encountered:

ghost · 2016-07-29T13:19:20Z

Please mention ng-app="oxapp" attribute on html element

Thanks & Regards
Arjun Nayak

On 29-Jul-2016 18:45, "linq_oxelar" [email protected] wrote:

Hello

I am trying to make part of your angular seed work with ui.router and i am
getting the same error over and over. Reading past issues, i thought there
were no trouble anymore about angular-loader and seed and ui.router, are
they still some? of something is wrong in asyn loading order?

I am using Chrome Version 52.0.2743.82 m.

angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module oxapp due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router.state due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router.router due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router.util due to:
TypeError: forEach is not a function
at new $UrlMatcherFactory (https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js:1573:3)
at Object.instantiate (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:4733:14)
at provider (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:4547:36)
at Object.provider (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:4539:16)
at runInvokeQueue (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:4611:35)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:4619:11
at forEach (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:321:20)
at loadModules (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:4601:5)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:4618:40
at forEach (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:321:20)....

my code is :
Index.html
<title></title> <style>[ng-cloak] {display: none;}</style> <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-loader.js'></script> <script> /*! \* $script.js v1.3 \* https://github.com/ded/script.js \* Copyright: @ded & @fat - Dustin Diaz, Jacob Thornton 2011 \* Follow our software http://twitter.com/dedfat \* License: MIT */ !function(a,b,c){function t(a,c){var e=b.createElement("script"),f=j;e.onload=e.onerror=e[o]=function(){e[m]&&!/^c|loade/.test(e[m])||f||(e.onload=e[o]=null,f=1,c())},e.async=1,e.src=a,d.insertBefore(e,d.firstChild)}function q(a,b){p(a,function(a){return!b(a)})}var d=b.getElementsByTagName("head")[0],e={},f={},g={},h={},i="string",j=!1,k="push",l="DOMContentLoaded",m="readyState",n="addEventListener",o="onreadystatechange",p=function(a,b){for(var c=0,d=a.length;c')); angular.bootstrap(document, ['oxapp']); }); </script>
and oxapp.js

(function() {
'use strict';
var oxapp = angular.module('oxapp',['ui.router']);

var stateProvider;

oxapp
.config(['$stateProvider', '$urlRouterProvider','$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
    // For any unmatched url, redirect to /state1
    $locationProvider.html5Mode(true);
    stateProvider = $stateProvider;
    $urlRouterProvider.deferIntercept();
}])
.run(($http, $urlRouter, $stateProvider) => {
    // get routes
    $http.get('/js/states.json').then(resp => {
        // got routes; register them with the state provider
        resp.data.forEach(state => stateProvider.state(state));
        // tell ui-router to sync the url and listen for changes
        $urlRouter.listen();
        $urlRouter.sync();
    });
})
})(); //function end

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#2898, or mute the thread
https://github.com/notifications/unsubscribe-auth/AMc01jmCtPCdYYLudtw3xg8zrLtbsestks5qaf0EgaJpZM4JYLfS
.

linqFR · 2016-07-29T13:23:09Z

@arjunnayak0705 : no change and besides the angular.bootstrap(document, ['oxapp']); is supposed to do it, no?

ghost · 2016-07-29T14:00:32Z

@linqOxelar have you tried this?
angular.element(document).ready(function() {
angular.bootstrap(document, ['oxapp']);
});

linqFR · 2016-07-29T14:22:00Z

i just did ! no change !
but bootstrapping the document is supposed to be done when the doc is loaded and ready!

ghost · 2016-07-29T14:30:12Z

Here go to this.
https://plnkr.co/edit/ig9kHIAEv7QhdCHyRi9B?p=preview
Its working. You may need to load angular.js and angular-ui-router.js in scripts tag and not inject it later.

linqFR · 2016-07-29T14:31:43Z

i did it the old way, changing my index.html scripts to the following code, and it works fine.
so i suppose the problem is either angular seed/loader that does not its job correctly to deal with dependencies or ui.router is not well "modulised".

<!DOCTYPE html>
<html ng-app="oxapp">
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- common styles -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <!-- ox styles -->
    <link rel="stylesheet" href="/css/style.css">
    <style>[ng-cloak] {display: none;}</style>
    <!-- scripts -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/oxapp.js" type="text/javascript" charset="utf-8" ></script>
</head>
<body ng-cloak></body>
</html>

ghost · 2016-07-29T14:33:30Z

Thats what I meant

linqFR · 2016-07-29T14:33:35Z

@arjunnayak0705 url leads to 404!
and if i wanted to do it the normal way i would not call for async way ! :)

ghost · 2016-07-29T14:34:52Z

@linqOxelar Sometimes let things be normal way. :P

linqFR · 2016-07-29T14:43:06Z

@arjunnayak0705 as a workaround yes... and then forget about simplicity and efficiency with angular :-)

linqFR · 2016-07-29T15:13:49Z

this is an ui.router issue and nothing has been done so far : angular/angular-seed#351

gkalpak · 2016-07-29T15:21:53Z

This is indeed a ui.router issue. It does not support the angular-loader workflow. From quick look, it should be an easy fix (but I only took a superficial look).

Basically, the problem is that ui.router expects that angular.js will be loaded by the time its own script gets loaded, which is not necessarily the case then used with angular-loader. What needs to be done, is defer the access to helper functions (such as angular.forEach) until it is sure that angular core has been loaded (e.g. inside a config block).

To get an idea, we recently fixed the same problem for Angular's own external modules in angular/angular.js#14794.

jansivans · 2016-11-25T15:22:50Z

@gkalpak I have faced with the same problem. When using angular.bootstrap, ui.router module can't be instantiated. Do you know how to fix it?
FYI I am using latest ui-router version - v1.0.0-beta.3.

gkalpak · 2016-11-25T19:13:23Z

@jansivans, if it is the same problem, then it can't be properly fixed outside of ui.router. As a workaround, you can either not use angular-loader or load angular.js before other modules.

stale · 2020-01-24T08:49:56Z

This issue has been automatically marked as stale because it has not had
recent activity. It will be closed if no further activity occurs.

This does not mean that the issue is invalid. Valid issues
may be reopened.

Thank you for your contributions.

linqFR changed the title ~~Trouble with angular seed/loarder and ui.router~~ Trouble with angular seed/loader and ui.router Jul 29, 2016

linqFR mentioned this issue Jul 29, 2016

troubles with angular seed and ui.router angular/angular-seed#351

Closed

christopherthielen added this to the future milestone Nov 25, 2016

stale bot added the stale label Jan 24, 2020

stale bot closed this as completed Feb 7, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Trouble with angular seed/loader and ui.router #2898

Trouble with angular seed/loader and ui.router #2898

linqFR commented Jul 29, 2016 •

edited

Loading

ghost commented Jul 29, 2016

linqFR commented Jul 29, 2016

ghost commented Jul 29, 2016

linqFR commented Jul 29, 2016

ghost commented Jul 29, 2016 •

edited by ghost

Loading

linqFR commented Jul 29, 2016

ghost commented Jul 29, 2016

linqFR commented Jul 29, 2016

ghost commented Jul 29, 2016

linqFR commented Jul 29, 2016

linqFR commented Jul 29, 2016 •

edited

Loading

gkalpak commented Jul 29, 2016 •

edited

Loading

jansivans commented Nov 25, 2016

gkalpak commented Nov 25, 2016

stale bot commented Jan 24, 2020

Trouble with angular seed/loader and ui.router #2898

Trouble with angular seed/loader and ui.router #2898

Comments

linqFR commented Jul 29, 2016 • edited Loading

ghost commented Jul 29, 2016

linqFR commented Jul 29, 2016

ghost commented Jul 29, 2016

linqFR commented Jul 29, 2016

ghost commented Jul 29, 2016 • edited by ghost Loading

linqFR commented Jul 29, 2016

ghost commented Jul 29, 2016

linqFR commented Jul 29, 2016

ghost commented Jul 29, 2016

linqFR commented Jul 29, 2016

linqFR commented Jul 29, 2016 • edited Loading

gkalpak commented Jul 29, 2016 • edited Loading

jansivans commented Nov 25, 2016

gkalpak commented Nov 25, 2016

stale bot commented Jan 24, 2020

linqFR commented Jul 29, 2016 •

edited

Loading

ghost commented Jul 29, 2016 •

edited by ghost

Loading

linqFR commented Jul 29, 2016 •

edited

Loading

gkalpak commented Jul 29, 2016 •

edited

Loading