Customizations
There are 2 ways to add custom code to an applicationApplicationThe overarching model container grouping all components, domain logic, and configurations for an enterprise solution.:
- Insert code in custom anchorsAnchorA marker within generated source code reserved for adding custom logic during re-expansion..
- Add a custom file to one of the ext directories.
The angular-expandersExpanderA unit of generation that combines a data tree instance (functional M1 model) with a template to generate an artifact. have no physical ext and gen folders. A manifest file (.expansion-manifest) is used to keep track of which artifactsArtifactA build or deployment result, such as a Docker container image or Java archive, produced by a software project. have been expanded, so an ext file can live next to a gen file. Not every folder acts as an ext folder:
- Assets is an
extfolder. - The subfolders of styles are
extfolders. - The subfolders of core, shared and feature modules act as an
extfolder. This means components, services, features, etc.
Every folder mentioned above except for root allows harvest of subfolders and more layersLayerLogical separation of functionality within a single system/application, focused on code organization. deep. However, keep in mind that a flatter structure is preferred in Angular front-end projects.
To deviate from this structure, you can add folders or files to the .harvestInclude files.
Config
Angular environment files allow you to have separate configurations for different build targets. However, our CI/CD (Jenkins) is not set-up to facilitate different target builds. We would rather fill the target specific information using docker environment variables. To achieve this, an environment variables substitution when creating the container is necessary. This can only be done on files that are physically available in the target folder of our angular project. Environment files are not, because they get baked into the application and a trace of the variable to substitute cannot be found anymore.
Menu
When running a fresh expanded Angular project, you'll notice that the sidebar contains all items grouped by FeatureModule. If you want a custom menu structure, you have to add it in the menu.service.ts. This service contains custom anchors to add menu entries.
Translations
Translations are handled using the ngx-translate package, with some added tweaks:
Default Overrides
There are two mechanisms to override the default behaviour of expanded pages and styling, powered by default anchors, namely: