The selector "my-app" did not match any elements
AngularAngular Problem Overview
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.
Angular Solutions
Solution 1 - Angular
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
Angular 4: I had to change <app-root></app-root> with <my-app></my-app> in the index.html file
Solution 3 - Angular
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 - Angular
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
Solution 5 - Angular
Non of the above answers resolved my issue .This is how solve the same kind of error. You shouldn't have more than one component as Bootstarp component .So, Bootstrap array should have only one component .By mistake I put 4 components in bootstrap array.I removed those 4 components from there and put in entryComponents array(as shown in the code below).This helped me.
@NgModule({
declarations: [
AppComponent,
SanackBarBodyComponent,
SuccessNavBarComponent,
AlertNavBarComponent,
NormalNavBarComponent
],
entryComponents:[
SanackBarBodyComponent,
SuccessNavBarComponent,
AlertNavBarComponent,
NormalNavBarComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent
]
})
export class AppModule { }
Solution 6 - Angular
If you are using the angular2 / asp.net core template from here: http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/ you might find replacing the last few lines of boot-client.ts with the following helps (and avoids a lot of scary looking console errors when HMR reloads your page):
const bootApplication = () => { platform.bootstrapModule(AppModule); };
if (document.readyState === 'complete') {
window.onload = () => bootApplication();
location.reload();
} else {
document.addEventListener('DOMContentLoaded', bootApplication);
}
Solution 7 - Angular
I was updating an Angular 5.2 app to Angular 6.1 and run into similar issue. In this case the problem was that index.html file did not have <body> at all. It was instead included in the my-app component.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<my-app></my-app>
</html>
This used to work with Angular 5.2 (and earlier versions too) because in the generated index.html the script tags were placed at the end. After upgrade to 6.1 the script tags were instead placed in the beginning of the file (and I assume therefore executed before the <my-app></my-app> root element is actually present.
Solution was to move <body> into index.html. (It was originally placed in to the component because someone wanted to apply conditional classes to body element with ngClass.)
Solution 8 - Angular
This happened to me when I changed the bootstrap component from AppComponent to a new component. When you change it you need to change it in the main index.html as well. index.html should contain the bootstrap component.
For example, if you change the app-component to app-login in app.module.ts in the bootstrap section then you should update your index.html like this
<body>
<app-login></app-login>
</body>
Solution 9 - Angular
When i create new component need to follow below steps to resolve the below issues.
Step-1- Create new comonent with ng g c lakshya.
Step-2- Under app lakshya folfer created with 4 files.
Step-3- Index.html need <app-root></app-root> to <app-lakshya></app-lakshya>
Step 4- app.Module.ts file change bootstrap: [AppComponent] to bootstrap: [LakshyaComponent]
so above error resolve.
Solution 10 - Angular
Maybe you could use the
> defer
Tag in your headers js-files.
Solution 11 - Angular
Django+Angular
I had a custom index.html, not the one generated by angular CLI.
I had this error because I placed the generated script files in the <head> section instead of at the end of the closing </body> tag (after the <app-root></app-root> tags)
Solution 12 - Angular
In your app.module.ts, if you have my-app in the bootstrap, comment or delete it.
bootstrap: [ AppComponent, // my-app ]
Solution 13 - Angular
In my case, there is something wrong in index.html where the '
After fix it, everything runs as normal.
Solution 14 - Angular
sure you use app-routing module and must change the selector: 'my-app' to 'app-root' (file: app.component.ts)