TypeError defining/accessing interceptors in AngularJS/TypeScript/ES6

Question

I have the following interceptor:

"use strict";

import { IApiService } from '../services/api';
import { ISessionService } from '../services/session';
import { IRedirectService } from '../services/redirect';

export default class ApiInterceptor {

  constructor(
    private $q: ng.IQService,
    private ApiService: IApiService,
    private SessionService: ISessionService,
    private RedirectService: IRedirectService) { }

  ...

}

This is how it's set as a Service:

import ApiInterceptor          from './interceptors/api';
...

export default angular.module('app.core', [
    'toastr', 'js-data'
  ])

  // Constants
  .constant('config', config)

  // Config
  .config(DataConfig)

  // Filters
  ...

  // Interceptors
  .service('ApiInterceptor', ApiInterceptor);

Then in my app.instance I set app.core as dep:

'use strict';

import '../app.core/module';
...

export default angular.module('app.instance', [
  ...
  'app.core',
  ...]);

And use its code here:

'use strict';

import '../../app.core/module';
...

export default function ConfigApp($httpProvider, $locationProvider, $analyticsProvider): void {
  ...
  $httpProvider.interceptors.push('ApiInterceptor');
  ...
}

Then I get this error:

Uncaught TypeError: Cannot read property 'prototype' of undefined

This the information I get from debugger:

Going up the Call Stack:

Any ideas? I've been beating my head against the wall since yesterday... Thanks!

EDIT:

Here's a service example:

.service('LogService', LogService)

This is the implementation:

"use strict";

export interface ILogService {
  debug(...args: any[]): void;
  info(...args: any[]): void;
  warn(...args: any[]): void;
  error(...args: any[]): void;
  deprecated(...args: any[]): void;
  enableDebug(flag: boolean): void;
  enableConsole(flag: boolean): void;
}

/**
 * Provides logging support.
 */
export default class LogService implements ILogService {

  static debugEnabled: boolean = false;
  static consoleEnabled: boolean = true;

  constructor(
    private $log: any,
    private $window: ng.IWindowService) { }

I get the same error...

basarat · Accepted Answer · 2016-01-19 21:33:00Z

1

From your code :

// Interceptors
  .service('ApiInterceptor', ApiInterceptor);

Angular interceptors are factories and you cannot use classes for it. :

// Interceptors
  .factory('ApiInterceptor', somePlainOldFunctionAndNotAClassConstructor);

answered Jan 19, 2016 at 21:33

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

eestein Over a year ago

Ok, I did try that before posting here. My code was like this: .factory('ApiInterceptor', function() { return { get: function() { return ApiInterceptor;} }; }) but that didn't work as well, since the object was always undefined. Or did I do it incorrectly? Thanks for your answer, btw.

eestein Over a year ago

Also, I forgot to mention, the same thing happen with my services: .service('SessionService', SessionService) where SessionService is also a class.

basarat Over a year ago

Or did I do it incorrectly. Yes. You want to return an instance. Just wrapping it up to return the class doesn't fix anything

basarat Over a year ago

Also, I forgot to mention, the same thing happen with my services: that is a seperate question.

eestein Over a year ago

Thanks! but is the solution the same?

|

Collectives™ on Stack Overflow

TypeError defining/accessing interceptors in AngularJS/TypeScript/ES6

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related