自定义 Angular Dart 组件包

Question

我创建了一个 angular dart 组件，我想在我的主项目中使用它。我正在使用路径包来引用它。正在调用组件的构造函数（在 dart 文件中），但出现无法找到 .css 和 .html 文件的错误。它寻找它们的路径似乎存在，所以我不确定为什么找不到它们。

我在整个代码中使用了其他自定义组件，但是没有 html 或 css 文件与它们相关联，它们很好，似乎仅限于 html 和 css 个文件。

这是我的代码片段

test.dart 位于 test_component/lib/test_component/

library TestCom;

import 'package:angular/angular.dart';

@Component(
    selector: 'tester',
    templateUrl: 'test.html',
    cssUrl: 'test.css')
class TestComponent {
 String t = "this is the test component";

 TestComponent() {
    print("Test Component STARTED");
  }
}

test.html 位于 test_component/lib/test_component/

<h3>{{t}}</h3>

pubspec.yaml 位于 test_component

name: TestModule
dependencies:
  angular: "^1.1.2+2"
  browser: any
transformers:
- angular:
    html_files:
      - lib/test_component/test.html

main.dart 位于 main/src/main/dart/web

import 'package:TestModule/test_component/test.dart';

class MyAppModule extends Module {
  MyAppModule() {
    bind(TestComponent);
  }
}

index.html 位于 main/src/main/dart/web/

<tester></tester>

pubspec.yaml 位于 main/src/main/dart

name: main_package
dependencies:
  angular: "^1.1.2+2"
  browser: any
  shadow_dom: any
  json_object: any   
  bootjack: any
  crypto: any
  xml: "^2.3.2"
  TestModule:
    path: ../../../../test_component
transformers:
- angular:

在我运行 pub get 之后，在我的主项目的 packages 文件夹中，TestModule/test_component/ 与 test.css、test.dart 和 test.html 一起存在在里面。我不确定为什么当我运行它时，它找不到 .html 和 .css 文件。

这是我运行它

时控制台中显示的内容

Observatory listening at http://127.0.0.1:54254/
Test Component STARTED
index.html:1 GET http://127.0.0.1:3030/packages/TestModule/test_component/test.css 404 (Not Found)
index.html:1 GET http://127.0.0.1:3030/packages/TestModule/test_component/test.html 404 (Not Found)
2 HTTP 404: <html><head><title>404 Not Found</title></head><body>File not found</body></html>

STACKTRACE:
null

Answer 1

试试这个

 name: TestModule
    dependencies:
      angular: "^1.1.2+2"
      browser: any
    transformers:
    - angular:
        html_files:
          - packages/TestModule/test_component/test.html

但是对于 css 文件，我认为你只需要将它们放在与组件的 Dart 文件相同的文件夹中即可。

自定义 Angular Dart 组件包

Custom Angular Dart Component Package

dart

dart-pub

dart-html

angular-dart