Introduction

This project contains the common angular packages developed to bootstap a vanilla angular frontend application based on the RWB and AXA guideline approved layout. These are built and disctributed as NPM packages. This project includes the different packages that are available and a sample application to showcase the configurations needed for a new application to use the packages.

Getting Started

Please setup Angular development environment following the current upto date instructions available in angular.io.

Also Compodoc is used to document the the package. To use compodoc follow the below commands after any change tht add comments or alters the structure of the packages.

• Compodoc is setup as a dev dependency within the project and npm install will restore the reqyired package. It is also recommended to install compodoc globally with the below command to be able to leverage in other Angular projects.

  npm install -g "@compodoc/compodoc"

• The document can then be generated by running the below command

  npm run generate-doc

• The generated documents should be copied to Folder \Ewrap0206d\Program Files$\xlre\docs\Angular. Once copied the latest document becomes available at http://xlre-dev1.r02.xlgs.local/docs/Angular/index.html.

Build

This project contains the different modules needed for the common angular framework laid out as different angular libraries.

To build all libraries, npm scripts are created in the package file. For building spcific libraries, the ng build command can be used. Please refer to below sample for building the common library alone or for building all libraries.

ng build common
npm run build-libs

Note to to developers: Please ensure that any packages added are included in the "build-libs" npm script.

Publish

The NPM packages from this project are currently published at Nexus repository The Nexus repository is setup with a remote repository pointing to npm global repository. So the local npm config can be redirected to the xlre-npm repository using the below command.

npm config set registry http://xlre-nexus.r02.xlgs.local/repository/npm-xlre

Framework developers who work on building and maintaining the AXA XL angular framework can use the below command to setup the source for the @axaxl organization domain for npm packages to publish accordingly.

npm login --scope=@axaxl --registry=http://xlre-nexus.r02.xlgs.local/repository/npm-private/

To publish all libraries, npm scripts are created in the package file. Scripts are available for publishing individual or all libraries available in the project. Please refer to below sample to publish the common library alone or all libraries.

npm run publish-common
npm run publish-all

Note to to developers: Please ensure that any packages added are included to have both the individual publish and publish all npm scripts.

Contribute

The project is hosted at https://dev.azure.com/xlcatlin/AXAXL.ReIns.Framework/_git/Angular.

To be able to contribute to the development, you should be part of the GS-XLRe Framework Users-US-S AD group.

The projet follows a master/feature branching practice. Each feature starts with creating a branch for development. Once completed puch the changes into the feature branch and request pull into master with the Framework Administrators.

Utilize the @axaxl/layout and @axaxl/security

To utilize the @axaxl angular framework instal the relevant packcages needed for the application using the commands below.

npm i @axaxl/common
npm i @axaxl/data-grid
npm i @axaxl/hot-table
npm i @axaxl/layout
npm i @axaxl/material
npm i @axaxl/pivot-table
npm i @axaxl/security

With the packages installed, the layout and security module need to be configured for the template to startup. Please review the documentation for the SecurityService, LayoutConfigurations and SecurityConfigurations for further setup.

Once the above configurations are defined, the routes in the angular route module can be defined as below for loading application components within the framework app layout.

  const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'unauth', component: UnauthComponent },
    {
        path: '',
        component: LayoutComponent,
        canActivate: [SecurityService],
        children: [
        {
            path: 'home', component: HomeComponent
        }
        ]
    }
  ];