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

小开

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>

小开

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

小开

Maybe you could use the

defer

Tag in your headers js-files.

http://www.w3schools.com/TAgs/att_script_defer.asp

小开

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);
}

小开

Angular 4: I had to change <app-root></app-root> with <my-app></my-app> in the index.html file

小开

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

小开

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.)

小开

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 { }

小开

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)

小开

In your app.module.ts, if you have my-app in the bootstrap, comment or delete it.

bootstrap: [ AppComponent, // my-app ]

小开

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>

小开

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.

小开

In my case, there is something wrong in index.html where the ' located file(most of the case is the root folder).

After fix it, everything runs as normal.

小开

sure you use app-routing module and must change the selector: 'my-app' to 'app-root' (file: app.component.ts)