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:
- Prior to beta 18, you will need to modify source code in node_modules/angular-cli
- beta 18 and newer, you can pass parameters to
ng serveto specify the
Using the Angular CLI
With the Angular CLI beta 18 and newer, there are three new SSL parameters:
- --ssl (Boolean) (Default: false)
- --ssl-key (String) (Default: ssl/server.key)
- --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
You will need to add three new properties:
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