using webpack 2 DefinePlugin with angular-cli based project

Question

I'm trying to convert an angular2 with webpack2 project to angular-cli based project.

if I understood correctly, angular-cli now supports webpack. in my original project I injected the following app.config.js:

module.exports =  {
    webServer: {
        appBaseHref : JSON.stringify("/")
    },
    auth0: {
        apiKey: JSON.stringify("API_KEY"),
        domain: JSON.stringify("DOMAIN.auth0.com"),
        callbackUrl: JSON.stringify("CALLBACK_URL")
    }
};

by adding the following to webpack.config.js file:

const appConfig = require("./config/app.config");
const DefinePlugin = require("webpack/lib/DefinePlugin");
...
module.exports = {
    plugins: [
       new DefinePlugin({
           APP_CONFIG: appConfig
       }),
...

then in my typescript project i would declare APP_CONFIG with declare var APP_CONFIG:any; and then I would use it's properties. how can I inject such an object in an angular-cli project?

thanks

@Chrillewoodz - yes.. I can.. trying to figure out why I did it with webpack in the first place but i got nothing :) what do I do ? do you want to post it as an answer? do I delete this question ? — ufk
– ufk, Commented Oct 14, 2016 at 6:13
So I want this same thing - so that I can inject the build numbers. Not sure the service answer will work for me. I would like to have a global like APP_VERSION and set it to childProcess.execSync('git rev-list HEAD --count').toString(); — nycynik
– nycynik, Commented Mar 17, 2017 at 18:46

Chrillewoodz · Accepted Answer · 2016-10-14 06:24:21Z

2

Here's a simple example that just uses a normal service with a set and get method:

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

@Injectable()

export class AppConfigService {

  public config: any = {
    apiKey: '[api_key]',
    domain: '[domain]',
    callbackUrl: '[callbackUrl]'
  }

  constructor() {}

  /* Allows you to update any of the values dynamically */
  set(k: string, v: any): void {
    this.config[k] = v;
  }

  /* Returns the entire config object or just one value if key is provided */
  get(k: string): any {
    return k ? this.config[k] : this.config;
  }
}

For more complex use cases you might want to convert it to an observable instead but I don't see that being necessary in this simple case.

answered Oct 14, 2016 at 6:24

Chrillewoodz

28.5k23 gold badges102 silver badges189 bronze badges

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

Collectives™ on Stack Overflow

using webpack 2 DefinePlugin with angular-cli based project

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related