Angular2 RC-4 migration failing with reflect-metadata

Question

I've followed the steps to upgrade from the Angular2 beta 27 to RC4, however I'm stuck with that error:

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

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.

 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)

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.

Answer 1

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.

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

I now have this 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

SystemJs for development

All these transcripted file can be used directly by 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

    <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

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).

It reads the dependency graph, and mix it into a single (or more) bundle(s).