Angular2 RC-4迁移失败，使用reflect-metadata

Question

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

Uncaught (in promise) Error: (SystemJS) reflect-metadata shim is使用类装饰器

时必需

我目前的设置是从typescript创建的javascript commonjs模块，然后放入javascripts/lib/angular2，我遵循https://gist.github.com/robwormald/429e01c6d802767441ec和angular2 + Jspm的建议。IO: reflect-metadata shim在使用类装饰器时是必需的，但它没有帮助。

 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响应的建议，我试图添加(因为Angular2发布候选版本删除了Angular2 -polyfills)到我的app.ts文件的顶部，但它没有帮助(当然我已经用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

中编译。

SystemJs用于开发

所有这些转录的文件都可以被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 for production

遵循Webpack配置作为开发者指南-> Webpack:一个介绍而不是试图与每个依赖项作斗争是另一种选择(并且可能在生产环境中限制正在加载的文件数量时是强制性的)。

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