Typescript autoinject in Aurelia

Question

I am new to Typescript and Aurelia. I am try to make @autoinject decorator work in VS2015 ASP.NET MVC 6 project.

Here is my code

import {autoinject} from "aurelia-framework";
import {HttpClient} from "aurelia-http-client";

@autoinject()
export class App {
       http: HttpClient;
       constructor(httpClient: HttpClient) {
          this.http = httpClient;
       }

       activate() {
          this.http.get("/api/test/")...
       }
}

when I run this I get an error saying this.http is undefined.

I believe I need to add TypeScript's emitDecoratorMetadata flag but I don't know how.

I have tried adding tsconfig.json file to my project and set that flag in compiler options but then I get a bunch of errors (duplicate identifier). How can I fix these errors. Do I need to add something to "files"? What exactly?

Here is my config.js file

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "typescript",
  paths: {
    "npm:*": "jspm_packages/npm/*",
    "github:*": "jspm_packages/github/*"
  },

  map: {
    "aurelia-bootstrapper": "npm:[email protected]",
    "aurelia-framework": "npm:[email protected]",
    "aurelia-http-client": "npm:[email protected]",
    "typescript": "npm:[email protected]",
     ....
  }
  });

Answer 1

How does @autoInject() work?

Before you need to aware of TypeScript's emitDecoratorMetadata flag causes the TypeScript compiler to polyfill the Metadata Reflection API and add a special decorator definition to the transpiled TypeScript code.

Aurelia's @autoInject() decorator consumes the type metadata created by TypeScript's decorator and applies it to the class in the same way that the @inject(...) decorator does.

Try like below and you need to enable the new option in the compilerOptions of Type Script.

TS Configuration:

{
    "version": "1.5.1",
    "compilerOptions": {
        "target": "es5",
        "module": "amd",
        "declaration": false,
        "noImplicitAny": false,
        "removeComments": false,
        "noLib": true,
        "emitDecoratorMetadata": true
    },
    "filesGlob": [
        "./**/*.ts",
        "!./node_modules/**/*.ts"
    ],
    "files": [
        // ...
    ]
}

Snippet Screenshot from Article:

Article about emitDecoratorMetadata:
http://blog.durandal.io/2015/05/06/getting-started-with-aurelia-and-typescript/ http://www.danyow.net/inversion-of-control-with-aurelia-part-2/

Available Type Script Options:
https://github.com/Microsoft/TypeScript/wiki/Compiler-Options

You can do it with Gulp-Typescript as well with Gulp option

Options: https://github.com/ivogabe/gulp-typescript#options
GitHub Issue Thread: https://github.com/ivogabe/gulp-typescript/issues/100

Gulp Code Snippet: gulp.task('build-ts', [], function() {

  return gulp.src(paths.typescript)
    .pipe(plumber())
    .pipe(changed(paths.output, {extension: '.js'}))
    .pipe(sourcemaps.init())
    .pipe(ts({
      declarationFiles: false,
      noExternalResolve: true,
      target: 'es5',
      module: 'commonjs',
      emitDecoratorMetadata: true,
      typescript: typescript
    }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.output));
});