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/[email protected]

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/[email protected] @ngrx/[email protected] @ngrx/[email protected] @ngrx/[email protected]

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

• Google Chrome Web Store
• Mozilla Firefox Add-ons

Commands Available

1. Add the base NgRx store files
2. Add your Authentication NgRx Stores
   • Active Directory Authentication Library (ADAL)
   • Third Party API Service
3. Add a NgRx Sub Store
4. Add routing module to existing component

1. Add the base NgRx store files

1. Run the command below to generate the files:

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

2. 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 { }

3. Start your app again

   ng serve --open

4. 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

1. Run the command below to add the ADAL library

   npm install --save adal-angular5

2. Run the command below to generate the files:

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

3. 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 {}

4. 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',
   });

5. 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());
   }

6. Start your app again

   ng serve --open

7. 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

1. Run the command below to add the ADAL library

   npm install --save @azure/msal-angular

2. 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

1. 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',
     ...
   };

2. Run the command below to generate the files:

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

3. 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.

1. 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',
     ...
   };

2. 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

3. 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

1. Run the command below to generate the files:

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

2. 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 {}

3. Remove the imports of the component from the App Module.

Roadmap

1. MSAL
2. Unit Tests included
   • SubStore
   • ADAL
   • MSAL

Notes

• @angular/schematics v0.3.2 was used because of the need for RxJs v5
• Max Angular v5.2.11