Create dart package for AngularDart

Question

Using: dart 2.0.0

How do you create components for AngularDart?

I have with no luck, looked at https://github.com/dart-lang/angular_components

I have done the following steps:

stagehand package-simple
added export to dart file with library <packageName>;
referenced the package in pubspec.yaml

You must have a dependency on build_runner in pubspec.yaml. dev_dependencies: build_runner: >=0.8.10 <2.0.0 You must have a dependency on build_web_compilers in pubspec.yaml. dev_dependencies: build_web_compilers: >=0.3.6 <0.5.0

Please check the following imports: `import 'package:<...>template.dart''

I have tried to build the package with:

 webdev build
webdev could not run for this project.
You must have a dependency on `build_runner` in `pubspec.yaml`.
# pubspec.yaml
dev_dependencies:
  build_runner: >=0.8.10 <2.0.0
You must have a dependency on `build_web_compilers` in `pubspec.yaml`.
# pubspec.yaml
dev_dependencies:
  build_web_compilers: >=0.3.6 <0.5.0

Note: Using just a simple class, it works - but not with web components:

This works:

class Awesome {
  bool get isAwesome => true;
}

This do not:

import 'package:angular/angular.dart';

@Component(
  selector: 'my-card',
  templateUrl: 'my_card.html',
  styleUrls: ['my_card.css'],
  directives: [coreDirectives],
  // pipes: [commonPipes],
)
class MyCard {
  var cardstring = 'My Card - string';
}

When using it in anyway:

<my-card></my-card>

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2018-10-26T16:23:16

Create a Dart project with pubspec.yaml (name, SDK constraints, Angular dependency).
Create a component file in lib/my_component.dart and lib/my_component.html. That's it.
Alternatively you can put the component in lib/src/my_component.* with a file like lib/my_components.dart

export 'src/my_component.dart';

In you application project where you want to use the component package, add a dependency to your component package.

dependencies:
  angular: ^5.0.0
  my_components: ^0.1.0 # requires the package to be published to pub.dartlang.ort
  # alternatively (without publishing
  my_components:
    path: ../my_components
  # or if checked in to GitHub
  my_components:
    git: git://github.com/myaccount/my_components.git

See also https://www.dartlang.org/tools/pub/dependencies

Then you use the component by importing it

import 'package:my_components/my_components.dart';

@Component(
  selector: ....
  directives: [MyComponent],
  ...
)
class AppComponent {}

and add it to AppComponent (or any other components) HTML as

<my-component></my-component>

Create dart package for AngularDart

1 Answers