Easily deploy Angular 7 App to Salesforce as visualforce page with Routing

In this article I will use two solutions I found on the internet, but were not quite fitting to my needs. At the end of this article you will be able to find a full example project on my GitHub using these solutions.

The credit to the first one goes to Andres Rutnik in his article Building Angular Applications on Salesforce. The second goes to Alexander Havrylov and his article Deploy Angular App to Salesforce. While Andres solution is a little bit overwhelming, the latter lacks the routing feature, so the idea here is to use the routing service built by Andres and use the Alexander gulpfile below:

This gulpfile.js has to be copied into your root project folder, same place as the angular.json file. If you will use resources such as images in your html or call a remote action from a Salesforce controller, you will also need to copy the file salesforce.service.ts which its usage can be seen on the article aforementioned or you also can check my example project at the end of this article.

Create a .env file in the root folder as well with the following variables:

SF_USERNAME=YOUR_ORG_USERNAME
SF_PASSWORD=YOUR_PASSWORD+YOUR_SECURITY_TOKEN
DIST_PATH=dist/YOUR_PROJECT_NAME
LOGIN_URL=https://test.salesforce.com
PAGE_NAME=YOUR_PAGE_NAME
RESOURCE_NAME=YOUR_STATIC_RESOURCE_NAME
CONTROLLER=YOUR_APEX_CONTROLLER
EXTENSIONS=YOUR_EXTENSIONS or blank
API_VERSION=YOUR_API_VERSION
BASE_HREF=/
DEV_RESOURCES_URL=http://localhost:4200

It is necessary to install the following dependencies by executing the command:

npm install gulp@3 gulp-zip gulp-jsforce-deploy dotenv gulp-rename gulp-replace gulp-file  --save-dev

And add these scripts to you package.json file:

"dev": "ng build && gulp rm && gulp build-dev-package && gulp deploy && ng serve",
"prod": "ng build && gulp rm && gulp build-package && gulp deploy"

Almost set! If you execute the npm run prod command you will be able to deploy your page and static resources to Salesforce, however the routing feature is still missing. Let’s work on that! First, we need the service made by Andres, you can copy that in any place in your app folder directory:

Now you have to add the service to the providers of your app module, as in line 20 of the app.module.ts file below:

Finally add an script to you main index.html page in your root directory:

Now if you execute npm run prod again… BOOM! You just deployed to Salesforce an angular app with routing! The sky's the limit. To see a full functioning project, you can clone my repository:

A huge PS: I had some issues making my cat.gif appear, so I also used Andres solution. I actually suggest reading both the articles I cited here. Feel free to leave comments or doubts.