howto_angular client generation

Table of Contents

• Angular 6 Client Generation
  • Requisites
  • Angular 6 workspace
  • Install Node dependencies
  • Generating
  • Routing
  • JWT Authentication
  • Running

Angular 6 Client Generation

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

Take into account that the TypeScript merging for CobiGen needs Node 6 or higher to be installed at your machine.

Note	This is a short introduction to the Angular generation. For a deeper tutorial including the generation of the backend, we strongly recommend you to follow this document.

Requisites

Install yarn globally:

npm install -g yarn

Angular 6 workspace

The output location 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 devon4ng-application-template folder at the root of the devon4j project parent folder:

root/
 |- devon4ng-application-template/
 |- devon4j-project-parent/
   |- core/
   |- server/

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

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

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

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

Install Node dependencies

Open a terminal into devon4ng-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 relative to Angular:

Note	The Angular devon4j 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 generated app-routing.module file:

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 { SampleDataGridComponent } from './sampledata/sampledata-grid/sampledata-grid.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 the following into the children object of home, will add into the side menu the entry for the component generated:

{
    path: 'sampleData',
    component: SampleDataGridComponent,
    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 { SampleDataGridComponent } from './sampledata/sampledata-grid/sampledata-grid.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: 'sampleData',
        component: SampleDataGridComponent,
        canActivate: [AuthGuard],
    }]
}, {
    path: '**',
    redirectTo: '/login',
    pathMatch: 'full'
}];
export const routing = RouterModule.forRoot(appRoutes);

JWT Authentication

If you are using a back end server with JWT Authentication (there is a sample in workspaces/folder called sampleJwt) you have to specify the Angular application to use this kind of authentication.

By default the variable is set to ‘csrf’ but you can change it to JWT by going to the Enviroment.ts and setting security: 'jwt'.

Running

First of all, run your devon4j 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 --open

This will run the Angular 6 application at:

http://localhost:4200

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