Yet Another Angular Generator

angular, generator, schematics, angular-cli
npm install yang-schematics@4.3.0


License: MIT npm Build Status codecov

Yang Schematics

Yet Another Angular Generator - Powered by Schematics

Yang Logo


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).

Folder Structure

│  ...
│  prebuild.js            <----------------- Script for generating "app-manifest.json" (version number and built date)
│  ...
   │  ...
   │  tsconfig.json
   │  │  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
   │  │
   │  ├───models
   │  │     app-config.model.ts  <------- See assets/config/app-config.json
   │  │
   │  └───shared
   │     │  shared.module.ts    <-------- Shared modules (where you can add 3rd party modules)
   │     │
   │     ├───components
   │     └───pipes
   ├───assets                <----------- Assets folders (images, styles, etc)
   │  ├───config
   │  │     app-config.json
   │  │
   │  ├───i18n
   │  ├───images
   │  └───styles
   │        app-styles.scss
   │        _variables.scss
   └───environments            <--------- Environnements configuration


Install Yang-Schematics using npm npm install -g yang-schematics.


Generate your new project inside any folder:

ng new my-awesome-project -c yang-schematics

This 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 start

Browse 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 complete feature under app/features.

  • --component : Add a new 'my-super-feature' component. Options from the 'component' schematic are available.


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.

  • --styles : Add a name.component.scss
  • --template : Add a name.component.html
  • --flat : Does not create a sub-folder for the component


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.