Angular CLI using HTTPS

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 the Angular CLI

With the Angular CLI beta 18 and newer, 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)

If you want to serve your application using HTTP without generating your own key and certificate, simply set the ssl flag to true and the certificate will be generated for you:

ng serve --ssl=true

If you want to specify your own certification, start the dev server 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.