ocombe / ocLazyLoad

Lazy load modules & components in AngularJS
https://oclazyload.readme.io
MIT License
2.63k stars 510 forks source link

No module found during bootstrap. #361

Open zeeshanjan82 opened 8 years ago

zeeshanjan82 commented 8 years ago

I am trying to convert an js angular1 project into typescript : https://github.com/swimlane/angular1-systemjs-seed While doing this I am facing following issue. I have converted the entire project to use typescript instead of ES6 but when I run the app in browser, I face the following issue: error

zeeshanjan82 commented 8 years ago

I have narrowed down the issue and now with only this simple app I am getting the same issue: My app.ts source code is:

import 'babel/external-helpers';
import * as angular from 'angular';
import 'angular-ui-router';
import 'ocLazyLoad';
import futureRoutes from '../app/routes.json!json';

let app  = angular.module('posClient', ['ui.router', 'oc.lazyLoad']);
app.config(['$urlRouterProvider', '$locationProvider', '$stateProvider', '$httpProvider', '$logProvider', '$ocLazyLoadProvider', '$futureStateProvider',
           function ($urlRouterProvider, $locationProvider, $stateProvider, $httpProvider, $logProvider, $ocLazyLoadProvider, $futureStateProvider) {
  console.log(futureRoutes);
  app.requires.push('ct.ui.router.extras.future');
  $ocLazyLoadProvider.config({
    debug: true
  });
  $futureStateProvider.stateFactory('load', ['$q', '$ocLazyLoad', 'futureState', function($q, $ocLazyLoad, futureState) {
    var def = $q.defer();
    System.import(futureState.src).then(loaded => {
      var newModule = loaded;
      if (!loaded.name) {
        var key = Object.keys(loaded);
        newModule = loaded[key[0]];
      }

      $ocLazyLoad.load(newModule).then(function() {
        def.resolve();
      }, function() {
        console.log('error loading: ' + loaded.name);
      });
    });

    return def.promise;
  }]);

  futureRoutes.forEach(function(r) {
    $futureStateProvider.futureState(r);
  });
}]);
angular.element(document).ready(function() {
  angular.bootstrap(document.getElementsByTagName("html")[0], [ app.name ], {});
});

export default app;

My routes.json file is:

[
  {
    "stateName": "login",
    "urlPrefix": "/login",
    "type": "load",
    "src": "app/login/login"
  }
]

My login.ts file is:

export default angular.module('login', []);