我有一个由其他组件引用的Polymer组件 . 就像是：
在 index.html
<link rel="import" href="lib/polymer/polymer.html">
<link rel="import" href="component-one.html">
...
<component-one></component-one>
在 component-one.html
<link rel="import" href="sub-component.html">
<dom-module id="component-one">
<template>
<sub-component></sub-component>
</template>
<script>Polymer({ is: 'component-one' });</script>
</dom-module>
在 component-two.html
<link rel="import" href="sub-component.html">
<dom-module id="component-two">
<template>
<sub-component></sub-component>
</template>
<script>Polymer({ is: 'component-two' });</script>
</dom-module>
在 sub-component.html
<dom-module id="sub-component">
<template>blah blah blah</template>
<script>Polymer({ is: 'sub-component' });</script>
</dom-module>
当我尝试在 index.html 中动态加载第二个组件时，会出现此问题：
function importHref(href) {
return new Promise((resolve, reject) => {
Polymer.Base.importHref(href, function (e) {
resolve(e.target);
}, reject, true);
});
}
...
await importHref('component-two.html');
// Now I can use <component-two>
这引发了一个异常：
Uncaught DOMException：无法在'Document'上执行'registerElement'：类型'sub-component'的注册失败 . 已注册具有该名称的类型 .
我认为这是由于 sub-component.html 被两个组件引用而发生，但两者也引用了大量的纸和铁元素，但没有一个引起这个错误 .
如何避免这种异常？
1 回答
问题是子组件路径中的拼写错误 .
在
component-one.html在
component-two.html这两个都成功地路由（在IIS / Kestrel中）并返回
sub-component.html，但是Polymer将它看作两个不同的URI，因此有两个不同的组件 .如果出现此错误，请仔细检查所有导入是否解析为相同的URI，而不仅仅是它们返回正确的内容 .