Brian Love
Angular + TypeScript Developer in Denver, CO

Angular CLI using HTTPS

Reading time ~1 minute

If you need to run the NG Development server over HTTP using SSL then this quick guide is for you. I ran into this issue when using the Google Maps API during the development of an Angular 2 app. If you want, you can also check out my recent post on using the Google Places API with a Google Map.

There are two options depending on what version of the Angular CLI you are using:

  1. Prior to beta 18, you will need to modify source code in node_modules/angular-cli
  2. beta 18 and newer, you can pass parameters to ng serve to specify the --ssl, --ssl-key and --ssl-cert

Using angular-cli Beta 18+

If you are using an earlier version of the Angular CLI, your best bet is to update to the latest version. If this is not an option, see the solution below.

Update Globally:

$ npm uninstall -g angular-cli
$ npm cache clean
$ npm install -g angular-cli@latest

Update Locally:

$ rm -rf node_modules/angular-cli
$ npm install angular-cli@latest --save-dev

With beta 18, there are three new SSL parameters:

  1. –ssl (Boolean) (Default: false)
  2. –ssl-key (String) (Default: ssl/server.key)
  3. –ssl-cert (String) (Default: ssl/server.crt)

Here is an example of starting ng serve using the new SSL parameters:

ng serve --ssl 1 --ssl-key "ssl/local.brianflove.com.key" --ssl-cert "ssl/local.brianflove.com.crt"

Prior to Beta 18

If you cannot install beta 18 you can still use HTTP with ng serve. Unfortunately, it requires modifying the angular-cli source code in node_modules/angular-cli/tasks/serve-webpack.js. Inside that file you will find a run() function, and within that is a variable named webpackDevServerConfiguration. You will need to add three new properties: https, key and cert.

cert: fs.readFileSync(this.project.root+ '/ssl/local.brianflove.com.crt', 'utf8'),
key: fs.readFileSync(this.project.root+ '/ssl/local.brianflove.com.key', 'utf8'),
https: true

This is a pretty easy workaround. But, if you find that HTTPS is not working all of a sudden, it is likely that you deleted your node_modules folder and re-ran npm install.

Brian Love

Hi, I'm Brian. I am interested in TypeScript, Angular and Node.js. I'm married to my best friend Bonnie, I live in Denver and I ski (a lot).