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

• WORK IN PROGRESS - USE WITH CAUTION
  • Usage
• Status
• Quick start
• Usage
• Schematics
  • Neo-Init
  • Neo-Styles
  • Neo-Base
  • Neo-Module
  • Neo-Component
  • Neo-Service
  • Neo-Fontawesome
  • Neo-Stylelint
  • Neo-CI
  • License

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

License

• MIT license