Javascript “聚合物错误”；具有该名称的类型已注册"；使用Polymer.Base.importHref

我有一个聚合物组分，它被其他组分引用。比如：

在

index.html中

<link rel="import" href="lib/polymer/polymer.html">
<link rel="import" href="component-one.html">

...

<component-one></component-one>

<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>

<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>

<dom-module id="sub-component">
    <template>blah blah blah</template>
    <script>Polymer({ is: 'sub-component' });</script>
</dom-module>

<link rel="import" href="../components//sub-component.html">

<link rel="import" href="../components/sub-component.html">

在组件2.html中

<link rel="import" href="lib/polymer/polymer.html">
<link rel="import" href="component-one.html">

...

<component-one></component-one>

<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>

<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>

<dom-module id="sub-component">
    <template>blah blah blah</template>
    <script>Polymer({ is: 'sub-component' });</script>
</dom-module>

<link rel="import" href="../components//sub-component.html">

<link rel="import" href="../components/sub-component.html">

当我尝试在

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>

函数importHref（href）{
返回新承诺（（解决、拒绝）=>{
Polymer.Base.importHref（href，function（e）{
决心（如目标）；
}，拒绝，真实）；
});
}
...
等待importHref（'component-two.html'）；
//现在我可以使用

这会引发一个异常：

未捕获的DomeException:未能对“文档”执行“registerElement”：类型“子组件”的注册失败。已注册具有该名称的类型

我认为这是由于两个组件引用了

sub-component.html

，但它们都引用了大量的纸元素和铁元素，没有一个会导致此错误

---

如何避免此异常？

问题在于子组件路径中的输入错误

在

component one.html中

<link rel="import" href="lib/polymer/polymer.html">
<link rel="import" href="component-one.html">

...

<component-one></component-one>

<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>

<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>

<dom-module id="sub-component">
    <template>blah blah blah</template>
    <script>Polymer({ is: 'sub-component' });</script>
</dom-module>

<link rel="import" href="../components//sub-component.html">

<link rel="import" href="../components/sub-component.html">

这两种方法都成功地路由（在IIS/Kestrel中）并返回

sub component.html

，但被Polymer视为两个不同的URI，因此是两个不同的组件

---

如果出现此错误，请仔细检查所有导入是否解析为相同的URI，而不仅仅是它们返回正确的内容

没问题。这个问题应该在代码中的其他地方。@Supersharp啊，是的，是的，我会添加一个答案，以防其他人碰到这个问题。