Angular Schematics for Productivity and Consistency
Developing large-scale web-applications is hard, and without a lot of experience building large Angular applications, it's very easy to make an architectural or structural mistake that could cost your team a lot of money and time to fix down the road once that mistake is realized.
The schematics in this library will help your team develop Angular applications that are consistent and have an architecture/folder structure that will scale for extremely large projects right from the get-go.
The output of these schematics is based on many years of experience building large-scale projects in Angular, and have been used in applications that contain several hundred-thousand lines of code. Thus, the opinions and ideas behind these schematics have been battle-tested and proved to prevent and solve scalability problems many people run into when building large-scale Angular projects.
Installation
To add these schematics to your angular-cli project, type the following in the console at the root of your project:
npm install @egervari/schematics-angular --save-dev
To run schematics from your console, also add the following global npm library:
npm install -g @angular-devkit/schematics-cli
Using Schematics Via Console
Adding prettier and overwriting TSLint and Prettier rules
To add prettier (if you currently don't have it installed) and use Rangle's preferred starting point for TSLint and Prettier rules, run the following schematic from your console:
schematics @egervari/schematics-angular:tslint-and-prettier
Running this schematic will also create a bunch of scripts to conveniently check and fix your project so you don't have to add them yourself.
You should see the following updates to your project:
Added "prettier" into devDependencies Added "tslint-config-prettier" into devDependenciesCREATE /prettier.config.js UPDATE /tslint.json UPDATE /package.json
Creating Features
To create a feature module containing components, routes, services,
types and isolated ngrx infrastructure, you must specify the feature's
name
, path
and optionally, you can specify your project's component
prefix
for its selector, but the schematic can often figure this out
from your Angular project workspace.
schematics @egervari/schematics-angular:feature --name=my-feature --path=src/app --prefix=rng
If your project currently does not have a /features
folder, the
schematic will create one for you.
You should see the following files be created/updated when running this schematic:
CREATE /src/app/features/my-feature/my-feature-routing.module.ts CREATE /src/app/features/my-feature/my-feature.module.ts CREATE /src/app/features/my-feature/components/my-feature/my-feature.component.html CREATE /src/app/features/my-feature/components/my-feature/my-feature.component.scss CREATE /src/app/features/my-feature/components/my-feature/my-feature.component.ts CREATE /src/app/features/my-feature/components/index.ts CREATE /src/app/features/my-feature/services/my-feature.service.ts CREATE /src/app/features/my-feature/store/my-feature.actions.ts CREATE /src/app/features/my-feature/store/my-feature.effects.ts CREATE /src/app/features/my-feature/store/my-feature.reducer.ts CREATE /src/app/features/my-feature/store/my-feature.store.ts CREATE /src/app/features/my-feature/types/my-feature-state/my-feature-state.functions.spec.ts CREATE /src/app/features/my-feature/types/my-feature-state/my-feature-state.functions.ts CREATE /src/app/features/my-feature/types/my-feature-state/my-feature-state.interface.ts UPDATE /src/app/store/app.reducer.ts UPDATE /src/app/types/app-state/app-state.interface.ts UPDATE /src/app/types/app-state/app-state.functions.ts UPDATE /src/app/app-routing.module.ts
Creating Modules
Sometimes you wish to create modules outside of your routes. They are not really features, but reusable pieces of code the rest of the app can share. To create such a module, run the following schematic:
schematics @egervari/schematics-angular:module --name=my-module --path=src/app
If your project currently does not have a /modules
folder, the
schematic will create one for you.
You should see the following files be created/updated when running this schematic:
CREATE /src/app/modules/my-module/my-module.module.ts CREATE /src/app/modules/my-module/services/my-module.service.ts CREATE /src/app/modules/my-module/store/my-module.actions.ts CREATE /src/app/modules/my-module/store/my-module.effects.ts CREATE /src/app/modules/my-module/store/my-module.reducer.ts CREATE /src/app/modules/my-module/store/my-module.store.ts CREATE /src/app/modules/my-module/types/my-module-state/my-module-state.functions.spec.ts CREATE /src/app/modules/my-module/types/my-module-state/my-module-state.functions.ts CREATE /src/app/modules/my-module/types/my-module-state/my-module-state.interface.ts UPDATE /src/app/store/app.reducer.ts UPDATE /src/app/types/app-state/app-state.interface.ts UPDATE /src/app/types/app-state/app-state.functions.ts UPDATE /src/app/app.module.ts
Creating Components
Creating components is equally easy - make sure to point the path
to the module/feature folder you wish the component to be located:
schematics @egervari/schematics-angular:component --name=my-form --path=src/app
If your path currently does not have a /components
folder, the
schematic will create one for you.
You should see the following files be created/updated when running this schematic:
CREATE /src/app/components/my-form/my-form.component.html CREATE /src/app/components/my-form/my-form.component.scss CREATE /src/app/components/my-form/my-form.component.ts UPDATE /src/app/components/index.ts UPDATE /src/app/app.module.ts
Creating Services
Creates a service and updates the containing module file.
schematics @egervari/schematics-angular:service --name=my-api --path=src/app
If your path currently does not have a /services
folder, the
schematic will create one for you.
You should see the following files be created/updated when running this schematic:
CREATE /src/app/services/my-api.service.ts UPDATE /src/app/app.module.ts
Creating Types
Creates a paired interface and functions file for a given model.
schematics @egervari/schematics-angular:type --name=user-profile --path=src/app
If your path currently does not have a /types
folder, the
schematic will create one for you.
You should see the following files be created when running this schematic:
CREATE /src/app/types/user-profile/user-profile.functions.spec.ts CREATE /src/app/types/user-profile/user-profile.functions.ts CREATE /src/app/types/user-profile/user-profile.interface.ts
Creating a new project
The Angular CLI and the default @ngrx schematics do not create folders and files that help developers scale over the long term. Thus, we also provide a schematic to make some adjustments to a newly created Angular CLI project to help you get started on the right foot and to support the other schematics.
To create a new Angular CLI Project, execute the following commands and you're good to go:
npm install @angular/cli -g ng new my-project
When asked:
- Say (Y)es to add Angular Routing
- Select SCSS for your stylesheet format
cd my-project ng add @ngrx/storeng add @ngrx/effects npm install @egervari/schematics-angular --save-dev
And then to correct the default structure, run the initialize
schematic with no parameters:
schematics @egervari/schematics-angular:initialize
You should see the following changes:
Added "prettier" into devDependencies Added "tslint-config-prettier" into devDependenciesDELETE /src/app/app.component.htmlDELETE /src/app/app.component.scssDELETE /src/app/app.component.tsDELETE /src/app/reducers/index.tsDELETE /src/app/app.effects.tsDELETE /src/app/app.component.spec.tsDELETE /src/app/app.effects.spec.tsCREATE /prettier.config.js CREATE /src/app/types/app-state/app-state.functions.ts CREATE /src/app/types/app-state/app-state.interface.ts CREATE /src/app/components/index.ts CREATE /src/app/components/app/app.component.html CREATE /src/app/components/app/app.component.scss CREATE /src/app/components/app/app.component.ts CREATE /src/app/store/app.reducer.ts CREATE /src/app/store/app.effects.ts CREATE /src/app/store/app.store.ts UPDATE /tslint.json UPDATE /package.json UPDATE /src/app/app.module.ts
Where to go from here?
From here, you can run schematics for creating features to get your
project started. For example, to create a landing
section for your
application, run the following schematic:
schematics @egervari/schematics-angular:feature --name=landing --path=src/app
And to create the home
, login
and forgot-password
sections within the
landing module, run the following 3 schematics:
schematics @egervari/schematics-angular:feature --name=home --path=src/app/features/landingschematics @egervari/schematics-angular:feature --name=login --path=src/app/features/landingschematics @egervari/schematics-angular:feature --name=forgot-password --path=src/app/features/landing
At this point, take a quick look at your source code and you'll be astounded as to how much manual labour was saved as a result of using these schematics. Everything is modularized and chained together for you, such as your routes, lazy-loading, states, state default values and reducers. Your NgModule's are properly connected. You have clear separation of concerns everywhere.
And if you're new to Angular and didn't know the right way to begin your first project architecturally, this will put you on the right path to having a great, scalable architecture over the long-term.
Using Schematics Through WebStorm
To use schematics in WebStorm, right-click on a folder, select 'New', then select 'Angular Schematic', and then select any schematic from the following list:
For the parameters input, WebStorm will pass many of the options - such
as project name and path - on your behalf, so all you have to do is set
the name
parameter for most schematics and you're all set:
Building and testing
To build the source code, run:
npm run build
After the schematics are built, to run them locally from the project root, run:
cd distschematics .:feature --name=app --path=src/app
Linting and Prettier
To clean up the source code, run:
npm run fix
Publishing
To publish this to npm, run the following commands:
npm version major/minor/patchnpm run buildnpm run publish
Quickly create a patch version
To quickly create a patch version, instead of going through all of the build and publish commands manually, instead run:
npm run release-patch