Compile-time vs. Runtime configuration of your Angular App

March 23, 2018 0 Comments

Compile-time vs. Runtime configuration of your Angular App

 

 

How to set up compile-time and runtime configuration for #angular apps @juristr

  • In Angular you have different kind of approaches: compile-time and runtime configurations.
  • The default file that is responsible for bootstrapping our Angular application uses those environment files to determine whether the app is running production mode, in order to apply some runtime optimizations such as calling .
  • The reason is that at compile time, the Angular CLI will take care of renaming the environment specific configuration file into and to compile it into your app accordingly.
  • Just create a new and **make sure to configure it in your file: – – Finally, we need to tell the CLI which environment we’re building for, s.t. it is able to pick up the proper configuration file.
  • Normally you simply have some JSON file – say that contains the necessary configuration options which you then deploy with your app on your server.

Learn how to setup compile time as well as runtime configuration for your Angular application

Wanna keep up to date with the latest webdev stuff? Follow me on Twitter

When you develop a bigger application, chances are quite high that you need some kind of configuration. That can range from simply visualizing the app’s version number to injecting custom themes etc. In Angular you have different kind of approaches: compile-time and runtime configurations. Let’s take a look at both of them.

What is compile-time configuration? It basically means that you compile your configuration into your app, at the time when you compile and bundle it. If you’re using the Angular CLI there’s already a preconfigured setup for having such compile-time configuration options.

Inside the folder you have a and file.

Since these are just plain JavaScript objects, you can add your environment specific properties on them.

The default file that is responsible for bootstrapping our Angular application uses those environment files to determine whether the app is running production mode, in order to apply some runtime optimizations such as calling .

You can arbitrarily get a reference to that object by simply importing into your file.

Note, we’re always importing and never an environment specific file such as . The reason is that at compile time, the Angular CLI will take care of renaming the environment specific configuration file into…

Compile-time vs. Runtime configuration of your Angular App

Comments are closed, but trackbacks and pingbacks are open.


Tag cloud