Angular Project Generator (apg)
Setup a complete PWA based on angular and material design
Command line interface (CLI) for angular 9.
Project generator based on angular-cli with best practices. It helps you to generate an robust angular project seed. To get help just type:
apg new --help
The generated app will have a lot of common features like:
- Based on angular material UI library
- Predefined pages/routes (Imprint, Login, ...)
- Responsive layout
- Basic PWA support
- It contains manifest file and service worker configuration.
- Dynamic routes with AuthGuardCanActivate
- Global data store via facade services (BehaviorSubject, Local Storage support)
- Usefull helpers like:
- typesafe FormGroup
- Version Indicator (shows build date)
- Couterdown & countup component (for session timeout, ...)
- Gherkin E2E test setup: chai, cucumber, jasmine, karma, protractor and predefined base steps (given, when, then)
- Integrated jest for better and faster unit testing
- Theme switcher for light and dark
- Predefined npm scripts
- A complete starter template: example app structure tailored for scalability, with examples and boilerplate code for every common thing needed in enterprise projects, such as unit tests, routing & authentication.
- Better description of used patterns
- More Demo pages
- Generator für common services (REST, Store, ...)
- Generator for dialog patterns (list & detail dialogs, drill down dialogs, ...)
- Predefined Deutsche Bahn and Deutsche Bank SCSS according to the company style guides
Both the CLI and generated project have dependencies that require Node 8.9 or higher, together with NPM 5.5.1 or higher.
npm i -g angular-project-generator@latest
apg --helpapg new --helpapg generate --help
Updating npm, angular cli
apg new -a MyApp -p app -cp ma# Deutsche Bahn developer:apg new -a click-n-ride -p app -cp cr -l deutschebahn -f# Deutsche Bank developer:apg new -a TradeFinder -p app -cp tf -l deutschebank
The created app shell has a lot of complexity, which is not required for every project. After generating the app:
- configure the behaviour in environment.ts
- delete unnecessary routes, modules and mock data
E2E tests can be written in Gherkin notation.
@homepageFeature: 001 LoginThe login page allows the users to log in.@goto @happyScenario: Home PageGiven I am on the "anmelden" pageWhen I do nothingThen I should see the page title "Anmelden"@login @happyScenario: The login button should be disabled when I enter the login pageGiven I am on the "anmelden" pageThen The button "anmelden-login-button" should be disabled