Aurelia & Typoskript Injektion und Vererbung

Question

Ich arbeite mit Aurelia und Typoskript und ich versuche, das Folgende zu erreichen: haben eine Basisklasse Parent, erweitern diese Klasse in einer Klasse namens Child genannt und dann eine Instanz von Child zu injizieren in eine andere Klasse. Hier ist das 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; 
    } 
} 

Allerdings, wenn ich dies tun und instanziiert Home, ich die folgende Fehlermeldung erhalten:

Uncaught SyntaxError: Unexpected token < 

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

Nun, dem ersten Fehler, Uncaught SyntaxError: Unexpected token < gibt mir eine Referenz auf file1.js in der ersten Zeile. (was seltsamerweise den HTML-Code aus dem Index der Anwendung enthält).

Nun, wenn ich die Injektion von file3 nehmen und so etwas wie dies machen:

//@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; 
    } 
} 

ich genau den gleichen Fehler, so dass es nicht zu sein scheint Injektion bezogen.

Also, wie kann ich eine Basisklasse namens Parent haben, diese Klasse in einer Klasse namens Child erweitern und dann eine Instanz von Child in eine andere Klasse injizieren?

Oder ist etwas in meinem Ansatz, der nicht richtig ist?

Danke!

UPDATE: Die einfache Tatsache, einen Anruf für eine new Child() zu haben bricht alles ab, es ist egal, ob es beim Laden der Seite aufgerufen wird, im Konstruktor, oder ob es in einer Methode auf einer Schaltfläche ist . Es bricht beim Laden ab.

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

Nun, wenn ich mich bewege die Child Klasse in der gleichen Datei wie Home und file3 sieht wie folgt aus:

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; 
    } 
} 

und ich instanziiert es so funktioniert es. Allerdings, wenn ich versuche, es zu injizieren, 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; 
    } 
} 

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

Am Ende habe ich sie in separaten Dateien haben wollen, aber es ist ein Anfang macht es so funktioniert :) Vielen Dank!

Answer 1

Ok, so dass die Typoskript Compiler findet file1, weil es in der .csproj Datei ist, damit es nicht den vollständigen Pfad benötigt, aber zur Laufzeit findet die Aurelia framework die Datei (nach dem Typoskript Code transpiled) so etwas wie localhost/file1.js. Sie haben also zwei Möglichkeiten: Entweder erstellen Sie einen tsd.json im Ordner typings (vorausgesetzt, Sie verwenden ein AMD-Modulsystem), in dem Sie die absoluten Pfade für Ihre Typoskriptdefinitionen festlegen oder immer den vollständigen Pfad beim Importieren von benutzerdefinierten Typisierungen schreiben.