Heroku Pipeline with Angular 2 Environments

Question

I\'ve built my Angular 2 project using the Angular 2 CLI and was able to deploy the application to Heroku using this tutorial.

Now, I\'d like to create a pipeline f

Answer 1

The short answer is: No, you will need to do something different.

Explanation: The npm postinstall script runs when the Heroku slug is built, when you do a git push to the first Heroku app in your pipeline. Subsequently, when you "promote" releases through your Heroku pipeline (e.g. from "development" to "staging" to "production"), the pre-built Heroku slug is promoted "as is", and is NOT rebuilt.

Hence, let's say you have a config var set up in your "development" app that would set the argument that you pass to "ng build" to "dev". That means that when you git push to your "development" app, the slug will get built with the "dev" options. That is fine for the "development" app. HOWEVER, when you subsequently promote to "staging" and "production", you will be promoting the pre-built slug that was built with the "dev" options, which is NOT what you want.

So, to get the functionality you want you will need to consider a different approach.

One way to do it would be to run your "ng build" script in the "npm prestart" phase. That should work, and enable you to use Heroku config vars to modify your Angular2 app depending on the Heroku pipeline phase they are deployed on. However, I typically would NOT recommend this approach. This will cause your "ng build" to run every time "npm start" is run, which is quite often on Heroku (i.e. at least once every 24 hours or so, plus every time your Heroku dynos restart for whatever reason). This would cause your app to experience longer downtime than necessary EVERY time your dynos restart. Not a good idea, typically.

Instead, a better option may be to have your Angular2 app query your server when it initializes, and have the server return whatever pipeline-phase specific values your Angular2 app needs, based on regular Heroku config vars.

Answer 2

i found your question when i was researching the same issue.. how to use environment vars from heroku inside of angular.. after not finding any satisfying answer i came with this (cookie) approach for using different API endpoints for my pipeline.

set a cookie in your server response (server.js) with the content of your var:

app.use(function(req, res, next) {
  res.cookie('API_URL', process.env.API_URL || 'http://127.0.0.1:8500/api/');
  next();
});

read the value inside of your module:

this.apiUrl = cookieService.get('API_URL');

it's a workaround that will of course only work when user accepts cookies...

Answer 3

If you are running your application in a Heroku node environment you can try to take a look at this solution to avoid having your environments variables and security keys hardcoded in the repositories: https://medium.com/@natchiketa/angular-cli-and-os-environment-variables-4cfa3b849659

I strongly suggest also to take a look at its first response that introduce a dynamic solution to create the environment file at building time: https://medium.com/@h_martos/amazing-job-sara-you-save-me-a-lot-of-time-thank-you-8703b628e3eb

Maybe they are not the best solutions, but a trick to avoid setting up projects differently each time.