Difficulty: Beginner
Estimated Time: 35 Minutes

The definition of each step of this tutorial can be found at https://github.com/devonfw-tutorials/tutorials/tree/main/devon4ng-architecture.

Feel free to report any errors to us or fix them yourself. Errors can be reported by creating an issue in the tutorials repository. To fix the error fork the repository and create a pull request. Errors in the wiki can be reported and fixed in the tutorial-compiler repository. You can find a description of what to look for when creating a pull request at the devonfw contribution guide: https://devonfw.com/website/pages/community/community.html#community.asciidoc_contributing-to-devonfw. If you want to create a tutorial you can start with the katacoda tutorial and read the description for creating your own tutorials: https://github.com/devonfw-tutorials/tutorials/wiki/Development.


Basic Angular knowledge

Learning goals

This tutorial aims to explain concepts and principles of devon4ng architecture by refering an Angular application template. Below are the steps we will go through to understand it clearly.

  • Understand Angular architectural terminology (components and modules)

  • Different layers of an Angular application

  • Different types of modules - feature, core, shared

You will be refering a devon4ng application while going through the theoretical aspects of the tutorial.

By end of this tutorial you will have detailed understanding of principles followed by devon4ng application as well as its structure and architecture.


To conclude, in this tutorial you learned

  • the concepts of modules and components

  • the layers of the architecture - components and services

  • the different types of modules - core, shared and feature

Then we referred a devon4ng application by cloning it and traversing through its files. You can study in more detail about Angular architecture by following this document.

The idea with devon4ng is to define an architecture which is a compromise between, on the one hand, leveraging the best practices and latest trends like reactive style development, on the other hand, providing a short onboarding time while still using an architecture that helps us scale and be productive at the same time.

devon4ng architecture

Step 1 of 6


An Angular application is component based like devon4j, but different terminology is used as compared to devon4j. Primarily the term used is module instead of component. To clarify this:

  • A component describes an UI element containing HTML, CSS and JavaScript - structure, design and logic encapsulated inside a reusable container called component.

  • A module describes an applications feature area. The application flight-app may have a module called booking.

An application developed using Angular consists of multiple modules. There are feature modules and special modules - core and shared. Angular or Angular Styleguide give no guidance on how to structure a module internally. This is where this architecture comes in.

We will refer a devon4ng application for better understanding. But before that, let us understand the Architectural Layers of a devon4ng application.