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 `` with modules. It will cause harm. Just use `import` and `export`. — Aluan Haddad, Apr 18 '17 at 05:18
I originally did not have the reference tag but it was the exact same error with it and without it. — Alex Egli, Apr 18 '17 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, Apr 18 '17 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, Apr 18 '17 at 13:58

score 0 · Accepted Answer · answered Apr 18 '17 at 15:11

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.

Using angularJS services in an angular service

1 Answers1