각도 서비스에서 angularJS 서비스 사용하기

Question

저는 천천히 각도로 변환되는 angularJS 응용 프로그램을 가지고 있으므로 변환을 완료 할 때까지 내 계획이 하이브리드 응용 프로그램으로 사용됩니다. 내 angularJS 서비스가 내 각 서비스에서 작동하도록 할 수 없습니다. 여기 단계에 따라 오전 :

https://angular.io/docs/ts/latest/guide/upgrade.html#!#making-angularjs-dependencies-injectable-to-angular 내가 내 자바 스크립트 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 업그레이드-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'모듈을 찾을 수 없습니다 자바 스크립트 모듈을 사용하여 typescript 파일을 얻으려면 어떻게합니까?

업데이트 : 하이브리드 응용 프로그램을 작동 시키려고 할 때 여기에서 끝나는 사람 :이 접근법은 Angular 구성 요소/서비스에서 angularJS 구성 요소/서비스를 사용하려고 할 때 작동하지 않습니다. 나는 여기에 조언을 따라 끝냈다. Use AngularJS (Angular1) module from Angular2 project 그리고 여기 : Inject angular 1 service into Angular 2 내 하이브리드 응용 프로그램을 작동 시키려면. 예 : AngularJS와 코드 내부

자바 스크립트 :

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

app.module.ts :

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

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

Answer 1

가 "compilerOptions"에서 "allowJs": true 추가 : AngularJS와 서비스를 사용

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

각도 서비스 당신의 재산은 tsconfig입니다. json 파일을 사용하거나 명령 줄을 통해 --allowJs에서 tsc을 전달하여 TypeScript에서 현재 프로젝트의 범위 내에있는 JavaScript 종속성을 가져올 수 있습니다.

또 다른 접근법은 단순히 이름을 바꾸는 것입니다. js to. ts. 모든 JavaScript와 마찬가지로 유효한 TypeScript입니다.