Aurelia & Typescript injection and inheritance

Question

I am working with Aurelia and Typescript and I'm trying to achieve the following thing: have a base class called Parent, extend this class in a class called Child and then inject an instance of Child in another class. Here's the setup:

//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 instantiate Home, I get the following error:

Uncaught SyntaxError: Unexpected token <

along 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 reference to file1.js at the first line. (which strangely contains the html code from the index of the application).

Now, if I take the injection out of file3 and make 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 injection related.

So, how can I have a base class called Parent, extend this class in a class called Child and then inject an instance of Child in another class?

Or is something in my approach that is not right?

Thanks!

UPDATE: The simple fact of having a the call for a new Child() breakes everything, it doesn't matterr if it is called at the loading of the page, in the constructor, or if it is in a method on a button. It breakes when loading.

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

Now if I move the Child class in 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 instantiate it like this it works. However, when I try to inject it, so:

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?

In the end I want to have them in separate files, but it is a start making it work so:) Thanks!

Have you tried setting the full absolute path to file1? Something like absolute/path/to/file1? — Laurentiu Stamate

Laurentiu Stamate Laurentiu Stamate · Accepted Answer · 2015-08-31T08:47:24

Ok, 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 the typescript code is transpiled) something like localhost/file1.js. So you have 2 possibilities: either create a tsd.json in the typings folder (assuming you are using AMD module system) in which to set the absolute paths for your typescript definitions or always write the full path when importing custom typings.

Aurelia & Typescript injection and inheritance

1 Answers