howto_angular client generation

Table of Contents

• Angular4 Client Generation
  • Requisites
  • Angular4 workspace
  • Install Node dependencies
  • Generating
  • Routing
  • Running

Angular4 Client Generation

The generation can create a full Angular4 client using the oasp4js-application-template package located at workspaces/examples folder of the distribution. For more details about this package, please refer here.

You have to have into account that the TypeScript merging using CobiGen needs Node 6 or higher to be installed at your machine.

Requisites

Install yarn globally:

npm install -g yarn

Angular4 workspace

The output of the generation can be defined editing the cobigen.properties file located at crud_angular_client_app/templates folder of the CobiGen_Templates project.

By default, the output path would be into the oasp4js-application-template folder at the root of the oasp4j project parent folder:

root/
 |- oasp4js-application-template/
 |- oasp4j-project-parent/
   |- core/
   |- server/

However, this path can be changed, for example to src/main/client folder of the OASP4J project:

relocate: ./src/main/client/${cwd}

root/
 |- oasp4j-project-parent/
   |- core/
      |- src
        |- main
          |- client
   |- server/

Once the output path is chosen, copy the files of OASP4JS-APPLICATION-TEMPLATE repository into this output path.

Install Node dependencies

Open a terminal into oasp4js-application-template copied and just run the command:

yarn

This will start the installation of all node packages needed by the project into the node_modules folder.

Generating

From an Eto object, right click, CobiGen → Generate will show the CobiGen wizard relative to client generation:

Check all the increments realtive to Angular:

Note	The Angular OASP4J URL increment is only needed for the first generations however, checking it again on next generation will not cause any problem.

As we done on other generations, we click Next to choose which fields to include at the generation or simply clicking Finish will start the generation.

Routing

Due to the nature of the TypeScript merger, currently is not possible to merge properly the array of paths objects of the routings at app.routing.ts file so, this modification should be done by hand on this file. However, the import related to the new component generated is added.

This would be the file generated:

import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './shared/security/auth-guard.service';
import { InitialPageComponent } from './initial-page/initial-page.component';
import { HomeComponent } from './home/home.component';
import { SampledatamanagementDataGridComponent } from ./sampledatamanagementdataGrid/sampledatamanagementdataGrid.component';
//Routing array
const appRoutes: Routes = [{
    path: 'login',
    component: LoginComponent
}, {
    path: 'home',
    component: HomeComponent,
    canActivate: [AuthGuard],
    children: [{
        path: '',
        redirectTo: '/home/initialPage',
        pathMatch: 'full',
        canActivate: [AuthGuard]
    }, {
        path: 'initialPage',
        component: InitialPageComponent,
        canActivate: [AuthGuard]
    }]
}, {
    path: '**',
    redirectTo: '/login',
    pathMatch: 'full'
}];
export const routing = RouterModule.forRoot(appRoutes);

Adding into the children object the following, will add into the side menu the entry for the component generated:

{
    path: 'sampledatamanagementdataGrid',
    component: SampledatamanagementDataGridComponent,
    canActivate: [AuthGuard]
}

import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './shared/security/auth-guard.service';
import { InitialPageComponent } from './initial-page/initial-page.component';
import { HomeComponent } from './home/home.component';
import { SampledatamanagementDataGridComponent } from ./sampledatamanagementdataGrid/sampledatamanagementdataGrid.component';
//Routing array
const appRoutes: Routes = [{
    path: 'login',
    component: LoginComponent
}, {
    path: 'home',
    component: HomeComponent,
    canActivate: [AuthGuard],
    children: [{
        path: '',
        redirectTo: '/home/initialPage',
        pathMatch: 'full',
        canActivate: [AuthGuard]
    }, {
        path: 'initialPage',
        component: InitialPageComponent,
        canActivate: [AuthGuard]
    }, {
        path: 'sampledatamanagementdataGrid',
        component: SampledatamanagementDataGridComponent,
        canActivate: [AuthGuard]
    }]
}, {
    path: '**',
    redirectTo: '/login',
    pathMatch: 'full'
}];
export const routing = RouterModule.forRoot(appRoutes);

Running

First of all, run your Oasp4J java server by right clicking over SpringBootApp.java Run As → Java Application. This will start to run the SpringBoot server. Once you see the Started SpringBoot in XX seconds, the backend is running.

Once the the server is running, open a Devon console at the output directory defined previously and run:

ng serve -o

This will run the Angular4 application at:

http://localhost:4200

Once finished, the browser will open automatically at the previous localhost URL showing the Angular4 application, using the credentials set at the OASP4J java server you will be able to access.