1

Is there any way to achieve the #define functionality with Angular?

I'm talking about the ability to add/remove some code based on defines at compile time, just like C++,C# and other lower level programming languages do.

Deerjon
  • 59
  • 7
  • 2
    JavaScript is an interpreted language -- there is no "compile time". – Heretic Monkey Sep 29 '20 at 13:37
  • Reason for reopening: I was not in agreement with the selected duplicate as it was specific to javascript. The question is about angular and I believe the OP is asking how to include specific code in the bundle based on a environment settings. This is possible as angular will generate a bundle and you can configure angular to execute a file replacement based on an environment which will have a functionally similar effect to using a preprocessor directives in c#. – Igor Sep 29 '20 at 13:52

2 Answers2

0

It is not possible in the exact same manner as a preprocessor directive in c#. However, I assume you are wanting to do this at the time the js bundles are generated. What you can do is specify different files to include based on environment settings but there is not a way to omit only part of the code in the same file.

See the angular.json file and sections named fileReplacements. In the default angular.json file generated with ng new you can see that in the production environment (ng build --prod) the file src/environments/environment.prod.ts is included instead of src/environments/environment.ts. You can expand this to do additional replacements as needed.

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  }
}

In angular this is the closest you can get to the equivalent of a preprocessor directive in c# AFAIK.

Igor
  • 60,821
  • 10
  • 100
  • 175
  • Thank you for your explanation. File replacement is not an option for me, but knowing that there is no easy way of omitting/including parts of code i will most likely need to create some scripts that do the job before angular start building the bundle. – Deerjon Sep 29 '20 at 14:55
0

You do not need a plugin, you can use angular native optimization.

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

if (environment.production) {
    console.log('@@@ environment.production @@@');
} else {
    console.log('@@@ NOT environment.production @@@');
}

when you run 'ng build --prod' only the statement within the first condition will be included in the bundle, without the if statement.

Here the bundle screenshot, I highlighted the generated component code

zos1000
  • 41
  • 4
  • can you post your answer here instead of puting a link ? – phoenixstudio Jan 02 '21 at 02:43
  • @phoenixstudio, I haven't used this package myself, but following your call I tried it so I can paste the code here. I created a new project and followed the package docs, unfortunately this did not succeed. I came to a conclusion that this package will not work for preprocessor. I guess there are 2 compilation stages: typescript (transpile to .js) and webpack, and this package works only after typescript, so it will not do preprocessing but only work on transpiled files. so I was probably mistaken in my previous comment, sorry for that. pity, it looks like there is no such preprocessor. – zos1000 Jan 04 '21 at 21:57
  • ok thanks for your hardwork, can you update your answer to match your findings ? – phoenixstudio Jan 05 '21 at 01:34
  • @phoenixstudio I have found a better solution and updated my answer. – zos1000 Jan 08 '21 at 11:39