@proangular/pro-ject

View Github Repository

Generate a Google Angular 20+ project with best-practice defaults in less than a minute!

A lightweight Node CLI that guides `ng new` and scaffolds an Angular 20+ workspace with opinionated structure and best-practice defaults.

Index

• Description
• Quick Start
• Development & Contribution
  • Update and Test
  • Project Layout
• Wrapping Up

Description

Generate a Google Angular 20+ project with best-practice defaults in less than a minute!

@proangular/pro-ject is an interactive Node CLI that guides ng new and sets up a clean Angular 20+ workspace with opinionated defaults. It validates and sanitizes the project name, ensures Angular CLI is available, scaffolds the repo, confirms a working serve target, and then offers post-create add-ons you can toggle on with simple prompts. One command to start, clear prompts, safe naming rules, and a tidy step pipeline you can extend.

What it can set up for you

• wizard workflow with clear, minimal prompts
• TypeScript first
• Angular 20+ ready
• Best Practices baked in
• Runtime Type Checking with io-ts (optional)
• DateTime with luxon + Material Luxon adapter (optional)
• Angular CDK (optional)
• Angular Material (optional)
  • If selected, optionally install:
    • @proangular/pro-form — drop-in standalone inputs, unified labels/hints/errors, helpers like scroll-to-first-error and focus-on-invalid
    • @proangular/pro-table — typed columns, selection, copy on click, expandable rows, intent-based sorting, and more
    • @proangular/ngx-scroll-top — lightweight back-to-top button
    • @proangular/ngx-gist — Material + Highlight.js styled box for gists and local snippets
• Angular Animations wiring (optional)
• Opinionated src/app structure with README placeholders for: components, constants, decorators, directives, enums, guards, layout, models, pages, pipes, providers, routing, services, signals, styles, types, utilities (optional)
• Opinionated Code Formatting (Prettier) (optional)
• Code Checks (ESLint) (optional)
• Husky Git Hooks for pre-commit linting and formatting (optional)
• Ensures a working ng serve target and a writable project directory

[ Index ]

Quick Start

First, install Node.js v20+. Then, run the following command:

npx -y @proangular/pro-ject@latest

or

npm exec -y @proangular/pro-ject@latest

You can replace @latest with a specific version number if desired.

Follow the prompts to scaffold your new Angular project with best-practice defaults. Once complete, navigate to your new project directory and start the development server:

npm run start

Then open your browser to http://localhost:4200 to see your new Angular application in action!

[ Index ]

Development & Contribution

Prerequisites

1. Install Node.js.

2. Install dependencies:

   npm install

[ Index ]

Update and Test

1. Update source code in src.

2. Run npm run build to compile the TypeScript files in src to dist.

3. Run node dist/index.js to execute the compiled code.

4. Add your changes to git and create a pull request.

[ Index ]

Project Layout

.
├─ .github/                      # GitHub workflows, actions, and related automation files.
├─ .scripts/                     # Scripts run by node for various automation tasks.
├─ .vscode/                      # VS Code workspace settings for the project.
├─ dist/                         # Non-committed, compiled project files from source code in `src/`.
├─ node_modules/                 # Non-committed, installed dependencies needed to run & develop the project.
├─ src/                          # Source code of the project.
│  ├─ constants/                 # Project constants such as version mappings.
│  ├─ steps/                     # The wizard steps for project generation.
│  ├─ templates/                 # File templates used during project scaffolding.
│  ├─ utils/                     # Utility functions and types.
│  └─ index.ts                   # The main entry point of the project.
├─ .gitignore                    # Specifies files and directories to be ignored by Git.
├─ .prettierignore               # Specifies files and directories to be ignored by Prettier.
├─ LICENSE                       # The MIT license for this project.
├─ package-lock.json             # Auto-generated file that locks the versions of dependencies.
├─ package.json                  # Project metadata and dependencies.
├─ README.md                     # This file.
└─ tsconfig.json                 # TypeScript configuration file.

[ Index ]

Wrapping Up

Thank you to the entire Angular team and community for such a great framework to build upon. If you have any questions, please let me know by opening an issue here.

Type	Info
	webmaster@codytolene.com
	https://github.com/sponsors/CodyTolene
	https://www.buymeacoffee.com/codytolene
	bc1qfx3lvspkj0q077u3gnrnxqkqwyvcku2nml86wmudy7yf2u8edmqq0a5vnt

Fin. Happy programming friend!

Cody Tolene