Let's Go

Clone the repository

Clone the repository onto your local machine.

git clone https://investec@dev.azure.com/investec/client-channel-tech/_git/cxt-channel-investec-online-apps.git

Make sure you are in the investec-online directory and install the npm modules.

npm install --legacy-peer-deps

Serving up the web platform

Edit your hosts file (e.g. C:\Windows\System32\drivers\etc) and add and entry for the platform. This is needed for API calls which would be blocked by CORS restrictions.

127.0.0.1   ng.secure.investec.com

Also ensure you have an active develop session by login into dev enviroment

Finally run the below command which will launch the platform on ng.secure.investec.com

npm run io-dev

Generating an application

When generating a new application, the angular cli provides some options - you can read more about them here. Run the command below to inherit the required configurations for the web platform.

It is advised to make use of the --dry-run flag in order to simulate the generation first time round. After you are happy, remove the --dry-run flag from the command below. Note that the --dry-run flag can be used for any angular cli command.

ng g app my-app --dry-run

You will be presented with the below options:

What framework would you like to use for the application? Angular

In which directory should the application be generated? private-client-apps directory if your app is for private client platform business-banking-apps directory if your app is for business banking platform

Which stylesheet format would you like to use? SCSS

Which tags would you like to add to the application? (used for linting)? press enter

Wait for your App to be generated. Once completed, go to the angular.json file:

Chang your project name (It will either start with private-client-apps- or business-banking-apps-) by removing the private-client-apps- or business-banking-apps- , leaving only the app name. Example: private-client-apps-my-app changes to my-app
Do it for both the project name and the project e2e name

Open the nx.json file:

Chang your project name (It will either start with private-client-apps- or business-banking-apps-) by removing the private-client-apps- or business-banking-apps- , leaving only the app name. Example: private-client-apps-my-app changes to my-app
Do it for both the project name and the project e2e name

You will now be able to serve up your new application as a standalone application by running the below command.

ng serve --project my-app

Almost done! In order for your new application to be consumed within the platform application, you will need to complete the next step.

Web platform configuration for new application

As the web platform consumes and routes between multiple applications such as the one you just created, you will need to configure your application to cater for this.

Generate a page component

Your application will need a page component that it will default to (especially if you are planning on having multiple pages you need to route to). The page component will contain all child components that make up the page.

ng g c page-name-here --project my-app --dry-run

Note: The app.component can be used if you wish to use it a the main page component.

Generate routing module

You application will need to be able to route between components within its self.

ng g m app-routing --project my-app --dry-run

Modify the apps/my-app/src/app/app-routing/app-routing.module.ts to look like the below:

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from "@angular/router";
import {BaseNameHereComponent} from "../base-name-here/base-name-here.component";
import {AppComponent} from "../app.component";

const routes: Routes = [
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  },
  {
    path: '',
    component: AppComponent,
    children: [
      {
        path: '',
        redirectTo: 'some-path',
        pathMatch: 'full'
      },
      {
        path: 'some-path',
        component: BaseNameHereComponent
      }
    ]
  },
];

@NgModule({
  declarations: [],
  imports: [
    RouterModule.forChild(routes),
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {
}

Export your app

You need to make your application available as a module via exporting it. Open up your base module (e.g. apps/my-app/src/app/app.module.ts) and add the missing export.. below the default AppModule {}.

...
export class AppModule {}

@NgModule({})
export class AppMyApp{
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: AppModule,
      providers: []
    }
  }
}

Note that the BrowserModule is not needed anymore hence can be removed in order to keep your app uncluttered. Additionally, you will have to add the CommonModule in the imports array in your app module.ts file. The import statement:

import {CommonModule} from "@angular/common";

Note: Remeber to include your router module in your main module's imports

 imports: [
    ...
    AppRoutingModule
    ...
]

Web platform team configuration

Once step 1-4 has been completed, you will need to request that your application be added to the app platform project, this project is maintained by the platform team and you may not alter it.

You can send a email to platform-web-core@investec.co.za to action it.

Running the platform

Once your project is added to the app-platform, you can run the following command to startup the platform:

npm run io-dev

check the package.json file for available commands

With a valid session, you will now be able to route to your application

Clone the repository​

Serving up the web platform​

Generating an application​

Web platform configuration for new application​

Generate a page component​

Generate routing module​

Export your app​

Web platform team configuration​

Running the platform​