选择器"my-app"可被选择.与任何元素都不匹配 [英] The selector "my-app" did not match any elements

查看:65
本文介绍了选择器"my-app"可被选择.与任何元素都不匹配的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问题是当我运行我的应用程序时,它运行正常.但是,当我刷新它时,大多数时候我都低于味精.

选择器"my-app"与任何元素都不匹配

但是奇怪的是,当我刷新我的应用程序多次时,它也可以正常工作.

因此,最终我的应用程序出现异常行为,无法弄清这一点.
有时有时无法正常工作

任何建议,都无法提出代码?

注意:我还没有复杂的结构或组件,但是实现简单.

解决方案

这发生在我身上,因为我正在将代码导入到head标记中,因此该代码可能正在运行并尝试在DOM准备就绪之前进行引导./p>

您可以将脚本移到body标记的底部,也可以将引导程序代码放入事件侦听器中:

document.addEventListener("DOMContentLoaded", function(event) {
  bootstrap(AppComponent);
});

或:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example app</title>
  </head>
  <body>
    <my-app></my-app>
  </body>
  <script src="main.js" charset="utf-8"></script>
</html>

The problem is when I run my app, it works fine. But when I refresh it, most of the time I get below msg.

The selector "my-app" did not match any elements

But the strange thing is that many times when I refresh my app it works also.

So ultimately I have a strange behavior of my app and unable to figure this out.
Sometimes it works sometimes doesn't...

Any suggestion, can't come up with code???

Note : I don't have complex structure or components yet but simple implementation.

解决方案

This happened to me because I was importing my code in the head tag, so it was potentially running and attempting to bootstrap before the DOM was ready.

You can either move the script to the bottom of the body tag, or put the bootstrap code within an event listener:

document.addEventListener("DOMContentLoaded", function(event) {
  bootstrap(AppComponent);
});

or:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example app</title>
  </head>
  <body>
    <my-app></my-app>
  </body>
  <script src="main.js" charset="utf-8"></script>
</html>

这篇关于选择器"my-app"可被选择.与任何元素都不匹配的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆