0

我只是想用尽可能少的设置创建概念验证 TS + SystemJS 项目——没有“Angular2 入门工具包”等。我花了一个小时在谷歌上搜索并调整了这个设置，但它仍然不起作用。

我有以下设置：

/src/
 - model.ts
 - bootstrap.ts

/dist/

tsconfig.json
system.config.js
index.html

我的tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "noImplicitAny": false,
        "sourceMap": true,
        "removeComments": false,
        "outDir": "./dist/"
    },
    "filesGlob": [
        "./src/**/*.ts"
    ],
    "compileOnSave": true
}

我的SystemJS 配置

System.config({
    paths: {
        // paths serve as alias
        'npm:': 'node_modules/'
    },
    map: {
        testapp: './src'
    },
    baseURL: './src',
    packages: {
        testapp: {
            format: 'register',
            defaultExtension: 'js'
        }
    },

});

我的index.html

  <script src="/node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="/node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
    System.import('bootstrap.ts')
        .then(function(app) {
            console.log('app bootstrap success!');
        }, console.error.bind(console));
    </script>

最后我在控制台中有以下错误：

system.src.js:1051 GET http://0.0.0.0:8080/src/bootstrap.ts.js 404 (Not Found)fetchTextFromURL @ system.src.js:1051....
Error: (SystemJS) XHR error (404 Not Found) loading

我在一个终端选项卡中运行tsc -w，在另一个终端选项卡中运行简单的 https 服务器。

显然 - SystemJS 想要使用扩展名为.ts.js的文件，而 tsc 生成 .js 和源映射但不是 .ts.js。

我想念webpack或gulp做部分工作吗？我认为 SystemJStsc可以进行捆绑和转译，但显然在构建过程中缺少一些东西。解释 SystemJS 设置而不是修复错误也会非常有帮助。

4

1 回答 1

0

可以通过以下方式修复设置：

1）正如@Nitzan Tommer提到的 -在 System.import块中将 .ts 更改为 .js

index.html: System.import('bootstrap.js')

2) (SystemJS) require is not defined这篇文章修复了错误- 更改 tsconfig.json 以将“系统”作为模块

{
    "compilerOptions": {
        "module": "system",
        "target": "es5",
//..

这是我使用此设置创建的演示存储库：https ://github.com/shershen08/systemjs-typescript-simple

于 2016-11-01T12:34:27.427 回答