0

I am trying to use $ocLazyLoad inside of Angular.js with TypeScript. However I keep getting a Unknown provider error. I am including it in my primary app:

index.module.ts

/// <reference path="../../.tmp/typings/tsd.d.ts" />
/// <reference path="index.route.ts" />
/// <reference path="index.config.ts" />
/// <reference path="index.run.ts" />

module myApp {
  'use strict';

  angular.module('myApp', [
    'ui.router',
    'oc.lazyLoad'])
    .config(RouterConfig)
    .config(Config)
    .run(RunBlock);
}

The error come from when I try to include it in my RouterConfig:

index.route.ts

module myApp {
  'use strict';

  export class RouterConfig {

    static $inject = ['$stateProvider', '$urlRouterProvider', '$ocLazyLoad'];

    constructor($stateProvider: ng.ui.IStateProvider, $urlRouterProvider: ng.ui.IUrlRouterProvider, $ocLazyLoad: oc.ILazyLoad) {
      $urlRouterProvider.otherwise('/dashboard');

      $stateProvider
        .state('dashboard', {
          url: '/dashboard',
          templateUrl: 'app/modules/core/dashboard/dashboard.html'
        });
    }

  }
}

The really strange part is that I can include $ocLazyLoadProvider without any problems. This is a very bare-bones setup from Yeoman using gulp, typescript, and ui-router.

lightswitch05
  • 9,058
  • 7
  • 52
  • 75

1 Answers1

1

There is an error in .config(RouterConfig).

The function passed into config is not called with the new operator, Therefore don't use a typescript class here.

basarat
  • 261,912
  • 58
  • 460
  • 511
  • Are you sure? `RouterConfig` works great when I don't include `$ocLazyLoad`. Also, this is a class that is generated by the [Yeoman generator](https://github.com/Swiip/generator-gulp-angular) - I did not create it. – lightswitch05 Aug 05 '15 at 00:17
  • 2
    @lightswitch05 yes. You will get an issue as soon as you think you can use `this` – basarat Aug 05 '15 at 00:23