Using angularJS services in an angular service

Question

I have an angularJS application that I am slowly converting to angular so my plan is to have it as a hybrid application until I am completely done the conversion. I can't get my angularJS services to work in my angular services though. I am following the steps here: https://angular.io/docs/ts/latest/guide/upgrade.html#!#making-angularjs-dependencies-injectable-to-angular

I have my javascript angularJS service:

"use strict";

export class DAL {
    get($q, $filter, $http, $log, IsoStringToDate, UnitConversion, $cookies, $uibModal, Utilities) {
        ... functions that do stuff ...
    }
}

(function() {

    var dal = function ($q, $filter, $http, $log, IsoStringToDate, UnitConversion, $cookies, $uibModal, Utilities) {
        var dalInst = new DAL();
        return dalInst.get($q, $filter, $http, $log, IsoStringToDate, UnitConversion, $cookies, $uibModal, Utilities);
    };

    angular
        .module('myWebApp')
        .factory('DAL', ['$q', '$filter', '$http', '$log','IsoStringToDate','UnitConversion','$cookies','$uibModal','Utilities', dal]);

}());

I have my ajs-upgraded-providers.ts:

/// <reference path="./ajs-services/index.d.ts" />
import { DAL } from '../../app/scripts/factory/dal';

export function dalServiceFactory(i: any) {
    return i.get('DAL');
}

export const dalServiceProvider = {
    provide: DAL,
    useFactory: dalServiceFactory,
    deps: ['$injector']
};

But when I just try to build the project with webpack I get this error: "TS2307: Cannot find module '../../app/scripts/factory/dal' How can I get the typescript file using my javascript module?

UPDATE: For anyone that ends up here while trying to get a hybrid app working: This approach DID NOT work when trying to use an angularJS component/service in an Angular component/service. I ended up following the advice here: Use AngularJS (Angular1) module from Angular2 project and here: Inject angular 1 service into Angular 2 To get my hybrid app working. Example:

Javascript inside angularJS code:

angular.module('myWebApp')
    .factory('testFactory', [function() {
        return {
            test: function() {
                return 'this is a test';
            }
        };
    }]);

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeAdapter } from '@angular/upgrade';

@NgModule({
    imports: [
        BrowserModule,
    ],
    declarations: [],
    entryComponents: [],
    providers: [
    {
        provide: 'TestService',
        useFactory: ($injector: any) => $injector.get('testFactory'),
        deps: ['$injector']
    }]
})
export class AppModule {
    ngDoBootstrap() {}
}

//Upgrade any angularJS components we use from old project

let upgrade = new UpgradeAdapter(AppModule, null);

upgrade.upgradeNg1Provider('testFactory');

Angular service that uses angularJS service:

import { Injectable, Inject } from '@angular/core';

@Injectable()
export class TeamService {
    constructor(@Inject('TestService') testService: any) {
        console.log('TestService: ', testService.test());
    }
}

Do not combine <reference path="" /> with modules. It will cause harm. Just use import and export. — Aluan Haddad
– Aluan Haddad, Commented Apr 18, 2017 at 5:18
I originally did not have the reference tag but it was the exact same error with it and without it. — Alex Egli
– Alex Egli, Commented Apr 18, 2017 at 13:32
I'm just pointing out that it shouldn't be used. Can you verify that the module exists at the relative path? — Aluan Haddad
– Aluan Haddad, Commented Apr 18, 2017 at 13:34
--allowJs worked! It built ok after I added that to my tsconfig.json. Thanks! If you want to put that as an answer I can mark it as the official answer. — Alex Egli
– Alex Egli, Commented Apr 18, 2017 at 13:58

Aluan Haddad · Accepted Answer · 2017-04-18 15:11:59Z

0

Add "allowJs": true under the "compilerOptions" property of you're tsconfig.json file or pass --allowJs to tsc via the command line to enable TypeScript to import JavaScript dependencies that are within the scope of the current project.

Another approach is simply to rename the .js file to .ts. It is valid TypeScript, as is all JavaScript.

answered Apr 18, 2017 at 15:11

Aluan Haddad

32.1k10 gold badges83 silver badges95 bronze badges

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

Collectives™ on Stack Overflow

Using angularJS services in an angular service

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related