javascript - Angular2 RC-4 迁移因反射元数据而失败

Question

我已按照步骤从 Angular2 beta 27 升级到 RC4，但是我遇到了这个错误:

Uncaught (in promise) Error: (SystemJS) reflect-metadata shim is required when using class decorators

我当前的设置是从 typescript 创建的 javascript commonjs 模块，然后放入javascripts/lib/angular2，我遵循了 https://gist.github.com/robwormald/429e01c6d802767441ec 的建议和来自 Angular2 + Jspm.io : reflect-metadata shim is required when using class decorators但这并没有帮助。

 System.config({
            packages: {
                app: {
                    format:'register',
                    defaultExtension:'js'
                },
                '@angular/core'                    : {defaultExtension: 'js', main: 'index.js'},
                '@angular/common'                  : {defaultExtension: 'js', main: 'index.js'},
                '@angular/compiler'                : {defaultExtension: 'js', main: 'index.js'},
                '@angular/router'                  : {defaultExtension: 'js', main: 'index.js'},
                '@angular/router-deprecated'       : {defaultExtension: 'js', main: 'index.js'},
                '@angular/http'                    : {defaultExtension: 'js', main: 'index.js'},
                '@angular/platform-browser'        : {defaultExtension: 'js', main: 'index.js'},
                '@angular/platform-browser-dynamic': {defaultExtension: 'js', main: 'index.js'}
            },
            map: { 
                '@angular': 'javascripts/lib/angular2'
            }
});

System.paths['angular2/*'] = '/javascripts/lib/angular2/*.js';
System.paths['rxjs/*'] = '/javascripts/lib/rxjs/*.js';
System.import("@angular/core").then(function(ng2) { // angular2/core
       System.import('javascripts/app');
});

根据许多 stackoverflow 回复的建议，我尝试将其添加到我的 app.ts 文件的顶部(因为 Angular2 候选版本删除了 angular2-polyfills)，但这没有帮助(当然我已经重新-使用 typescript 生成 js 文件)

import 'reflect-metadata';
require('zone.js/dist/zone');

只要我尝试更多潜在的解决方案，我就会添加更多详细信息。

感谢您的帮助。

Answer 1

我误解了这样一个事实，即我们实际上并不需要使用 typescript 来编译所有内容(无论如何都需要几秒钟才能完成)，而只需要使用文件观察器选项使用 typescript 来编译已更改的文件。

- public-ts-source/
---- file.ts
---- tsconfig.json
- public/
-- javascripts/
---- file.js

我现在有了这个 tsconfig.json

{
    "compilerOptions": {
        "target": "ES5",
        "module":"commonjs",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": true,
        "noImplicitAny": false,
        "outDir": "../public/javascripts"
    }
}

然后我只需要在 Windows 10 的可调试包管理器中运行 tsc -w，public-ts-source 中 .ts 文件内的任何更改都会在 public/javascripts 中编译

用于开发的 SystemJ

所有这些转录的文件都可以被SystemJs直接使用。

我也在使用 Express (ExpressJS)，所以我需要使 node_modules 在静态模式下可用，这样我就不必复制(使用 Gulp)Angular2 所需的一些 node_modules

    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>

用于生产的 Webpack

遵循 Webpack 配置作为开发人员指南 -> WebPack:介绍而不是尝试与每个依赖项进行斗争是另一种选择(并且在投入生产时可能是强制的，以限制正在加载的文件数量)。

它读取依赖关系图，并将其混合到单个(或多个)包中。