ngParty / ng-metadata

Angular 2 decorators and utils for Angular 1.x

Home Page:https://hotell.gitbooks.io/ng-metadata/content/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Issue with old-module-declaration syntaxt after application separation

kptLucek opened this issue · comments

Hi there

I wanted to create an module with build-in interceptor for injecting language parameter to every request sent to API.

//Module definition
export const AppConfigInterceptorModule = angular
    .module('AppConfigInterceptor', [])
    .config(
        [
            '$httpProvider',
            function ($httpProvider: angular.IHttpProvider) {
                $httpProvider.interceptors.push([
                                                    '$log',
                                                    'localStorageService',
                                                    LanguageInjectorInterceptor.Factory
                                                ]);
            }
        ]
    )
    .name;

// Factory itself
export class LanguageInjectorInterceptor {
    public static Factory($log: angular.ILogService, $ls: angular.local.storage.ILocalStorageService) {
        return new LanguageInjectorInterceptor($log, $ls);
    }

    constructor($log: angular.ILogService, $ls: angular.local.storage.ILocalStorageService) {
        this.request = (config) => {
            config.headers = config.headers || {};
            config.params = config.params || {};

            if (false === config.params.hasOwnProperty('language')) {
                config.headers['X-LANGUAGE'] = 'en';
            }

            return config;
        };
        this.responseError = (config) => {
            return config;
        }
    }

    public responseError = (config: angular.IRequestConfig) => {
        return config;
    };

    public request = (config: angular.IRequestConfig) => {
        config.headers = config.headers || {};
        return config;
    }
}

Then i want to import this one into mine HttpModule (created using ng-metadata)

@NgModule(
    {
        providers: [
            FetcherService,
            RequestBuilderService,
            RequestSerializerService,
        ],
        imports: [
            UiRouter,
            AppConfigInterceptorModule, // <---
            NgResourceModule,
            RouterModule
        ],
        declarations: []
    }
)
export class HttpModule {
}

After few hours of debugging i've found that there's some logic for building those modules (reflective_provider.js:87), after adding simple debug line on loop

    console.log(providers); // <---
    providers.forEach(function (providerType) {
        console.info('building for: ', providerType, ', in: ', angular1Module.name); // <--
        // this is for legacy Angular 1 module
(...)

i've got interesting info
#consoleLog#

- ["ui.router", undefined, undefined, undefined]
- building for:  ui.router , in:  appModule#40
- building for:  undefined , in:  appModule#40

To be clear, i've been working on Angular1-scaffold#ui.router, so module UiRouter is from there, every of 3 remaining modules are created by me.

Issue happened after i wanted to separate most of the code into smaller modules, so i can import them in my main AppModule

---Edit---
Forgot to mention: I'm using version 4.0.0

Solved
Problem were caused by wrong imports.