AngularDart CLI

A command line interface for scaffolding AngularDart projects and components. Compatible with Dart 3 and the latest AngularDart packages.

Installation

dart pub global activate angulardart_cli

After installation, the ngdart command will be available globally.

Quick Start

Create a new AngularDart project in seconds:

ngdart new my_awesome_app
cd my_awesome_app
dart pub get
dart run build_runner serve

Then open your browser at http://localhost:8080 to see your app running!

Commands

ngdart new - Create a New Project

Creates a complete AngularDart project structure with all necessary files.

ngdart new <project_name> [options]

Options:

  • -p, --path <path>: Project directory path (default: current directory)
  • -r, --root-component <name>: Root component class name (default: AppComponent)

Example:

ngdart new todo_app -r TodoAppComponent

What's included:

my_project/
├── lib/
│   └── app_component.dart      # Root component
│   └── app_component.html      # Root component template
├── web/
│   ├── index.html              # Main HTML file
│   ├── main.dart               # Application entry point
│   └── styles.css              # Global styles
├── pubspec.yaml                # Package dependencies
├── build.yaml                  # Build configuration
└── analysis_options.yaml       # Linter rules

ngdart generate component - Generate a Component

Creates a new AngularDart component with Dart and HTML files.

ngdart generate component <ComponentName> [options]

Options:

  • -p, --path <path>: Output directory (default: lib)

Example:

ngdart generate component UserCard

Generated files:

  • lib/user_card.dart:
import 'package:angulardart/angulardart.dart';

@Component(
  selector: 'user-card',
  templateUrl: 'user_card.html',
)
class UserCard {
  var name = 'AngularDart';
}
  • lib/user_card.html:
<h1>Hello {{name}}</h1>

ngdart generate directive - Generate a Directive

Creates a new AngularDart directive.

ngdart generate directive <DirectiveName> [options]

Options:

  • -p, --path <path>: Output directory (default: lib)

Example:

ngdart generate directive Highlight

Generated file:

import 'package:angulardart/angulardart.dart';

@Directive(
  selector: '[highlight]',
)
class Highlight {
  final ElementRef _elementRef;

  Highlight(this._elementRef);
}

ngdart generate pipe - Generate a Pipe

Creates a new AngularDart pipe for transforming data in templates.

ngdart generate pipe <PipeName> [options]

Options:

  • -p, --path <path>: Output directory (default: lib)

Example:

ngdart generate pipe ReverseText

Generated file:

import 'package:angulardart/angulardart.dart';

@Pipe('ReverseText')
class ReverseText extends PipeTransform {
  @override
  dynamic transform(dynamic value, [List<dynamic>? args]) {
    return value;
  }
}

ngdart generate service - Generate a Service

Creates a new injectable AngularDart service.

ngdart generate service <ServiceName> [options]

Options:

  • -p, --path <path>: Output directory (default: lib)

Example:

ngdart generate service DataService

Generated file:

import 'package:angulardart/angulardart.dart';

@Injectable()
class DataService {
  DataService();
}

Naming Conventions

The CLI automatically converts names to appropriate formats:

  • Component/Directive/Pipe/Service names: PascalCase → snake_case for files
    • UserCard → user_card.dart
  • Selectors: PascalCase → kebab-case for HTML selectors
    • UserCard → user-card

Development Workflow

Running Your Application

# Development server with hot reload
dart run build_runner serve

# Production build
dart run build_runner build --release

Running Tests

dart run build_runner test

Requirements

  • Dart SDK: >= 3.0.0 < 4.0.0
  • Build tools: build_runner and build_web_compilers (automatically added to new projects)

This CLI generates projects using the following AngularDart packages:

Troubleshooting

Command not found after installation

Make sure Dart's global bin directory is in your PATH:

export PATH="$PATH":"$HOME/.pub-cache/bin"

Build errors

If you encounter build errors, try:

# Clean build artifacts
dart run build_runner clean

# Rebuild
dart run build_runner build --delete-conflicting-outputs

License

BSD 3-Clause License

Libraries

angulardart_cli