首页 文章

在角度服务中使用angularJS服务

提问于
浏览
1

我有一个angularJS应用程序,我正在慢慢转换为angular,所以我的计划是将它作为混合应用程序,直到我完成转换 . 我不能让我的angularJS服务在我的角度服务中工作 . 我按照这里的步骤:https://angular.io/docs/ts/latest/guide/upgrade.html#!#making-angularjs-dependencies-injectable-to-angular

我有我的javascript angularJS服务:

"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]);

}());

我有我的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']
};

但是,当我尝试使用webpack构建项目时,我收到此错误:“TS2307:找不到模块'../../app/scripts/factory/dal'如何使用我的javascript模块获取打字稿文件?

更新:对于那些在尝试使混合应用程序工作时最终到达此处的人:这种方法在尝试在Angular组件/服务中使用angularJS组件/服务时不起作用 . 我最终遵循这里的建议:Use AngularJS (Angular1) module from Angular2 project和这里:Inject angular 1 service into Angular 2让我的混合应用程序正常工作 . 例:

angularJS代码中的Javascript:

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');

使用angularJS服务的Angular服务:

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

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

1 回答

  • 0

    tsconfig.json 文件的 "compilerOptions" 属性下添加 "allowJs": true 或通过命令行将 --allowJs 传递给 tsc ,以使TypeScript能够导入当前项目范围内的JavaScript依赖项 .

    另一种方法是简单地重命名 . js 文件到 . ts . 它是有效的TypeScript,就像所有JavaScript一样 .

相关问题