Brian F Love
Learn from a Google Developer Expert focused on Angular, Web Technologies, and Node.js from Portland, OR.
Ad·ultimatecourses.com
Learn Angular the right way with Ultimate Courses

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.

Brian F 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 Portland and I ski (a lot).