Question

我正在尝试模块化Angular 2应用程序，将服务放在不同的文件中：

app.ts

/// <reference path="typings/angular2/angular2.d.ts" />
/// <reference path="./services.ts" />

import {Component, View, bootstrap, NgFor} from 'angular2/angular2';

@Component({
  selector: 'my-app',
  appInjector: [Service.TechnologiesService]
})
@View({
  templateUrl: 'index-angular',
  directives:[NgFor]
})

class MyAppComponent {
  name: string;
  technologies: Array<string>;

  constructor(technologiesService: Service.TechnologiesService) {
    this.name = 'DopAngular';
    this.technologies = technologiesService.technologies;
  }
}

bootstrap(MyAppComponent);

services.ts

module Service{
  export class TechnologiesService {
    technologies: Array<string>;
    constructor() {
      this.technologies = ['Angular 2 Developer Preview', 'Express', 'Jade', 'Gulp', 'Material Design Lite', 'Polymer', 'Sass', 'Karma', 'Mocha', 'Should', 'npm', 'Bower'];
    }
  }
}

这些文件编译成js没有错误，但是当我在浏览器中运行应用程序时，我得到：

Uncaught ReferenceError: Service is not defined

关于如何解决这个问题的任何想法？

Answer 1

/// <reference path="./services.ts" />允许编译器查看引用文件的类型信息，但不会导致生成/包含目标的任何代码。（此功能主要用于外部/环境库。）

要从您自己的代码中引用其他TS文件，您应该使用import {...} from 'file';语法（请参阅handbook），例如

import {Service} from 'services'

您还需要在TS编译器配置和浏览器中配置模块加载器（SystemJS或requireJS）。

或者，您可以通过在services.ts之前的<script>标记中包含app.ts的已编译版本来执行不可撤销的黑客操作，并保持代码相同。

另请注意：您放入services.ts的内部模块是错误的模式，不推荐使用该关键字。请参阅上面链接的手册。

Answer 2

我相信引用语句只是为TS编译器提供类型信息，但不会包含任何代码。因此它可能在IDE中自动完成并编译，但它不会在typescript编译器生成的.js中生成任何内容。因此，您需要导入您的服务，例如：

import {TechnologiesService} from 'services';

Answer 3

以下是我最终成功实现的方法：

修改 services.ts （现在导出服务而不使用module关键字：

export class TechnologiesService {
  technologies: Array<string>;
  constructor() {
    this.technologies = ['Angular 2 Developer Preview', 'Express', 'Jade', 'Gulp', 'Material Design Lite', 'Polymer', 'Sass', 'Karma', 'Mocha', 'Should', 'npm', 'Bower'];
  }
}

假设具有此层次结构的已编译js文件的公共资源文件夹：

|--angular
     |----app.js
     |----services.js

导入序列应为：

/// <reference path="typings/angular2/angular2.d.ts" />
/// <reference path="services.ts" />
import {Component, View, bootstrap, NgFor} from 'angular2/angular2';
import {TechnologiesService} from 'angular/services'

Angular2 - 在不同文件中拆分应用程序时的引用错误

3 个答案: