asp.net核心 <environment> 等效于angular2？

Question

In asp.net core, I can conditionally include css/js in my layout html page using <environment> tags:

 <environment names="Development,Staging"> <script type="text/javascript" href="js/debug.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css" /> </environment> <environment names="Production"> <link rel="stylesheet" type="text/css" href="css/style.min.css" /> </environment> 

How can I achieve this in angular 2? The css/js files that I'm talking about are site-wide, not component-specific

(PS. I'm new to angular 2 )

Answer 1

If you are using angular2 CLI then you could use enironment.ts . Properties specified in this file will be available throughout entire application.

You can create multiple environments like this-

In components import default environment file like this-

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

Import DOCUMENT from platform-browser like this-

import { DOCUMENT } from '@angular/platform-browser';

Inject into component (eg main AppComponent),

constructor (@Inject(DOCUMENT) private document) { }

Use environment condition and apply dynamic style-sheet like this-

if(environment.EnvName === 'prod') {
        this.document.getElementById('theme').setAttribute('href', 'prod.css');
}
else {
        this.document.getElementById('theme').setAttribute('href', 'dev.css');
}

Angular CLI takes care of which file to use for each environment during build process.

This is how you can specify environment at a time build-

ng build --env=prod

Hope this helps in your use case.