tslib_1.__metadata is not a function

[sindilevich]

Using SystemJS 0.20.9 set to transpile .ts files on the fly with TypeScript 2.2.1 with importHelpers: true produces the following error in run-time:

Error: tslib_1.__metadata is not a function Evaluating http://127.0.0.1:8080/app/components/application/application.ts

The SystemJS config is as follows

System.config({
    transpiler: 'ts',
    typescriptOptions: {
        emitDecoratorMetadata: true,
        experimentalDecorators: true,
        importHelpers: true,
        target: 'ES5',
        module: 'system'
    },
    map: {
        '@angular': 'node_modules/@angular',
        'rxjs'    : 'node_modules/rxjs',
        'tslib'   : 'node_modules/tslib'
    },
    paths: {
        'ts':                      'node_modules/plugin-typescript/lib',
        'typescript':              'node_modules/typescript'
    },
    meta: {
        '@angular/*': {esModule: true}
    },
    packages: {
        'app'                              : {main: 'main', defaultExtension: 'ts'},
        'rxjs'                             : {main: 'Rx'},
        '@angular/core'                    : {main: 'bundles/core.umd.min'},
        '@angular/common'                  : {main: 'bundles/common.umd.min'},
        '@angular/compiler'                : {main: 'bundles/compiler.umd.min'},
        '@angular/router'                  : {main: 'bundles/router.umd.min'},
        '@angular/platform-browser'        : {main: 'bundles/platform-browser.umd.min'},
        '@angular/platform-browser-dynamic': {main: 'bundles/platform-browser-dynamic.umd.min'},
        'ts'                               : {main: 'plugin'},
        'typescript'                       : {main: 'lib/typescript', meta: {'lib/typescript.js': {exports: 'ts'}}},
        'tslib'                            : {main: 'tslib'}
    }
});

The package.json

{
  "name": "auction_ch2",
  "description": "Sample Online Auction from Chapter 2 from the book Angular 2 Development with TypeScript",
  "homepage": "https://www.manning.com/books/angular-2-development-with-typescript",
  "private": true,
  "scripts": {
    "start": "live-server"
  },
  "engines": {
    "npm": ">=2.14.x"
  },
  "dependencies": {
    "@angular/common": "^2.4.9",
    "@angular/compiler": "^2.4.9",
    "@angular/core": "^2.4.9",
    "@angular/forms": "^2.4.9",
    "@angular/http": "^2.4.9",
    "@angular/platform-browser": "^2.4.9",
    "@angular/platform-browser-dynamic": "^2.4.9",
    "@angular/router": "^3.4.9",

    "core-js": "^2.4.1",
    "plugin-typescript": "^7.0.6",
    "rxjs": "^5.2.0",
    "systemjs": "^0.20.9",
    "tslib": "^1.6.0",
    "zone.js": "^0.7.7",

    "bootstrap": "^3.3.7",
    "jquery": "^3.1.1"
  },
  "devDependencies": {
    "live-server": "^1.2.0",
    "typescript": "^2.2.1"
  }
}

Setting module: 'commonjs' in the typescriptOptions object, fixes the issue and does not produce any errors.

However, when the typescriptOptions object configured with module: 'commonjs', there are warnings in the console:

TypeScript [Warning] transpiling to CommonJS, consider setting module: "system" in typescriptOptions to transpile directly to System.register format

I believe there should be a solution to both make TypeScript produce modules in the System.register format and using the much anticipated importHelpers: true option with the TypeScript compiler.

Thank you in advance for any leads and help!

[frankwallis]

I think the solution to this is probably to use the es module version of tslib: https://github.com/Microsoft/tslib/blob/master/tslib.es6.js

packages: {
    ...
    'tslib': {main: 'tslib.es6.js'}
}

[sindilevich]

@frankwallis, thanks to your help, I came up with the SystemJS configuration as follows, which allows both making TypeScript produce modules in the System.register format and using the importHelpers: true option with the TypeScript compiler.

System.config({
    transpiler: 'ts',
    typescriptOptions: {
        emitDecoratorMetadata: true,
        experimentalDecorators: true,
        importHelpers: true,
        target: 'ES5',
        module: 'system'
    },
    map: {
        '@angular': 'node_modules/@angular',
        'rxjs'    : 'node_modules/rxjs',
        'tslib'   : 'node_modules/tslib'
    },
    paths: {
        'ts':                      'node_modules/plugin-typescript/lib',
        'typescript':              'node_modules/typescript'
    },
    meta: {
        '@angular/*': {esModule: true}
    },
    packages: {
        'app'                              : {main: 'main', defaultExtension: 'ts'},
        'rxjs'                             : {main: 'Rx'},
        '@angular/core'                    : {main: 'bundles/core.umd.min'},
        '@angular/common'                  : {main: 'bundles/common.umd.min'},
        '@angular/compiler'                : {main: 'bundles/compiler.umd.min'},
        '@angular/router'                  : {main: 'bundles/router.umd.min'},
        '@angular/platform-browser'        : {main: 'bundles/platform-browser.umd.min'},
        '@angular/platform-browser-dynamic': {main: 'bundles/platform-browser-dynamic.umd.min'},
        'ts'                               : {main: 'plugin'},
        'typescript'                       : {main: 'lib/typescript', meta: {'lib/typescript.js': {exports: 'ts'}}},
        'tslib'                            : {main: 'tslib.es6'}
    }
});