为 AngularDart 创建 dart 包答案

【问题标题】：Create dart package for AngularDart为 AngularDart 创建 dart 包
【发布时间】：2019-03-31 10:11:57
【问题描述】：

使用：飞镖 2.0.0

如何为 AngularDart 创建组件？

我运气不好，看了https://github.com/dart-lang/angular_components

我做了以下步骤：

stagehand package-simple
将export 添加到带有library <packageName>; 的飞镖文件中
引用了pubspec.yaml中的包

您必须在 pubspec.yaml 中依赖于 build_runner。 dev_dependencies： build_runner: >=0.8.10 pubspec.yaml 中的 build_web_compilers。 dev_dependencies： build_web_compilers: >=0.3.6

请检查以下导入： `import 'package:<...>template.dart''

我尝试使用以下方式构建包：

 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

注意：仅使用一个简单的类，它就可以工作 - 但不适用于 Web 组件：

这行得通：

class Awesome {
  bool get isAwesome => true;
}

这不：

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';
}

无论如何使用它时：

<my-card></my-card>

【问题讨论】：

标签： angular-dart

【解决方案1】：

使用 pubspec.yaml（名称、SDK 约束、Angular 依赖项）创建一个 Dart 项目。
在lib/my_component.dart 和lib/my_component.html 中创建一个组件文件。就是这样。
或者，您可以将组件放在lib/src/my_component.* 中，并使用lib/my_components.dart 之类的文件

export 'src/my_component.dart';

在您要使用组件包的应用程序项目中，为您的组件包添加依赖项。

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

另见https://www.dartlang.org/tools/pub/dependencies

然后你通过导入组件来使用它

import 'package:my_components/my_components.dart';

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

并将其添加到 AppComponent（或任何其他组件）HTML 中

<my-component></my-component>

【讨论】：