【Angular 2】How ts-loader imports webpack resolved alias's variables?

[dongtong]

I have met a special issue that typescript can not access webpack resolved alias variables, and I spent some time investigating. I have already solved it. The following is my procedures.

Step 1: Define webpack configuration file, my file name is webpack.config.dev.js

resolve: {
      extensions: ['', '.js', '.ts', '.json', '.less', '.scss', '.css', '.html', ".config.dev.js"],
      alias: {
        config: path.join(__dirname, 'src/config/dev.ts')
      }
}

Step 2: Define src/config/dev.ts. You could define global variables here.

// define special environment constants
export default {
    ENV: "development"
}

Step 3: Typescript class import it and use it

import config from 'config';

console.log(config.ENV)

You should define different environment webpack configuration file, such webpack.config.dev.js, webpack.config.prod.js etc, and then refer to src/config/dev.ts, src/config/prod.ts etc.

That's it. :)