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>
Angular 4: I had to change <app-root></app-root> with <my-app></my-app> in the index.html file
Things to do:
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