env vars in Angular 4

Question

.element {
  background: url(env.asset-path)
}

What I want is to detect the env at the Angular side and define the asset path in CSS

I know that I could check server-name/domain with js but I don't know how to pass variables to css/scss files

I'm using Angular4/Typescript/scss

can you be more specific in your question? do you want to know if the environment is dev or prod? or do you want to know if the platform is browser or server? — FussinHussin, Oct 04 '17 at 20:23
I've found a better approach here in the second answer: https://stackoverflow.com/questions/42515893/can-angular-cli-pass-environment-specific-settings-to-sass-variables — Wagner Moreira, Oct 04 '17 at 22:44

score 1 · Answer 1 · answered Oct 04 '17 at 21:05

you can get your environment variable by importing it, the same way as your main.ts file:

import { enableProdMode } from '@angular/core';

myurl = environment.production

you cannot add these vars to your css files, but you can manipulate the dom, and add the background url by binding to the src attribute or doing an angular attribute binding. 1)

<img [src]="myurl">

2)

<div class="background"
     [ngStyle]="{ 'background-image': 'url(myurl)'}">

env vars in Angular 4

1 Answers1