howto_angular client generation

Table of Contents

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

Angular Client Generation

The generation can create a full Angular client (Angular 13, as of March 2022) 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 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 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 the 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 the devon4ng-application-template repository into this output path.

Install Node dependencies

Open a terminal in the just copied devon4ng-application-template folder and run the command:

yarn

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

Generating

Choose an ETO object as an input file for CobiGen, right click on it and select CobiGen → Generate from the context menu. CobiGen will then display a wizard showing you the resources to be generated which are related to your input file:

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 have 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 it is not possible to merge the array of path objects of the routings at app-routing.module.ts file properly, so the 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.ts file:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './core/security/auth-guard.service';
import { NavBarComponent } from './layout/nav-bar/nav-bar.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full',
  },
  {
    path: 'login',
    loadChildren: () =>
      import('./auth/auth.module').then(m => m.AuthDataModule),
  },
  {
    path: 'home',
    component: NavBarComponent,
    canActivateChild: [AuthGuard],
    children: [
      {
        path: 'initial',
        loadChildren: () =>
          import('./home/initial-page/initial-page.module').then(
            m => m.InitialPageModule,
          ),
      },
      {
        path: 'sampleData',
        loadChildren: () =>
          import('./sampledata/sampledata.module').then(
            m => m.SampleDataModule,
          ),
      },
    ],
  },
  {
    path: '**',
    redirectTo: '/login',
  },
];
@NgModule({
  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Adding the following to the children object of home will add a new side menu entry to the component generated:

{
    path: 'employee',
    loadChildren: () =>
        import('./employee/employee.module').then(
            m => m.EmployeeModule,
        )
}

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './core/security/auth-guard.service';
import { NavBarComponent } from './layout/nav-bar/nav-bar.component';


const routes: Routes = [{
        path: '',
        redirectTo: '/login',
        pathMatch: 'full'
    },
    {
        path: 'login',
        loadChildren: () =>
            import('./auth/auth.module').then(m => m.AuthDataModule)
    },
    {
        path: 'home',
        component: NavBarComponent,
        canActivateChild: [
            AuthGuard
        ],
        children: [{
                path: 'initial',
                loadChildren: () =>
                    import('./home/initial-page/initial-page.module').then(
                        m => m.InitialPageModule,
                    )
            },
            {
                path: 'sampleData',
                loadChildren: () =>
                    import('./sampledata/sampledata.module').then(
                        m => m.SampleDataModule,
                    )
            },
            {
                path: 'employee',
                loadChildren: () =>
                    import('./employee/employee.module').then(
                        m => m.EmployeeModule,
                    )
            }
        ]
    },
    {
        path: '**',
        redirectTo: '/login'
    }
];

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

}

JWT Authentication

If you are using a backend server with JWT authentication, you need to specify this type of authentication to be used by your Angular application (default when generating from the devon4ng template).

environment.ts

export const environment = {
  ...,
  security: 'jwt',
};

An alternative would be to set security: 'csrf'. For more details, see the devon4j CSRF guide.

Running

First of all, run your devon4j java server by right clicking on the SpringBootApp.java file and choose Run As → Java Application from the context menu. This will start to run the SpringBoot server. Once you see the statement: Started SpringBoot in XX seconds, the backend is running.

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

ng serve --open

This will run the Angular application at:

http://localhost:4200

Once finished, the browser will open automatically at the previously stated localhost URL showing the Angular application. You can use the credentials set at the devon4j java server to login.