How to define a variable in external config file and use it in app.module

Question

In Ionic 3 with Angular 5 I am trying to define all my external API keys inside an app.config.ts file.

I must declare a class otherwise I get an AOT error raised by ngc.

Here is my app.config.ts

import { Injectable } from '@angular/core';

@Injectable()
export class AppConfig {
  public ONESIGNAL_API_KEY: string;
  public FIREBASE_CONFIG: any;
  public MIXPANEL_TOKEN: string;

  constructor() {
    this.ONESIGNAL_API_KEY = 'myoskey';
    this.FIREBASE_CONFIG = {
      apiKey: "myfbkey",
      authDomain: "myfbdomain
      };
    this.MIXPANEL_TOKEN = 'mymptoken';
  }
}

I can inject it in constructors of other classes but firebase must be initialize in app.module.ts. So I tried to do the following // Config

import {AppConfig} from './app-config';
...
imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp, {
      backButtonText: '',
      tabsHideOnSubPages: true,
      //scrollAssist: true,
      //autoFocusAssist: true
    }),
    IonicStorageModule.forRoot(),
    IonicImageLoader.forRoot(),
    AngularFireModule.initializeApp(AppConfig.FIREBASE_CONFIG),
    ....

Unfortunately I get the following error Property 'FIREBASE_CONFIG' does not exist on type 'typeof AppConfig'.

How can declare FIREBASE_CONFIG within this app.config file and directly use it in app.module?

I tried to directly initialize the variable before the constructor like this, but same result

import { Injectable } from '@angular/core';

@Injectable()
export class AppConfig {
  public ONESIGNAL_API_KEY: string;
  public FIREBASE_CONFIG: any = {
      apiKey: "myfbkey",
      authDomain: "myfbdomain
      };
  public MIXPANEL_TOKEN: string;

  constructor() {
    this.ONESIGNAL_API_KEY = 'myoskey';
    this.MIXPANEL_TOKEN = 'mymptoken';
  }
}

Any idea?

El houcine bougarfaoui · Answer 1 · 2017-12-10T09:44:30.470

1

you could use an enum :

export enum AppConfig {
    ONESIGNAL_API_KEY = 'myoskey',
    MIXPANEL_TOKEN = 'mymptoken'
}

export const FIREBASE_CONFIG = {
    apiKey : "myfbkey",
    authDomain : "myfbdomain"
}

and you use it as you did :

import {AppConfig ,FIREBASE_CONFIG  } from './config';
...
imports: [
    //...
    AngularFireModule.initializeApp(FIREBASE_CONFIG)

Note : you get that error because you're trying to access AppConfig.FIREBASE_CONFIG and FIREBASE_CONFIG is a non static property of AppConfig class.

edited Dec 10 '17 at 09:44

answered Dec 09 '17 at 23:28

El houcine bougarfaoui

35,805
9
37
37

I get the following error regarding the FIREBASE_CONFIG with your method: `Computed values are not permitted in an enum with string valued members.` – Manuel RODRIGUEZ Dec 10 '17 at 09:03
As soon as I use something else than a class I get the following error (since Angular 5 I think) : `Error encountered resolving symbol values statically. Could not resolve ./app-config.ts relative to /Users/me/myproj/src/app/app.module.ts., resolving symbol AppModule in /Users/me/myproj/src/app/app.module.ts, resolving symbol AppModule in /Users/me/myproj/src/app/app.module.ts, resolving symbol AppModule in /Users/me/myproj/src/app/app.module.ts Error: The Angular AoT build failed.` – Manuel RODRIGUEZ Dec 10 '17 at 11:40

How to define a variable in external config file and use it in app.module

1 Answers1