Aurelia & Typecript injection và inheritance

Question

Tôi đang làm việc với Aurelia và Typecript và tôi đang cố gắng đạt được điều sau: có một lớp cơ sở có tên là Parent, mở rộng lớp này trong một lớp gọi là Child và sau đó tiêm một thể hiện của Child một lớp khác. Dưới đây là các thiết lập:

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

Tuy nhiên, khi tôi làm điều này và nhanh chóng Home, tôi nhận được lỗi sau:

Uncaught SyntaxError: Unexpected token < 

cùng với ERROR [app-router] Router navigation failed, and no previous location could be restored.

Bây giờ, lỗi đầu tiên, Uncaught SyntaxError: Unexpected token < cho tôi tham chiếu đến file1.js ở dòng đầu tiên. (có chứa mã html lạ từ chỉ mục của ứng dụng).

Bây giờ, nếu tôi đi tiêm ra khỏi file3 và làm một cái gì đó như thế này:

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

tôi nhận được chính xác những lỗi tương tự, vì vậy nó dường như không có liên quan đến tiêm.

Vì vậy, làm thế nào tôi có thể có một lớp cơ sở được gọi là Parent, mở rộng lớp này trong một lớp gọi là Child và sau đó tiêm một thể hiện của Child trong một lớp khác?

Hoặc có điều gì đó trong cách tiếp cận của tôi không đúng?

Cảm ơn!

CẬP NHẬT: Thực tế đơn giản khi có cuộc gọi cho một new Child() vi phạm mọi thứ, nó không quan trọng nếu nó được gọi là tải trang, trong hàm tạo hoặc nếu phương thức trên một nút . Nó phá vỡ khi tải.

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

Bây giờ nếu tôi di chuyển lớp Child trong cùng một tập tin như Home và file3 trông như thế này:

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

và tôi nhanh chóng nó như thế này nó hoạt động. Tuy nhiên, khi tôi cố gắng tiêm nó, vì vậy:

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

tôi nhận được: inner error: Error: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?

Cuối cùng tôi muốn có chúng trong tập tin riêng biệt, nhưng nó là một sự khởi đầu làm cho nó hoạt động như thế :) Cảm ơn!

Answer 1

Ok, do đó trình biên dịch nguyên cảo thấy file1 vì nó là trong file .csproj vì vậy nó không cần đường dẫn đầy đủ, nhưng khi chạy, các Aurelia framework tìm thấy các tập tin (sau khi mã nguyên cảo được transpiled) cái gì đó như localhost/file1.js. Vì vậy, bạn có 2 khả năng: hoặc tạo một tsd.json trong thư mục typings (giả sử bạn đang sử dụng hệ thống mô-đun AMD) để đặt đường dẫn tuyệt đối cho định nghĩa kiểu của bạn hoặc luôn viết đường dẫn đầy đủ khi nhập kiểu nhập tùy chỉnh.