How to export typescript enum with systemjs and Angular2?

Question

I'm trying to use Angular2 with system.js and typescript. It's been working fine for the interfaces I've been exporting so far, but as soon as I try to import an enum it all blows up. In the following code, Card works fine, but when I import Legend I get the error GET http://localhost:3000/shared/legend 404 (Not Found).

import {Component, OnInit} from 'angular2/core';
import {CardService} from './card.service';
import {Card} from '../../shared/card';
import {Legend} from '../../shared/legend';

@Component({
    selector: 'cards-list',
    templateUrl: 'app/cards-list.html',
    providers: [CardService]
})
export class CardsListComponent implements OnInit {
    public cards:Card[];

    //using Legend is the problem!
    public legendValues:String[] = [Legend[Legend.ARIANE]];

    constructor(private _cardService:CardService) {
    }
    getCards() {
        this._cardService.getCards(cards => this.cards = cards);
    }
    ngOnInit() {
        this.getCards();
    }
}

Here is the legend file:

export enum Legend {
    THE_RAPTOR,
    LINZA,
    ARIANE,
    OZAN
}

Why can't I import a normal enum?

basarat · Accepted Answer · 2016-01-03 22:49:52Z

3

It's been working fine for the interfaces I've been exporting so far, but as soon as I try to import an enum it all blows up

Interfaces are a compile time only construct and therefore have no runtime impact. The files with the interfaces are not loaded at runtime. However files with runtime stuff like classes/variables/enums etc. are loaded at runtime and you are getting a 404 on these. This is a server setup error. You need to allow loading these JS files.

answered Jan 3, 2016 at 22:49

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nelaina Over a year ago

Thanks for the advice. I think I have an additional issue with my typescript target being ES5 and that not supporting enums as far as I can tell, but that's another issue entirely!

Michael Shaw · Accepted Answer · 2016-11-13 19:23:19Z

2

I had a very similar problem and eventually fixed it by exporting a 'dummy' class before my enum...

`

export class L{};

export enum Legend { THE_RAPTOR, LINZA, ARIANE, OZAN }

...

import {L, Legend} from '../../shared/legend'; `

Unfortunately I can't say why this was necessary (although I have seen remarks that enums without a class are not allowed why not?!) but it helped me.

edited Nov 13, 2016 at 19:23

answered Nov 11, 2016 at 13:57

Michael Shaw

1531 silver badge6 bronze badges

Comments

BERGUIGA Mohamed Amine · Accepted Answer · 2017-09-21 09:32:53Z

0

In the bellow code I'll demonstrate how to EXPORT class (constClass) contain list of const that can be used in your class service.

-serviceAngularClass.js-

    ...
    import {WsRessources} from "./constClass";

            @Injectable()
            export class PersonneService {...

        public functionName():Observable<any>{
            return this.updateRessource(WsRessources.BasePath+WsRessources.affectLeavingDate...);


        }
}//end Class

-constClass.js-

    export class WsRessources {
        public static BasePath='personnes';
        public static affectLeavingDate='/affectLeavingDate';
     }

answered Sep 21, 2017 at 9:32

BERGUIGA Mohamed Amine

6,3203 gold badges43 silver badges42 bronze badges

Collectives™ on Stack Overflow

How to export typescript enum with systemjs and Angular2?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related