How to use enum (within separate file) with Angular AOT?

Question

Converting an angular-based app (angular-cli) from a well-working JIT-based szenario to an AOT-based szenario. AOT-build is running fine.

On opening the resulting webpage i receive Cannot read property 'none' of undefined errors. Those errors result from undefined enums at runtime.

Very much simplified example (with 2 separate files)

action-type.enum.ts (enum in separate file)

export enum eActionType {
    none,
    actionA
    ...
}

test.component.ts (component in separate file)

import { eActionType } from './action-type.enum';

@Component({ ... })
export class Test {

    // @Runtime eActionType (eActionType.none) will be undefined
    private/protected/public actionType: eActionType = eActionType.none;
}

eActionType is not available withing test.component.ts although being imported.

Possible solution 1 - enum within same file (not desirable)

test.component.ts

// Exported enum within same file
export enum eActionType {
    none,
    actionA
    ...
}

@Component({ ... })
export class Test {

    // @Runtime eActionType is available
    private/protected/public actionType: eActionType = eActionType.none;
}

If the enum is declared within the same file, it will work properly at runtime. But that can't be desirable as one would loose maintainability compared to an enum within an external file that can be imported into several locations.

Possible solution 2 - class with static properties instead enum (not desirable either)

action-type.enum.ts (enum in separate file)

export class eActionType {
    static none    = 0;
    static actionA = 1;
    ...
}

test.component.ts (component in separate file)

import { eActionType } from './action-type.enum';

@Component({ ... })
export class Test {

    // @Runtime eActionType is available as static property of eActionType        
    private/protected/public actionType: eActionType = eActionType.none;
}

No really beautiful solution either, but at least only declaration of former enum, but not consumer-code has to be changed in all occurences.

How can i force a proper enum declared in an external file to be accessible in other locations at runtime?

score 1 · Accepted Answer · answered Sep 27 '17 at 10:35

Solution:

completely empty node_modules
npm install and off you go...

I spent days, read everything i could find (non really related), modified my code a hundred times.

By coincidence i realized that ng's scaffolding is throwing error-messages (serve and build didn't). Cleaned up everything, did a completely new npm install - and suddenly everything that was supposed to work out of the box just worked out of the box. Can't believe i wasted days. (Will leave that question as it is as it might give others a hint)

If something goes wrong that shouldn't and nobody else on the web is reporting the same problem, become suspicious and go for the easiest possible solution first:

-> Do a clean new install

score 0 · Answer 2 · answered Sep 25 '17 at 20:18

0

Make your variables public.

public actionType: eActionType = eActionType.none;

answered Sep 25 '17 at 20:18

omeralper

9,804
2
19
27

That would make the enum visible/usable within the template while in AOT (whithin JIT private/protected instead of public is alright) - if eActionType would be available. But it isn't. – dsla Sep 26 '17 at 06:57

How to use enum (within separate file) with Angular AOT?

2 Answers2