⚠️ This project is no longer under development.
Yet Another Angular Generator - Powered by Schematics
The purpose of YANG is to create a more production-ready Angular application.
It use the Angular Schematics to generate the code.
YANG use the LIFT principle :
- Locating our code is easy
- Identify code at a glance
- Flat structure as long as we can
- Try to stay DRY (Don't Repeat Yourself) or T-DRY
When generating a new Angular application with the Yang-Schematics, you have :
- A simple 4 modules structure : core, shared, layouts and features (see below)
- Lazy loading for all modules inside 'features'
- Sample bootstrap code
- Sample interceptor code
- i18n with @ngx-translate
The CoreModule contains all the @Injectable elements that should be instantiate only once in the application.
Ex: services, interceptors, etc.
You can also add the modules with a .forRoot() method inside the imports array of the CoreModule.
The SharedModule contains all elements (components, directives, pipes) that will be used accross the entire application.
Ex: a PageHeaderComponent, a security directive, etc.
You can also add the modules you want to use everywhere inside the MODULES array of the SharedModule.
Then, you just have import the SharedModule inside your module.
This module contains a MainLayoutModule where you can customise the application layout.
You can also add others layout inside (for example, a LoginLayout).
You can see a feature as a "business block" for your application.
A good example would be an "admin feature" where you can have a component to manage the users, the configuration, etc.
Each feature is lazy-loaded by default.
You can create what you want inside a feature (a component, a directive, a module, another feature).
PROJECT_ROOT
│ ...
│ webpack.extra.js <----------------- Script for generating "app-manifest.json" (version number and built date)
│ ...
│
├───e2e
└───src
│
├───app
│ │ app-routing.module.ts <------ Main routing
│ │ app.component.spec.ts
│ │ app.component.ts
│ │ app.module.ts
│ │
│ ├───core
│ │ │ core.initializer.ts <------ Code to execute when the application starts
│ │ │ core.interceptors.ts <------ HttpClient interceptors (rewrite /api/ to the api url inside environment config file)
│ │ │ core.module.ts
│ │ │ core.services.ts <------- Module pour regrouper tous les services
│ │ │
│ │ └───services
│ │ config.service.ts <------ Load assets/config/app-config.json and expose an AppConfig object
│ │ logger.service.ts <------ Logging that can send error to a server
│ │
│ ├───features
│ │ │ features.module.ts
│ │ │
│ │ └───home
│ │ home-routing.module.ts
│ │ home.component.spec.ts
│ │ home.component.ts
│ │ home.module.ts
│ │
│ ├───layouts
│ │ └───main <-------- Main layout module for the application
│ │
│ ├───models
│ │ app-config.model.ts <------- See assets/config/app-config.json
│ │
│ └───shared
│ │ base.module.ts <-------- Base modules for the main components (app & layouts)
│ │ shared.module.ts <-------- Shared modules (where you can add 3rd party modules used almost everywhere)
│ │
│ ├───components
│ └───pipes
│
├───assets <----------- Assets folders (images, styles, etc)
│ ├───config
│ │ app-config.json
│ │
│ ├───i18n
│ ├───images
│ └───styles
│ app-styles.scss
│ _variables.scss
│
└───environments <--------- Environnements configuration
environment.prod.ts
environment.ts
Install Yang-Schematics using npm npm install -g yang-schematics.
Generate your new project inside any folder:
ng new my-awesome-project -c yang-schematicsThis will create a new folder my-awesome-project containing a fresh Angular application, powered with the YANG structure.
Next : install dependencies and run the project :
cd my-awesome-project
npm install
npm run startBrowse to http://localhost:4200.
That's all !
The default schematics for this project is 'yang-schematics'.
If you have changed it, don't forget to append yang-schematics: before every schematic call.
ng g feature my-super-feature (or ng g f...)
Generates a feature under app/features with an empty component.
To skip the component generation, use : ng g feature foo --component=false or ng g f foo -c=false
--component: Create a 'my-super-feature' component. Options from the 'component' schematic are available. (default: true)
ng g component my-nice-component (or ng g c...)
Generates a component under the current directory.
ng g component shared/my-shared-component
Generates a component under app/shared/components.
ng g component my-super-feature/my-feature-component
Generates a component under app/features/my-super-feature/my-feature-component.
--routing: Specifies if a route should be generated for this component--route <name>: Specifies the name of the route to generate
ng g service my-cool-service (or ng g s...)
Generates a service under app/services.
ng g directive my-small-directive (or ng g d...)
Generates a stub directive under app/shared/directives.
ng g pipe my-nice-pipe (or ng g p...)
Generates a pipe under app/shared/pipes.
ng g proxy
Generates a simple proxy configuration inside your project.
(more info: Angular documentation)
ng g jest
Replace Karma by Jest without changing your unit-tests.
Your npm run test and ng test commands still work but now, you can also use npm run jest:watch.
ng g i18n
Add @ngx-translate/core to the project.
MIT