Neo Angular Schematics
Angular schematics for a faster and scalable code generation.
WORK IN PROGRESS - USE WITH CAUTION
Usage
# create new angular/cli workspace
ng new ng-workspace --create-application=false
cd ng-workspace
# add neo schematics
# - this will add @neox/schematics to devDependencies
# - adds @neox/schematics as cli/defaultCollection (angular.json)
# - sets quotes to double (.editorconfig)
ng add @neox/schematics
# create new angular/cli project
ng generate application app-one -t -p=ao
# or
ng generate application app-one
ng generate neo-init --inlinetemplate --prefix=ao
ng generate neo-base
ng generate neo-module routes/main/main routing
ng generate neo-module routes/main/layouts/main layout
# add eslint (for more details: https://github.com/angular-eslint/angular-eslint)
ng add @angular-eslint/schematics
# change cli default schematics collection (angular.json/cli.defaultCollection)
As of Version 11.2.5 this project version is synced with the current angular version generated by the cli.
I try my best, otherwise raise an issue or send me an email. Thank you! :)
Table of Contents
Status
Quick start
Add to angular cli project
- Add with npm:
npm install --save-dev @neox/schematics
To use @neox/schematics as the default collection in your Angular CLI project, add it to your angular.json:
ng config cli.defaultCollection @neox/schematics
Usage
# create new angular/cli project with inline-templates, scss & no routing
ng new example -p ex -t --style=scss
cd example
# add neox/schematics
npm install --save-dev @neox/schematics
# add neox/schematics as defaultCollection
ng config cli.defaultCollection @neox/schematics
# initialize neo project and add sytlelint
ng g neo-init
npm run add-stylelint
# add folder structure
ng g neo-base
# add new module (eg user) to routes
ng g neo-module routes/user
# import UserModule in routes.module.ts
# import UserViewComponent in routes.ts
ng serve
# --- optional ---
# add fontawesome
ng g neo-fontawesome
npm run add-fontawesome
# add fontawesome pro
ng g neo-fontawesome --token=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
npm run add-fontawesome
Schematics
Neo-Init
Adds Neo configuration
- Runs neo styles schematic
- angular.json
- Sets prefix
- style: scss
- inlineTemplate: true
- stylePreprocessorOptions -> includePaths: ["src/styles/scss"]
- tslint.json
- quotemarks: flags.quote
- no-inferrable-types: [..., "ignore-properties"]
- variable-name.options: [..., "allow-leading-underscore"]
- tsconfig.json
- adds path links for @assets, @core, @layout, @routes, @shared and @env
- package.json
- adds prod script: ng build --prod
- Removes app.component.html
- Adds core-, layout-, routes-module imports to app.module.ts
- Adds router-outlet to app.component.ts
- Applys quote to .editorconfig
Usage
ng g ni
Flags
-
prefix(string)
- The prefix to apply to the generated classes -
quotes("double"|"single")
- used quotation (default: "double") -
styles(boolean)
- run neo styles schematic (default: true) -
stylelint(boolean)
- run neo stylelint schematics (default: true) -
project(string)
- The name of the project (NOT implemented yet)
Neo-Styles
Adds Neo styles folder structure
Usage
ng g nst
Flags
-
project(string)
- The name of the project (NOT implemented yet)
Neo-Base
Creates Neo application structure
app
└─ core
└─ layout
└─ routes
└─ shared
Usage
ng g nb
Flags
-
project(string)
- The name of the project (NOT implemented yet)
Neo-Module
Creates a Neo Module
neo
│ neo.module.ts
│
└─ components
│ │ index.ts
│
└─ containers
│ │ index.ts
│
└─ views
│ │ index.ts
│
└─ services
│ index.ts
│ neo-sandbox.service.ts
│ ...
│
└─ util
│ index.ts
│
└─ neo
│ neo-util.service.ts
│ ...
Usage
ng g nm routes/auth
Flags
-
name(string)
- path/name of the module (argv-index: 0) -
type
- type of the created module (argv-index: 1)-
""
: creates name module with above folder structure -
core
: creates core module -
layout
: creates layout module -
routes
: creates routes module -
shared
: creates shared module
-
-
project(string)
- The name of the project
Neo-Component
Creates a Neo Component
Usage
ng g nc routes/auth/components/user-input
ng g nc routes/auth/views/auth --type=view --template='<span>This is an awesome view!</span>'
ng g nc routes/auth/containers/login container auth --destroyable
Flags
-
name(string)
- path/name of the component (argv-index: 0) -
type
- type of the created component (argv-index: 1)-
view
: creates a view component -
container
: creates a container -
component
: creates a simple component with structural comments
-
-
sandbox(string)
- sandbox name which will be automatically imported (argv-index: 2) -
forms(boolean)
- Adds FormBuilder import and constructor definition -
renderer(boolean)
- Adds Renderer2 import and constructor definition -
router(boolean)
- Adds Router import and constructor definition -
destroyable(boolean)
- Adds destroyed subject for simpler unsubscribing from observable -
template(string)
- inline template string -
project(string)
- The name of the project
Neo-Service
Creates a Neo service
Usage
ng g ns core/api/user api
Flags
-
name(string)
- path/name of the service (argv-index: 0) -
type
- type of the created service (argv-index: 1)-
""
: creates name.service in folder name -
api
: creates name-api.service in folder name -
sandbox
: creates name-sandbox.service and adds name-util.service to its imports -
util
: creates name-util.service in folder util/name
-
-
project(string)
- The name of the project
Neo-Fontawesome
Adds Fontawesome
Usage
ng g nf --token=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx --brands
npm run add-fontawesome
Flags
-
token(string)
- Fontawesome Pro token for .npmrc generation -
solid(boolean)
- Adds solid icons to 'add-fontawesome' script (default: true) -
regular(boolean)
- Adds regular icons to 'add-fontawesome' script (default: true) -
brands(boolean)
- Adds brands icons to 'add-fontawesome' script (default: false) -
light(boolean)
- Adds light icons to 'add-fontawesome' script (default: true) -
duotone(boolean)
- Adds duotone icons to 'add-fontawesome' script (default: true) -
skipImport(boolean)
- Skips module import to shared.module (default: false)
Neo-Stylelint
Adds Stylelint
Recommendation
add stylelint vscode extension for stylelint highlighting
Usage
ng g nslint
npm run add-stylelint
# launching stylelint once
npm run stylelint-scss
Neo-CI
Adds GitLab CI configuration template with nginx config and dockerfile
Usage
ng g nsci