LibsApp

This app acts as the workspace/harness to create and test our shared library. Angular CLI 6 supports library creation and packaging out of the box. It allows us to create a standalone single component/service/pipe or a module that contains multiple components/services/pipes. By using an angular app as a place holder for our library, in theory we can also use Storybook to do component development in style.

The idea is we expose this module(s) to assembly pay(AP) private repository and any AP angular applications can pull them from NPM repo.

Typical usage:

ng generate library dashboard-lib --prefix=ap
ng generate component login --project=dashboard-lib
ng generate service auth --project=dashboard-lib
ng generate pipe auth --project=dashboard-lib

ng build --prod dashboard-lib

Using the login module

Configure the following according to your needs

LoginLibModule.forRoot({
      isProd: environment.production,
      apiBase: '/api/v1/auth',
      styleURL: '/assets/login.css',
      postLoginRoute: '/transactions'
    })

isProd: boolean; // if true, use actual API instead of interceptor

apiBase: string; // API base url

styleURL: string; // See Below

postLoginRoute: string // Route where the user is expected to be redirected after login, // in the merchant dashboard it's set to 'transactions' // If not provided will use a placeholder page

Styling the login module

This module will adapt into your material theme

As such, in the parent application here we have style.css which imports a premade theme however this should adapt to your theme easily

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Custom style

We also have a modifiable styleURL property in the module wherein a custom css can be linked for further customization needs

Trigerring errors for validation testing purposes via built in interceptor(non prod environment only)

login Interceptor Please enter the following emails to test various scenarios

[email protected] Would return a user which only has a MFA challenge [email protected] Would return a user which only has a New password challenge [email protected] Would return an invalid user [email protected] Would return a user without challenges

everything else would return a user that has both challenges

Respond to challenge interceptor Please enter the following codes to test various scenarios 9999 errorResposne Invalid code 0000 successResponse no next challenge, should redirect directly to postLoginRoute Everything else would return a success response that has the next challenge new password

Publish package to npm

For step by step on how to create and publish a package to npm, please follow

https://blog.angularindepth.com/creating-a-library-in-angular-6-87799552e7e5

If you need a third party dependency in one of your library projects, you need to add it as 'peerDependencies' inside package.json

We don't need to tinker with ng-packagr related config anymore since ng cli 6 handles it for us.

We will write our own custom HOWTO once things settle down a bit.

This project was generated with Angular CLI version 6.0.8.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.