Aurelia & Typescript Injection and Inheritance

Question

I work with Aurelia and Typescript, and I'm trying to achieve the following: have a base class named Parent , extend this class in a class called Child , and then insert an instance of Child in another class. Here's the setting:

 //file1 export class Parent { constructor() { debugger; } } //file2 import {Parent} from "file1"; export class Child extends Parent { constructor() { super(); debugger; } } //file3 import {inject} from "aurelia-framework"; import {Child} from "file2"; @inject(Child) export class Home { private child: Child; constructor(_child: Child) { this.child = _child; debugger; } } 

However, when I do this and create an instance of Home , I get the following error:

 Uncaught SyntaxError: Unexpected token < 

together with ERROR [app-router] Router navigation failed, and no previous location could be restored.

Now the first error, Uncaught SyntaxError: Unexpected token < gives me a link to file1.js in the first line. (which strangely contains the html code from the application index).

Now, if I take an injection from file3 and do something like this:

 //@inject(Child) export class Home { private child: Child; constructor() { this.child = new Child(); //here I don't inject, I just //instantiate a new object of type Child - still the same error debugger; } } 

I get exactly the same error, so it doesn't seem to be related to injections.

So, how can I get a base class called Parent , extend this class in a class called Child , and then insert the Child instance into another class?

Or is there something wrong with my approach?

Thanks!

UPDATE: the simple fact of having a call for new Child() shaves everything, it does not matter if it is called when the page loads, in the constructor, or if it is in the button method. When loading, it breaks.

  buttonMethod(){ var x = new Child(); //it breakes the same way } 

Now, if I move the Child class to the same file as Home , and file3 looks like this:

 import {inject} from "aurelia-framework"; import {Parent} from "file1"; export class Home { child: Child; constructor() { this.child = new Child(); debugger; } } export class Child extends Parent { constructor() { super(); debugger; } } 

and I create it the way it works. However, when I try to enter it like this:

 import {inject} from "aurelia-framework"; import {Parent} from "file1"; @inject(Child) export class Home { child: Child; constructor(_child: Child) { this.child = _child; debugger; } } export class Child extends Parent { constructor() { super(); debugger; } } 

I get: inner error: Error: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI? inner error: Error: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?

In the end, I want them to be in separate files, but this started to make it work like that :) Thanks!

Answer 1

So, the Typescript compiler finds file1 because it is in the .csproj file, so it doesn’t need the full path, but at runtime the Aurelia framework finds the file (after Typescript code transpiled) something like localhost/file1.js . Thus, you have 2 options: either create tsd.json in the typings folder (provided that you are using the AMD system modular system) to set the absolute paths for your Typescript definitions, or always write the full path when importing custom types.