使用Typescript導出Angular2中的對象文字

Question

我正在使用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（未找到）

我不確定為什么會這樣？

謝謝！

Answer 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