This is my first time trying to deploy an Angular2 application. I want to set the URL of an API endpoint, and I would like for it to be different in every environment.
Is there a way to make ng build or any other tools that would allow set this for me prior to deployment?
With the Angular CLI tool you can configure different environments.
ng build can specify both a build target (--target=production or --target=development) and an environment file to be used with that build (--environment=dev or --environment=prod). By default, the development build target and environment are used.
The mapping used to determine which environment file is used can be found in angular-cli.json:
"apps": {
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
These options also apply to the serve command. If you do not pass a value for environment, it will default to dev for development and prod for production.
You can also add your own env files other than dev and prod.
Then, in your code, you can do a simple check, just like the default one in the main.ts file:
if (environment.production) {
enableProdMode();
}
Check out the build targets and environment files section in their docs for more details.
PS: Here's a similar question, you might find the answers there useful too.
"environments": { "source": "environments/environment.ts", "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } in your angular-cli.json. 2) Check if you have the files in your src/environments/ directory. 3) Do you run the ng build with a --environment=dev flag? 4) Check if your environment.ts file actually exports the constant: export const environment = { production: false }; PS: Molq bratle :)import { environment } from './environments/environment';Yes, and it's actually quite convenient. Take a look at the src/environments/ directory. You have there at least 2 files, one of which is environment.ts. Do not change this one. Instead you should put your different env-related configs in other files in this directory, e.g. environment.prod.ts.
Everything is nicely explained in the comment put in src/environments/environment.ts:
The file contents for the current environment will overwrite these during build.
The build system defaults to the dev environment which uses
environment.ts, but if you do
ng build --env=prodthenenvironment.prod.tswill be used instead.The list of which env maps to which file can be found in
angular-cli.json.
So you just have to import the const defined in that file using a normal typescript import, e.g.
import { environment } from '../../environments/environment';
Then you can set it up in the service:
@Injectable()
export class SettingsService {
public environment = environment;
}
and now you inject use such service in other places, like any other service ;)
