我有一个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 回答
在 tsconfig.json 文件的
"compilerOptions"
属性下添加"allowJs": true
或通过命令行将--allowJs
传递给tsc
,以使TypeScript能够导入当前项目范围内的JavaScript依赖项 .另一种方法是简单地重命名 . js 文件到 . ts . 它是有效的TypeScript,就像所有JavaScript一样 .