未注册的html怎么办,HTML导入:CustomTag未注册

我正在尝试创建一个自定义元素polymer-element,但我无法完成@CustomTag工作.我的dart文件(my_element.dart)看起来像这样:

@HtmlImport('my_element.html')

library projects.projectFolder.layout;

import 'package:polymer/polymer.dart';

import 'dart:html';

@CustomTag('my-element')

class MyElement extends PolymerElement {

@published String caption;

MyElement.created() : super.created();

}

我的html文件(my_element.html)看起来像这样:

{{ caption }}

问题是Chrome控制台继续打印以下错误:

No elements registered in a while, but still waiting on 1 elements to be registered. Check that you have a class with an @CustomTag annotation for each of the following tags: 'my-element'.

这很奇怪,因为我已经声明了自定义标签.看起来.dart它到达时没有读取文件.html.

该.html文件是从另一个父.html文件调用的.我认为调用文件的顺序可能是问题所在,但如果在运行之前编译Dart,那么它应该不关心.

我尝试了几种解决方案,但没有一种方法有效.唯一有效的是非常脏的,它my_element.dart直接从主my_app.dart文件导入文件.我想不应该那样做,因为这意味着要导入my_element.dart同一个main中的每个文件my_app.dart.

编辑(添加index.html,pubspec.yml)

我的index.html文件看起来像如下:

My app

import 'package:polymer/polymer.dart';

import 'package:project/my_app.dart';

main() => initPolymer();

my_app是另一个自定义元素,它是所有其他元素的主要元素.换句话说,它就像应用程序的主控制器.这个元素也有一个.dart和.html文件,它会调用其他元素my-element.

如您所见,我的main()功能非常简单,因为它只有init(参见参考资料index.html).

我pubspec.yml看起来如下:

name: project

version: 0.0.1

description: Some project.

author: Tomas

homepage: https://github.com/*******

environment:

sdk: '>=1.10.0 <2.0.0'

dependencies:

polymer: '^0.16.0'

core_elements: '^0.7.1'

paper_elements: '^0.7.1'

route_hierarchical: "^0.6.1"

transformers:

- polymer:

entry_points: web/index.html

- $dart2js:

$include: "**/*.polymer.bootstrap.dart"

我的目录看起来像这样(我只展示它的一小部分,我希望这是重要的一个):

.

??? README.md

??? build

?   ??? web

?   ??? index.html

?   ??? index.html.polymer.bootstrap.dart.js

?   ??? packages

??? lib

?   ??? my_app.dart

?   ??? src

?   ??? elements

?   ??? layout

?   ?   ??? my_element.css

?   ?   ??? my_element.dart

?   ?   ??? my_element.html

?   ??? my_app.css

?   ??? my_app.html

?   ??? modules

?   ??? module.dart

?   ??? my_app.css

??? pubspec.lock

??? pubspec.yaml

??? web

? ??? index.html

? ??? packages -> ../packages

?   ??? my_app.html

?   ??? modules

?   ??? module.dart

我希望这个编辑不要混淆超过它应该.我只是想知道哪个是正确的文件夹结构和导入Dart应用程序的形式.

简而言之:在使用dart编写大型应用程序时,树应该如何？我应该在哪里进行导入？我已经查看了所有可能的文档,包括一些教程,但是所有这些文档都讨论了非常简单的示例,其中代码的大部分位于web文件夹中,这是我不想要的.

编辑(总结和改写,添加my_app.html和my_app.dart)

用更少的话说:

我有一个自定义元素my_element.html和my_element.dart(在上面的答案中定义),我想my_app只使用html 将它导入另一个元素.即不通过导入my_element.dart中my_app.dart,但只导入my_element.html使用的链接标签my_app.html:

my_app.dart:

@HtmlImport('src/my_app.html')

import 'package:polymer/polymer.dart';

import 'package:core_elements/core_scaffold.dart';

@CustomTag('my-app')

class MyApp extends PolymerElement {

MyApp.created() : super.created();

}

是不是足以告诉编译器加载该dart文件以通过遵循html import定义的传递依赖来注册元素标记？