webpack.DefinePlugin functionality

[GaryB432]

I am trying to understand how the DefinePlugin function is intended. Per webpack's documentation I gathered that I could console.log(process.ENV); so I added that to ngOnInit in about.component.ts. That gives me a TypeScript error that ENV does not exist on type 'Process' (which is defined as NodeJS.Process)

so I added this to 'webpack.config.js'

// Define env variables to help with builds
// Reference: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
new webpack.DefinePlugin({
  'other.stuff': '"should work"',  // **added by me**
  // Environment helpers
  'process.env': {
    ENV: JSON.stringify(ENV)
}

and changed about.component..ts to this

import { Component, OnInit } from '@angular/core';

declare var other: any;

@Component({
  selector: 'my-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.scss']
})
export class AboutComponent implements OnInit {

  constructor() {
    // Do stuff
  }

  ngOnInit() {
    console.log('Hello About');
    console.log(other);
  }

}

which results in ReferenceError: other is not defined

I considered an uglification problem but even the string "should work" does not appear in ./dist/app.[hash].js

Can you let me know how to pass 'other.stuff' to the app at build time with webpack?

Thanks for all your work on this starter, Foxandxss!

[mattdistefano]

If you console.log(other.stuff) it should work. AFAIK this is because the DefinePlugin just does a search/replace for that string, rather than, say, building and injecting a object into that module.

[GaryB432]

Thanks for the help but my problem in the About component as above is that other is not defined. Console logging its stuff property is sure not to work. I wonder if anyone has successfully used the Define plugin's features of this repo or has otherwise successfully passed configured environment variables to the app. How do people do that? It looks like the plugin is set to work but I may be misunderstanding how it is intended to put to work.

[mattdistefano]

Right, other is not defined because the DefinePlugin isn't creating an object, it's just looking for uses of other.stuff in your code and replacing them w/ the value you specified.

So for example...

new webpack.DefinePlugin({
    // Environment helpers
    'first': {
        'firstProp': "'this is the firstProp of first'"
    },
    'second': "'this is second'",
    'third.thirdProp': "'this is the thirdProp of third'",
    'process.env': {
        ENV: JSON.stringify(ENV)
    }
}),

and

declare var first, second, third;

console.log(first, first.firstProp, second, third, third.thirdProp);

Compiles to:

console.log({firstProp:"this is the firstProp of first"},"this is the firstProp of first","this is second",third,"this is the thirdProp of third")

Notice that third isn't touched (and would be undefined at runtime) because we specified third.thirdProp in the DefinePlugin. But you can have something similar if you put an object as the value for that key like in first. But most commonly I think people just dangle the settings off process.env or use simple keys (i.e. 'MY_SETTING'), though.

[GaryB432]

Yes that works like a charm. Thanks for your patience with me!