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)

Related Packages #

This CLI generates projects using the following AngularDart packages:

• angulardart - Core framework
• angulardart_forms - Forms support
• angulardart_router - Routing
• angulardart_test - Testing utilities
• angulardart_components - Material Design components

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

Disclaimer #

AngularDart Reborn is a community-maintained fork of Google's original AngularDart framework. This project is not affiliated with, endorsed by, or sponsored by Google LLC. Angular and AngularDart are trademarks of Google LLC.

This is an independent, 100% community-driven project. For the original Angular Framework (TypeScript/JavaScript), visit angular.io.