使用 Typescript 在 Angular2 中导出对象文字答案

【问题标题】：Exporting an object literal in Angular2 with Typescript使用 Typescript 在 Angular2 中导出对象文字
【发布时间】：2016-06-07 19:11:06
【问题描述】：

我正在使用 Typescript 构建一个小型 Angular2 应用程序，到目前为止一切顺利。

我想使用一个名为 config 的文件，该文件将包含应用程序的所有设置和类似设置。这是有问题的文件：

ConfigObject.js

export var ConfigObject = {
    apiVersion : 'v1/',
    productBox : 'http://localhost:8931/api/'
};

我正在尝试将其导入服务以使用某些设置，但它说找不到文件。

这是我的服务：

import { Component, Injectable } from 'angular2/core';
import { Http, Response } from 'angular2/http';
import 'rxjs/add/operator/map';

import { ConfigObject } from '../../ConfigObject';


import { PRODUCTS } from '../data-stores/mock-products';

@Injectable()
export class ProductService {
    constructor(private http: Http) {

    }
    private APIUrl = ConfigObject.apiVersion;
    getHeroes() {
        return Promise.resolve(PRODUCTS);
    }
    getHeroesSlowly() {
        /*return new Promise<Hero[]>(function(resolve) {
            setTimeout(function() {
                return resolve(HEROES);
            }, 2000)
        });*/
        // The below is the new fat arrow version of the above
        /*return new Promise<Hero[]>(resolve =>
            setTimeout(() => resolve(HEROES), 2000)
        );*/
    }
}

ConfigObject 文件位于应用程序的根目录中，最多 2 个文件夹。当我尝试启动应用程序时，我在控制台中收到以下错误：

GET http://localhost:3000/ConfigObject 404（未找到）

我不知道为什么会这样？

谢谢！

【问题讨论】：

我猜它需要在src 文件夹中。
我已尝试将文件移动到与服务相同的目录，但没有任何区别。

标签： javascript typescript angular

【解决方案1】：

问题与您的 SystemJS 配置有关。由于您有错误：http://localhost:3000/ConfigObject，这意味着没有规则将模块名称（../../ConfigObject）与实际的 JS 文件正确链接。

您可以尝试在根级别的配置中定义defaultExtension 到js：

System.config({
  defaultExtension: 'js',
  (...)
});

否则，您需要将文件移动到您定义规则的源文件夹中。例如app 具有以下配置：

System.config({
  (...)
  packages: {
    app: {
      defaultExtension: 'js'
    }
  }
});

有关详细信息，请参阅此文档：

https://github.com/systemjs/systemjs/blob/master/docs/config-api.md

【讨论】：