Using Angular framework to build custom sites in AgileApps

Knowledge base
,
1

Can we develop AgileApps Site using angular 6 ? The answer is well yes, we can! In this article, we will see how to build AgileApps sites with Angular 6+. Towards the end of the article there is a link provided to a sample application.

Requirements

I assume that the reader of this article has a good understanding of Angular 6 and how it works, especially creating an app, routing, "Activate Guard", building, publishing an app using Angular CLI . You will also need to have knowledge on the AgileApps Sites features and anonymous site user feature. It's also recommended to have some knowledge on Single Page Apps concepts.

  1. AgileApps Platform 10.11.3+
  2. Angular 6 & compatible Angular CLI version.
  3. Bootstrap framework 4+ & Angular bootstrap components (Optional)

Challenges

While using Angular framework to create an AgileApps site, some of the most common challenges are as follows:

  • AgileApps Sites are not Single Page App (SPA), while Angular framework is!
  • How do we host the Angular artifacts within Agileapps platform?
  • Is it possible to have the Anonymous user access configurations while using Angular?

Getting started

Firstly, we will create an Angular application which is compatible with AgileApps Sites capability. Then, deploy the same app in the AgileApps Sites using the Compressed files in static resources.

Create Angular App

Use Angular CLI to create an angular 6 App (my-angular-site). Include your choice of css framework (In this article, we use the bootstrap and Angular Bootstrap components). Then, create required routes as per the requirement (You can have unlimited number of urls/routes of your choice). keep the following points in mind:

  1. Routing:
    Use Hash strategy : Enables the location strategy that uses the URL fragment instead of the history API. 
    Remove the <base href="." /> element from the index.html 
  2. Lazy loading of feature module is not supported. Hence all modules need to be eagerly loaded.
  3. Building the app:
    Prepare the app for deployment, use angular cli to perform the production build. Create a my-angular-site.zip file with the "dist" (Prodction build artifacts).
Note: since the Angular is an SPA, you need to manually create all the pages including login page. The access to the authenticated pages has to be implemented using the Angular CanActivate guard.

Create the AgileApps Site

Follow these guidelines while creating an AgileApps Site to be used along with angular framework:

  1. Create a jsp Page under "Developer Resources » Pages". eg: home.jsp
  2. Upload the "my-angular-site.zip" into "Developer Resources » Static Resources".

  3. Copy the index.html (present inside the my-angular-site.zip) contents into home.jsp.

    Make the below path changes to all the scripts & css files in the "index.html"
    For CSS:
    <link rel="stylesheet" href='<lj:resource name="my-angular-site" path="/styles.3ff695c00d717f2d2a11.css"/>'>
    For JS files:
    <script type="text/javascript" src='<lj:resource name="my-angular-site" path="/runtime.ec2944dd8b20ec099bf3.js"/>'></script>

  4. Insert <%@taglib prefix="lj" uri="/LJTagLib"%> before the index.html contents, inside the home.jsp.

  5. Create a new Site  "myAngularSite ". and choose 'home.jsp' as the start page and configure other required parameters.

Now, the site is ready for use.

Anonymous user Access

The anonymous user access feature will work, as long as the site is accessed from 'https://{{hostname}}/networking/sites/{{tenantId}}/{{SiteName}}/' path. If the Angular app is not authenticated, this site will work with the configured anonymous user access privileges. Since Angular is an SPA, the pages to perform login has to be implemented in the angular app itself. All the authentication required pages should be guarded using the CanActivate guard in angular as a part of the corresponding Angular Route definition. 

Notes