title: Typescript-Angular exported enum is undefined
body: <p>I have an Angular project with some components and some enums.
  I was able to successfully use the enums in one of my components, but now that I try to do the same in other components, undefined is returned.</p>
  <p><strong>Component in which the enums work:</strong></p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  import * as moment from 'moment';
  import { from } from 'rxjs';
  import { WEEKLY_SMART_POINTS } from '../constants';
  import { Activity } from '../dom/profile/Activity';
  import { Gender } from '../dom/profile/Gender';
  import { Goal } from '../dom/profile/Goal';
  import { Profile } from '../dom/profile/Profile';
  import { ProfileService } from '../services/profile.service';
  
  @Component({
    selector: 'app-profile',
    templateUrl: './profile.page.html',
    styleUrls: ['./profile.page.scss'],
  })
  export class ProfilePage implements OnInit {
    eGender = Gender;
    eActivity = Activity;
    eGoal = Goal;
    valid: boolean;
  
    currentProfile: Profile;
    savedProfile: Profile;
  
    constructor(private profileService: ProfileService, private router: Router) {
      this.currentProfile = this.createEmptyProfile();
      this.savedProfile = this.createEmptyProfile();
    }
  
    ionViewWillEnter() {
      this.currentProfile = this.createEmptyProfile();
      this.savedProfile = this.createEmptyProfile();
      from(this.profileService.loadSaved()).subscribe((profile) =&gt; {
        Object.assign(this.currentProfile, profile || this.createEmptyProfile());
        Object.assign(this.savedProfile, profile || this.createEmptyProfile());
      });
    }
  
    ngOnInit() {
      console.log(this.eGender); //this works
    }
  ...
  </code></pre>
  <p><strong>Some components in which the enums return undefined:</strong></p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Portion } from '../dom/products/Portion';
  import { Product } from '../dom/products/Product';
  import { Nutrition } from '../dom/products/Nutrition';
  import { Gender } from '../dom/profile/Gender';
  
  @Component({
    selector: 'app-calculator',
    templateUrl: './calculator.page.html',
    styleUrls: ['./calculator.page.scss'],
  })
  export class CalculatorPage implements OnInit {
    smartPoints: number | string = '-';
  
    nutrition: Nutrition;
    portion: Portion;
    product: Product;
  
    valid: boolean;
  
    eGender: Gender;
  
    constructor() {
      this.nutrition = this.createEmptyNutrition();
      this.portion = this.createEmptyPortion();
      this.product = this.createEmptyProduct();
    }
  
    ionViewWillEnter() {
      this.nutrition = this.createEmptyNutrition();
      this.portion = this.createEmptyPortion();
      this.product = this.createEmptyProduct();
    }
  
    ngOnInit() {
      console.log(this.eGender); //returns undefined
    }
  ...
  </code></pre>
  <pre><code>/* eslint-disable no-underscore-dangle */
  import { Component, OnInit } from '@angular/core';
  import { ActivatedRoute } from '@angular/router';
  import { Portion } from '../dom/products/Portion';
  import { Product } from '../dom/products/Product';
  import { SubSize } from '../dom/products/SubSize';
  import { ProductService } from '../services/product.service';
  
  @Component({
    selector: 'app-product-detail',
    templateUrl: './product-detail.page.html',
    styleUrls: ['./product-detail.page.scss'],
  })
  export class ProductDetailPage implements OnInit {
    eSubSize: SubSize;
    product: Product;
    selectedSize: number;
    selectedSubSize: SubSize;
    selectedPortionId: string;
  
    constructor(
      private productService: ProductService,
      private route: ActivatedRoute
    ) {}
  
    ngOnInit() {
      console.log(this.eSubSize); //returns undefined
      this.getProduct();
    }
  
    sameOrder() {
      return 0;
    }
  
    private getDisplayPortion(): Portion {
      let portion: Portion;
      this.product.portions.forEach((p) =&gt; {
        if (p.default === true) {
          portion = p;
        }
      });
      return portion === undefined ? this.product.portions[0] : portion;
    }
  
    private async getProduct() {
      const id = this.route.snapshot.paramMap.get('id');
      this.product = await this.productService.getSystemProduct(id);
      const displayPortion = this.getDisplayPortion();
      this.selectedSize = displayPortion.size;
      this.selectedSubSize = SubSize.none;
      this.selectedPortionId = displayPortion._id;
    }
  }
  </code></pre>
  <p><strong>Some enums:</strong></p>
  <pre><code>export enum Gender {
    m = 'Man',
    f = 'Vrouw',
  }
  </code></pre>
  <pre><code>export enum SubSize {
    none = '--',
    oneEight = '1/8',
    oneFourth = '1/4',
    oneThird = '1/3',
    threeEight = '3/8',
    half = '1/2',
    fiveEight = '5/8',
    twoThird = '2/3',
    threeForth = '3/4',
    sevenEight = '7/8',
  }
  </code></pre>
  <p>I'm totally stuck, hopefully someone has the answer.</p>