Application Configuration

where should i store it ?

i am previous post (Load configuration from external file) i’ve described the way to load the configuration from a json file.

Here, i want to address the option to have our configuration as part of our application, in a class.

We could use angular-cli’s environment.ts file, and add values to the constant that is declared there. but i want to show a more elegant way. this is based on the angular DI documentation and on a stackoverflow answer.

1) app.config.ts

import { OpaqueToken } from "@angular/core";

export let APP_CONFIG = new OpaqueToken("app.config");

export interface IAppConfig {
    apiEndpoint: string;

export const AppConfig: IAppConfig = {    
    apiEndpoint: "http://localhost:15422/api/"    

2) app.module.ts

import { APP_CONFIG, AppConfig } from './app.config';

    providers: [
        { provide: APP_CONFIG, useValue: AppConfig }

3) your.service.ts

import { APP_CONFIG, IAppConfig } from './app.config';

export class YourService {

    constructor(@Inject(APP_CONFIG) private config: IAppConfig) {
             // You can use config.apiEndpoint now

Now you can inject the config everywhere without using the string names and with the use of your interface for static checks.

please note: in my tests, i get warnings if i use the : IappConfig statement in the constractor of “YourService”. you can omit this, and things continue to work as expected (eventually, javascript doesn’t have interfaces)

IIS – Handle 404 with html5mode

In angular2, the default routing uses htm5 notation. no more # in the url.

This causes 404 problems when deploying our application.
for example: if we try to navigate directly to , we will get a 404 error.
This is because there is no page that adheres to this url. Only if we start with the index.html and navigate thru our application, we can get to that address – this is because the url is being changed by the router, without ever hitting the server.

To solve this on IIS, we need to:

  1. install URL-REWRITE module from here
  2. create an inbound rule. the rule can be created via the UI (IIS ADMIN) or add the following to your web.config
        <rule name="AngularJS" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          <action type="Rewrite" url="/" />

feat: ngIf now supports else; saves condition to local var

This is great news to all of us that likes using *ngIf .

i was added to the master repository, but not delivered yet as part of the 2.4 version.

looking at the CHANGELOG it is part of the 4.0.0-beta.0 release.


NgIf syntax has been extended to support else clause to display template
when the condition is false. In addition the condition value can now
be stored in local variable, for later reuse. This is especially useful
when used with the async pipe.


Hello {{user.last}}, {{user.first}}!
<template #loading>Waiting...</template>

read it all here:

#13297  13061