Angular2 RC-4迁移失败与反射元数据

Question

我遵循了从Angular2 beta 27升级到RC4的步骤，但是我仍然遇到了这个错误：

默认错误：(SystemJS)反射-在使用类修饰器时需要元数据空间

我现在的设置是从类型记录创建javascript公共is模块，然后放入javascript/lib/angular2 2，我遵循了来自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');
});

正如许多堆栈溢出响应所建议的那样，我尝试将(因为Angular2发布候选程序删除了angular2-poly填充)添加到我的app.ts文件的顶部，但这没有帮助(当然，我已经用类型记录重新生成了js文件)。

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

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

谢谢你的帮助。

Answer 1

我有这样一个事实，即我们实际上不需要用类型记录编译所有的东西(无论如何，这需要几秒钟的时间)，但是只有使用文件观察器选项修改的带有类型记录的文件。

- 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源代码中的.ts文件中的任何更改都会以公共/javascripts编译。

系统促进发展

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

我也在使用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:介绍而不是试图与每个依赖进行斗争是另一种选择(在生产中可能是强制性的，以限制正在加载的文件数量)。

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