Nemo's Parental Misguidance

    @neox/schematics

    12.0.29 • Public • Published

    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

    npm npm

    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

    NPM

    Install

    npm i @neox/schematics

    DownloadsWeekly Downloads

    88

    Version

    12.0.29

    License

    MIT

    Unpacked Size

    107 kB

    Total Files

    121

    Last publish

    Collaborators

    • neox