Question

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

Uncaught（in promise）错误：（SystemJS）reflect-metadata shim是使用类装饰器时需要

我目前的设置是从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响应所建议的那样，我已经尝试添加（因为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的Debuggable Package Manager中运行tsc -w，并且public-ts-source中的.ts文件内的任何更改都会在public / javascripts中编译

SystemJs for development

所有这些转录文件都可以由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配置作为开发者指南 - ＆gt; WebPack：介绍而不是尝试与每个依赖项斗争是另一种选择（并且在生产中可能是强制性的，以限制正在加载的文件的数量）。

它读取依赖图，并将其混合到一个（或多个）包中。

Angular2 RC-4迁移失败，带有反射元数据

1 个答案:

SystemJs for development

用于生产的Webpack