@zionappsupport/angular5-schematics NPM

Getting Started With Angular 5 Schematics

WARNING: This library is a work in progress!

Setup You Angular Project

You can follow the instructions below from the Angular v5 Documentation

Install the Angular CLI for v5

npm install -g @angular/cli@1.7.4

Create a new project

ng new my-app

Serve the App ensuring it loaded properly

cd my-app
ng serve --open

Schematics Installation

This repository is a basic Schematic implementation that serves as a starting point to create and publish Schematics to NPM. Add the schematics module and its dependencies with the command below:

npm install --save @zionappsupport/angular5-schematics @zionappsupport/core @ngrx/effects@5.2.0 @ngrx/entity@5.2.0 @ngrx/store@5.2.0 @ngrx/store-devtools@5.2.0

After installing all the dependencies, install the Redux DevTools Extension:

Commands Available

Add the base NgRx store files
Add your Authentication NgRx Stores
- Active Directory Authentication Library (ADAL)
- Third Party API Service
Add a NgRx Sub Store
Add routing module to existing component

1. Add the base NgRx store files

Run the command below to generate the files:

ng g @zionappsupport/angular5-schematics:add-ngrx-store

Import the AppStoreModule module to your src/app/app.module.ts file:

import {AppStoreModule} from './store/app-store.module';
...

@NgModule({
  ...
  imports: [
    ...
    AppStoreModule,
    ...
  ],
  ...
})
export class AppModule { }

Start your app again
```
ng serve --open
```
Open the developer console switching to the Redux tab and you should see the initial Redux commands
```
@ngrx/store/init
@ngrx/effects/init
```

2. Add your Authentication NgRx Stores

Active Directory Authentication Library (ADAL)

If needed, refer to the ADAL Angular 5 Documenatation

Run the command below to add the ADAL library
```
npm install --save adal-angular5
```

Run the command below to generate the files:

ng g @zionappsupport/angular5-schematics:add-ngrx-adal --name="AdalUsers"

Add theAdalUsersModule to your imports and the Adal5Service to your providers in the src/app/store/app-store.module.ts file:

import {Adal5Service} from 'adal-angular5';
import {AdalUsersModule} from './adal-users/adal-users.module';
...

@NgModule({
  declarations: [],
  imports: [
    ...
    AdalUsersModule,
    ...
  ],
  providers: [
    ...
    Adal5Service,
    ...
  ],
})
export class AppStoreModule {}

Add your client and tenant id in the src/app/store/adal-users.domain.ts file. If you need to get a clientId for your application, please refer to the Microsoft documentation on integrating applications with Azure Active Directory:
```
export const getAdalConfig = () => ({
  ...
  clientId: 'AZURE_CLIENT_ID',
  ...
  tenant: 'AZURE_TENANT_ID',
});
```

Add HandleWindowCallback to the src/app/app.component.ts:

import {Store} from '@ngrx/store';
import {AdalUsersAction} from './store/adal-users/adal-users.actions';
...

constructor(private store: Store<any>) {
  this.store.dispatch(new AdalUsersAction.HandleWindowCallbackRequest());
}

Start your app again
```
ng serve --open
```

If you are not logged in, you will be directed to Microsoft's sign in page to login. If you are logged in, you can look in the Redux tab of the developer tools and see your user object:

{
  adalUsers {
    ids: [ 'xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx' ],
    entities: {
      xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx: { ... },
    }
    lastResult: null,
    loaded: true,
    currentId: 'xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx',
  }
}

Microsoft Active Directory Authentication Library (MSAL) | Coming Soon

MSAL for Angular Preview Documentation

Run the command below to add the ADAL library
```
npm install --save @azure/msal-angular
```

Run the command below to generate the files:

```
ng g @zionappsupport/angular5-schematics:add-ngrx-msal
```

Coming Soon

Add a Third Party Login NgRx Store

This schematic has a few options:

name: The singular name of your authenticated users.
pluralName: The plural name of your authenticated users.
afterAdal: Set this flag if you want your third party login effect to start login after ADAL succeeds.
baseUrl: The environment variable property name of the base url for the login service.

Run the Schematic

If you have not done so, add a base api endpoint url to your src/environments/environment.ts and src/environments/environment.prod.ts respectively.
```
export const environment = {
  ...
  myBaseURI: 'https://www.my-login-endpoint.com',
  ...
};
```

Run the command below to generate the files:

ng g @zionappsupport/angular5-schematics:add-ngrx-login --afterAdal --name=User --pluralName=Users --baseUri=myBaseURI

Add theAdalUsersModule to your imports and the Adal5Service to your providers in the src/app/store/app-store.module.ts file:

import {UsersModule} from './users/users.module';
...

@NgModule({
  declarations: [],
  imports: [
    ...
    UsersModule,
    ...
  ],
  ...,
})
export class AppStoreModule {}

3. Add a NgRx Sub Store

This schematic has a few options:

name: The singular name of your authenticated users.
pluralName: The plural name of your authenticated users.
afterAdal: Set this flag if you want your third party login effect to start login after ADAL succeeds.
baseUrl: The environment variable property name of the base url for the login service.

If you have not done so, add a base api endpoint url to your src/environments/environment.ts and src/environments/environment.prod.ts respectively.
```
export const environment = {
  ...
  myBaseURI: 'https://www.my-login-endpoint.com',
  ...
};
```
Run the command below to generate the files, replacing the single and plural names for your sub store. Use PascalCase naming for your name and plural name:
```
ng g @zionappsupport/angular5-schematics:add-ngrx-sub-store --name=SingleName --pluralName=PluralName --baseUri=myBaseURI
```

Add the sub store module to the src/app/store/app-store.module.ts file. The import statement below will be based off of the name of your sub store.

import {SubStoreModule} from './sub-store/sub-store.module';
...

@NgModule({
  declarations: [],
  imports: [
    ...
    SubStoreModule,
    ...
  ],
  providers: [],
})
export class AppStoreModule {}

4. Add routing module to existing component

Run the command below to generate the files:

ng g @zionappsupport/angular5-schematics:add-routing-module --name=MyPage

Import the module into your src/app/app.module.ts file:

import {MyPageModule} from './pages/my-page/my-page.module';
...

@NgModule({
  declarations: [],
  imports: [
    ...
    MyPageModule,
    ...
  ],
  providers: [],
})
export class AppModule {}