[英]Angular2 RC-4 migration failing with reflect-metadata
I've followed the steps to upgrade from the Angular2 beta 27 to RC4, however I'm stuck with that error: 我已经按照从Angular2 beta 27升级到RC4的步骤,但是我坚持这个错误:
Uncaught (in promise) Error: (SystemJS) reflect-metadata shim is required when using class decorators 未捕获(承诺)错误:使用类装饰器时需要(SystemJS)reflect-metadata shim
My current setup is javascript commonjs modules created from typescript and then put in javascripts/lib/angular2 , I've followed advices from https://gist.github.com/robwormald/429e01c6d802767441ec and from Angular2 + Jspm.io : reflect-metadata shim is required when using class decorators but it did not help. 我目前的设置是从typescript创建的javascript commonjs模块,然后放入javascripts / lib / angular2 ,我遵循https://gist.github.com/robwormald/429e01c6d802767441ec和Angular2 + Jspm.io的建议:reflect-metadata使用类装饰器时需要填充,但它没有帮助。
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');
});
As advised on many stackoverflow responses, I've tried to add (because Angular2 release candidate removed angular2-polyfills) that into the top of my app.ts file, but it doesn't help (of course I have re-generated the js file with typescript) 正如许多stackoverflow响应所建议的,我已经尝试添加(因为Angular2发布候选版本删除了angular2-polyfills)到app.ts文件的顶部,但它没有帮助(当然我已经重新生成了js)打字稿文件)
import 'reflect-metadata';
require('zone.js/dist/zone');
I'll add more details as long I try more potential solutions. 只要我尝试更多潜在的解决方案,我就会添加更多细节。
Thank you for your help. 谢谢您的帮助。
I had missunderstood the fact that we do not actually need to compile everything with typescript (which takes some seconds to complete anyway), but only the changed files with typescript using the file watcher option. 我误解了这样一个事实,即我们实际上并不需要使用typescript编译所有内容(无论如何都需要几秒钟才能完成),但只使用文件观察器选项使用typescript更改了文件。
- public-ts-source/
---- file.ts
---- tsconfig.json
- public/
-- javascripts/
---- file.js
I now have this tsconfig.json 我现在有这个tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"module":"commonjs",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": true,
"noImplicitAny": false,
"outDir": "../public/javascripts"
}
}
Then I only need to run tsc -w in the Debuggable Package Manager of Windows 10, and any change inside .ts files in public-ts-source gets compiled in public/javascripts 然后我只需要在Windows 10的Debuggable Package Manager中运行tsc -w,并且public-ts-source中的.ts文件内的任何更改都会在public / javascripts中编译
All these transcripted file can be used directly by SystemJs. 所有这些转录文件都可以由SystemJs直接使用。
I am also using Express (ExpressJS), so I needed to make the node_modules available in static mode, so I do not have to copy (with Gulp) some node_modules that are required with Angular2 我也在使用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>
Follow Webpack configuration as the Developper Guide -> WebPack: an introduction instead of trying to fight with every dependency is another option (and probably mandatory when going in production to limit the number of files that are being loaded). 遵循Webpack配置作为开发者指南 - > WebPack:介绍而不是尝试与每个依赖项作斗争是另一种选择(并且在生产中可能是强制性的,以限制正在加载的文件的数量)。
It reads the dependency graph, and mix it into a single (or more) bundle(s). 它读取依赖图,并将其混合到一个(或多个)束中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.