多个组件匹配带有标记名 app-lobby 的节点

Question

该代码在 angular 8.3.4 版本上运行良好，但是当我将其更新到最新版本的 angular ( 9 ) 时，出现以下错误

以下是堆栈跟踪

core.js:3866 ERROR Error: Uncaught (in promise): Error: Multiple components match node with tagname app-lobby
Error: Multiple components match node with tagname app-lobby
at throwMultipleComponentError (core.js:5511)
at findDirectiveDefMatches (core.js:8276)
at resolveDirectives (core.js:8080)
at elementStartFirstCreatePass (core.js:14215)
at ??elementStart (core.js:14249)
at Module.??element (core.js:14324)
at MainComponent_Template (main.component.html:1)
at executeTemplate (core.js:7562)
at renderView (core.js:7387)
at renderComponent (core.js:8577)
at resolvePromise (zone.js:836)
at resolvePromise (zone.js:795)
at zone.js:897
at ZoneDelegate.invokeTask (zone.js:431)
at Object.onInvokeTask (core.js:27769)
at ZoneDelegate.invokeTask (zone.js:430)
at Zone.runTask (zone.js:198)
at drainMicroTaskQueue (zone.js:611)
at ZoneTask.invokeTask (zone.js:517)
at ZoneTask.invoke (zone.js:502)

Answer 1

我有完全相同的错误，Error: Multiple components match node with tagname <my-tagname>并且我检查了太久，这个标签实际上是唯一的。在第二次阅读这个问题和所有答案后，我找到了 @Eugen 对原始问题的评论，这最终对我有帮助。所以我在这里添加一个小例子，以防将来每个人都遇到这个问题。Angular 的错误消息在这里并没有真正的帮助。

我的错误是我将一个服务注入到我的组件中并直接在构造函数中使用它，如下所示：

constructor(private myService: MyService) {
    this.myService.doSomething()
}

这不起作用，因为它在 Angular 的依赖注入和我想要在构造函数中使用该服务之间引入了竞争条件。在构造函数内部，服务尚未实例化。

你想要做的是在调用构造函数后使用该服务，即在 Angular 的 OnInit-hook 中：

export class MyComponent implements OnInit {

    constructor(private myService: MyService) {}

    ngOnInit(): void {
        this.myService.doSomething();
    }

    // Rest of the component
}

Answer 2

可能您有多个具有相同选择器标记名称的组件app-lobby

...
@Component({
   selector: 'app-lobby',
...

请仔细检查以确保只有一个组件选择器标签名称是app-lobby.

Answer 3

上述有关声明的两个答案DatePipe中providers应予以考虑。今天，当private datePipe: DatePipe我在组件的构造函数中添加一个参数而不DatePipe在模块的provider. 添加DatePipe后providers，我没有更多的问题。

构造函数：

constructor(private authenticationService: AuthenticationService, private datePipe: DatePipe) {}

Answer 4

这个错误实际上与 tagname 关系不大app-lobby。当我在 html 标签上应用多组件选择器时遇到了这个错误。

例如：组件 1

@Component({
    ...
    selector: '[my-tooltip]',
    ...
})

组件 2

@Component({
    ...
    selector: '[my-button]',
    ...
})

请注意，它们都是角度组件，但具有类似属性指令的选择器。

当您将它们都应用到同一个标签上时，如下所示：

<button my-button my-tooltip="Some tooltip">Hover me</button>

然后 angular 抱怨在单个标签上应用 2 个组件。在这种情况下，它会抱怨按钮标签，例如： Error: Multiple components match node with tagname button

解决方案不是在单个元素上使用多个组件选择器。

Answer 5

我有一个 Angular 9 中的应用程序。我遇到了类似的问题，但后来我意识到我忘记了 DatePipe 的提供程序。之后，这个错误就消失了……也许在 Angular 9 开发一段时间后，这样的错误就不会发生了。