CODEWITHSUNDEEP
node.jsangularwebpack
chriszichrisz
chriszichrisz

Reputation: 567

Angular2 + Webpack DefinePlugin not working?

I tried to run the Angular2 app from the tutorial on the angular.io website

Angular2 with Webpack Tutorial on angular.io

Installation worked well (with a few hiccups, it's Ubuntu 14.04 LTS) but I got to the point where the npm start task works, the server works, and even the app works in the browser, so far so good. But

Everytime I run npm start, I get the following 2 errors in the terminal, AND in the browser console:

ERROR in ./src/polyfills.ts
(4,5): error TS2304: Cannot find name 'process'.

ERROR in ./src/main.ts
(7,5): error TS2304: Cannot find name 'process'.

If you look at the tutorial, it is explained how to create the webpack configs, there is a webpack.common.js, a webpack.prod.js and a webpack.dev.js. In the webpack.prod.js, a var is created with this code:

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
new webpack.DefinePlugin({
    'process.env': {
        'ENV': JSON.stringify(ENV)
    }
})

In main.ts and in polyfills.ts the var is referenced by this:

if (process.env.ENV === 'production') {
    enableProdMode();
}

but it seems, that Typings does not know how to inject these variables, created with webpack.DefinePlugin into the compiled Javascript (that's what I'm thinking, I maybe wrong)

If anyone ran into the same problem, or anyone can help me with this, I would be very thankful! (All the code is from the tutorial, so anyone who tried the tutorial may have run into the same problem, I guess?!)

Thank You!

Upvotes: 2

Views: 3003

Answers (1)

Marcio Silva
Marcio Silva

Reputation: 141

I was having the same issue here (doing the same tutorial). To solve this I created a file named typings.d.ts on the same folder where typings.json is (this file will be included by default by the compiler) and added the following declaration to it:

declare var process: any;

Hope it helps! :)

Upvotes: 14

Related Questions