Instantiate new typed object from domain model in Angular 2

Discussão em 'Angular' iniciado por mrlund, Novembro 25, 2024.

  1. mrlund

    mrlund Guest

    My Angular 2 (RC) app using TypeScript breaks every time I try to instantiate a new object from my domain models, with the error:


    Error: TypeError: Cannot read property 'prototype' of undefined(…)
    ​

    export class Reservation {
    public ReservationId: number;
    public SeatingId: number;
    public EventId: number;

    // ...

    constructor() {}
    }


    then in my Component I use:

    import { Reservation } from '../models/models';
    ....
    let booking = new Reservation();


    This and other model objects get instantiated by http services without issues, passed as parameters, and generally used throughout the application - all without issue, but the moment I add "new Reservation()" anywhere in the app I get this error.

    I've seen plenty of examples using this syntax, and I've also tried to create an Injectable factory service to return the new object, and every other way I could think of, but no matter where in my app i add this line it breaks during bootstrap. There's no TypeScript errors shown or anything during build.

    UPDATE: It seems that the issue only occurs with a class imported from another file. I created a dummy example, and when the class is in the same file as my component it works, but if the class is imported from another file it doesn't, i.e. this works:

    import { Component, OnInit } from '@angular/core';
    //import { Foo } from '../models/models';
    export class Foo {
    public Name: string;
    public Score: number;
    }

    @Component({
    selector: 'foo',
    template: `
    <h1>{{bar.Name}}</h1>
    `,
    directives: []
    })
    export class FooComponent implements OnInit {
    bar : Foo;
    constructor() { }
    ngOnInit() {
    this.bar = new Foo();
    this.bar.Name = "Foobar";
    }
    }


    This does not:

    import { Component, OnInit } from '@angular/core';
    import { Foo } from '../models/models';

    @Component({
    selector: 'foo',
    template: `
    <h1>{{bar.Name}}</h1>
    `,
    directives: []
    })
    export class FooComponent implements OnInit {
    bar : Foo;
    constructor() { }
    ngOnInit() {
    this.bar = new Foo();
    this.bar.Name = "Foobar";
    }
    }


    In both cases the Foo class is identical. The path to the file is also correct. My editor is VS Code, and there's no build errors or trouble resolving the imported class, or using the classes in any other way than new Foo();

    UPDATE 2:

    I found out that the import statement in my ts file does not translate to a require statement in the corresponding compiled js file, hence my models.ts, which is compiled to models.js is not loaded by the browser, which I'm guessing would explain why I can't instantiate any of the classes contained in it.

    UPDATE 3:

    Last update might be a red herring. If I try to inject the class I want to use in the component constructor the models.js is added as required in the js file and loaded by the browser, but the exact same error occurs.

    Continue reading...

Compartilhe esta Página