2

Is it possible to somehow "mark" a piece of code so it will be included in "dev" mode but will be omitted in "prod".

I know angular has:

if (isDevMode()) {...}

But can I avoid the code checking whether it is dev mode as well?

amit
  • 2,171
  • 4
  • 31
  • 50
  • 1
    https://stackoverflow.com/questions/39535386/how-to-check-if-angular-application-running-in-production-or-development-mode this may help you – bhaumik shah Oct 25 '18 at 07:39
  • 1
    this would be a head start if you want to build something on your own. https://alvarotrigo.com/blog/disabling-javascript-console-in-production-enviroments-and-internet-explorer/ – Md. Tazbir Ur Rahman Bhuiyan Oct 25 '18 at 07:47
  • 1
    If you look at `configurations.production.fileReplacements`, you'll see that `src/environments/environment.ts` is replaced with `src/environments/environment.prod.ts`. I'm pretty sure you can create a `boolean` property in here and then import the environments in your code to check if it's in `prod` mode, and then do the needful. – SiddAjmera Oct 25 '18 at 08:03

3 Answers3

0

The only thing that comes to mind is using the environment.ts for that.

In your environment.dev.ts:

export const environment = {
    doSomething() {
       // Do your dev stuff here
    }
}

In your environment.prod.ts:

export const environment = {
    doSomething() {
        // Leave empty
    }
}

And in your component/service/wherever call it from environment. Since environment will be replaced, the dev code will only be included in your dev bundle.

pascalpuetz
  • 5,238
  • 1
  • 13
  • 26
0

You could use a build tool like webpack and have it include files based on an alias combined with the NODE_ENV. NODE_ENV is development in dev mode and production in prod.

The easiest way would be in your webpack.dev.config have the alias load the dev file, and in the webpack.prod.config load the production file.

// dev module.exports = { //... resolve: { alias: { Something: path.resolve(__dirname, 'dev/foo/') } } }; // prod module.exports = { //... resolve: { alias: { Something: path.resolve(__dirname, 'prod/foo/') } } };

If you wanted to use one config file you could just use a ternary in the config.

Zach Leighton
  • 1,939
  • 14
  • 24
0

Just import your environement file in your component:

import { environment } from './environments/environment';

and in your script do : 

if (!environment.production) {
  .....
}
Charlie Rabiller
  • 482
  • 4
  • 7
  • your solution still adds an extra check in production. just like if (isDevMode()) {...} – amit Oct 25 '18 at 10:16