javascript - 在 Angular 服务中使用 AngularJS 服务

Question

我有一个 AngularJS 应用程序，我正在慢慢地将其转换为 Angular，所以我的计划是将其作为混合应用程序，直到我完全完成转换。但我无法让我的 AngularJS 服务在我的 Angular 服务中工作。我正在按照此处的步骤操作: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 模块获取 typescript 文件？

更新:对于在尝试让混合应用程序工作时最终到达这里的任何人:当尝试在 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());
    }
}

Answer 1

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

另一种方法是将 .js 文件重命名为 .ts。它是有效的 TypeScript，就像所有 JavaScript 一样。