{"id":9113,"date":"2023-12-13T10:26:29","date_gmt":"2023-12-13T10:26:29","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=9113"},"modified":"2023-12-13T10:26:29","modified_gmt":"2023-12-13T10:26:29","slug":"get-angular-cli-to-ng-serve-over-https","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/angular\/get-angular-cli-to-ng-serve-over-https","title":{"rendered":"Get angular-cli to ng Serve Over HTTPS"},"content":{"rendered":"

To run an Angular application over HTTPS using ng serve, you can use the –ssl and –ssl-key options to specify the SSL key file, and the –ssl-cert option to specify the SSL certificate file.
\nHere are the steps you need to follow to serve your application over HTTPS using angular-cli:<\/p>\n

1. Generate SSL Certificate and Key<\/h3>\n

You need an SSL certificate and key to enable HTTPS. You can generate a self-signed certificate using tools like OpenSSL.
\nIf you don’t have OpenSSL installed, you can install it or use an online service to generate a certificate.<\/p>\n

openssl req -x509 -newkey rsa:2048 -keyout server.key -out server.crt -days 365 -nodes\r\n<\/pre>\n
This will generate server.key (private key) and server.crt (certificate) files.<\/p>\n
2. Serve Angular Applications with HTTPS<\/h3>\n
Angular CLI v7.0.0 and above:<\/strong><\/p>\n
Starting from Angular CLI version 7.0.0, HTTPS is supported natively.
\nYou can use the below common line options to serve your Angular application over HTTPS.
\n–ssl – boolean to whether enable or disable SSL; defaults to false
\n–ssl-key – Relative path to the private key file
\n–ssl-cert – options to serve
\nOpen a terminal in your Angular project directory and run:<\/p>\n
ng serve --ssl true --ssl-key \"path\/to\/server.key\" --ssl-cert \"path\/to\/server.crt\"     \r\n<\/pre>\n
Replace path\/to\/server.key and path\/to\/server.crt with the actual paths to your SSL key and certificate files.
\nIf you do not want to use command line arguments with ng serve then you can add the following configs in angular.json<\/strong> and run the ng serve command on the terminal.<\/p>\n
Angular CLI 6+<\/strong>
\n\"Angular<\/p>\n
If you want to turn on and off the ssl as per your choice then you can remove the “ssl”: true line from the options and add the –ssl flag to your command when running ng serve over HTTPS.
\nAngular CLI v6.0.0 to v6.2.9<\/strong>
\nFor Angular CLI versions 6.0.0 to 6.2.9, HTTPS is not supported natively with ng serve. However, you can use the ng serve –ssl workaround:<\/p>\n
ng serve --ssl\r\n<\/pre>\n
The Angular CLI will automatically generate a self-signed certificate for you.<\/p>\n
Angular CLI < 6<\/strong>
\nThe Angular CLI configuration format is different from versions 5 to 6. Prior to Angular CLI version 6, the config would be added as follows:
\n\"Angular<\/p>\n
3. Access the Application<\/h3>\n
Your Angular application should now be accessible over HTTPS. Open your web browser and visit https:\/\/localhost:4200 (or the port you specified with –port if it’s different from the default 4200).
\n\"Access<\/p>\n
Note:<\/strong> Since you are using a self-signed certificate, your browser may display a warning that the connection is not secure. This is expected for self-signed certificates, and you can proceed to view the site.
\nRemember that using a self-signed certificate is unsuitable for production environments. For production, you should obtain a valid SSL certificate from a trusted certificate authority.
\nIf you want to use a custom domain or need a more robust solution, consider setting up a reverse proxy (e.g., using Nginx or Apache) to handle HTTPS termination in front of your Angular development server.<\/p>\n","protected":false},"excerpt":{"rendered":"
To run an Angular application over HTTPS using ng serve, you can use the –ssl and –ssl-key options to specify the SSL key file, and the –ssl-cert option to specify the SSL certificate file. Here are the steps you need to follow to serve your application over HTTPS using angular-cli: 1. Generate SSL Certificate and […]<\/p>\n","protected":false},"author":1,"featured_media":9117,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[9],"tags":[],"class_list":["post-9113","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9113"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=9113"}],"version-history":[{"count":3,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9113\/revisions"}],"predecessor-version":[{"id":9120,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9113\/revisions\/9120"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/9117"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=9113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=9113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=9113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}