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!
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With