The selector "my-app" did not match any elements
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.
Solution 1:
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>
Solution 2:
Angular 4: I had to change <app-root></app-root> with <my-app></my-app> in the index.html file
Solution 3:
Things to do:
- Go to app.module.ts (to main modules, in most cases this is a name)
-
Check if you have part "boostrap:" - if no add:
bootstrap: [AppComponent]// where AppComponent is your main component Check if it works now, if not - go to AppComponent and check your selector. It should be same as tags in body in index.html
so index.html should contain something like this:
<body>
<app-root>Loading...</app-root>
</body>
where instead of <app-root> you should use selector from main AppComponent
- If you are using your angular app in external website then you should consider using defer in headers for angular files
Solution 4:
I got same issue when I use Angular Universal. But it is because I am using BrowserModule in main.node.ts, the solution is
imports: [
UniversalModule,
BrowserModule // <- delete this will solve the issue
],
And check here for more info: https://github.com/angular/universal/issues/542