troubles with angular seed and ui.router #351

linqFR · 2016-07-29T13:14:19Z

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 async 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:

gkalpak · 2016-07-29T14:48:42Z

This is an issue with ui.router. It seems that it is not compatible with angular-loader, because it assumes that angular.js will have been loaded before angular-ui-router.js.

You should open an issue on their repo (feel free to ping me if they need additional info).

I am going to close this, since it is not related to angular-seed.

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

well i did !
but is angular loader not supposed to load things according dependencies ?
and why not maybe add an option to angular-loader to load angular by default on internet ?
(i mean if not loaded with script tag before and not in the list of scripts passed to $script ?!)

if you say this is their responsibility, i m ready to believe you ! ... but that could mean that no one has done anything for more than one year on either sides, as the issue seems not new !

linqFR · 2016-07-29T15:04:32Z

for followup : angular-ui/ui-router#2898

gkalpak · 2016-07-29T15:15:35Z

What angular-loader does, is enabling to download all your scripts (including angular.js) asynchronously. Without the loader, you would have to load angular.js first (which is usually the largest file) and then start downloading your other scripts. With the loader, you can download all the script asynchronously (which means several smaller scripts would be downloaded simultaneously with angular.js).

Tbh, the current best practice is bundling everything is a couple of scripts, so the loader isn't relevant any more (but HTTP/2 might change that 😉).

gkalpak closed this as completed Jul 29, 2016

linqFR mentioned this issue Jul 29, 2016

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

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

troubles with angular seed and ui.router #351

troubles with angular seed and ui.router #351

linqFR commented Jul 29, 2016 •

edited

Loading

gkalpak commented Jul 29, 2016

linqFR commented Jul 29, 2016 •

edited

Loading

linqFR commented Jul 29, 2016

gkalpak commented Jul 29, 2016

troubles with angular seed and ui.router #351

troubles with angular seed and ui.router #351

Comments

linqFR commented Jul 29, 2016 • edited Loading

gkalpak commented Jul 29, 2016

linqFR commented Jul 29, 2016 • edited Loading

linqFR commented Jul 29, 2016

gkalpak commented Jul 29, 2016

linqFR commented Jul 29, 2016 •

edited

Loading

linqFR commented Jul 29, 2016 •

edited

Loading