Best IT Recipes

The "my-app" selector did not match elements

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

The "my-app" selector did not match elements

But it is strange that many times when I update my application, it also works.

So, ultimately, I have strange behavior in my application and I cannot figure it out.
Sometimes it works, sometimes it doesn't ...

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

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

+77
angular
Feb 26 '16 at 5:25
source share
9 answers

This happened to me because I imported my code into the head tag, so it potentially ran and tried to boot before the DOM was ready.

You can either move the script to the end of the body tag, or put the bootstrap code in 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>
+95
Feb 28 '16 at 15:23
source share

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

+57
Jul 14 '17 at 20:03
source share

Things to do:

  • Go to app.module.ts (to the main modules, in most cases this is the name)

  • Check if you have a boostrap : part - if not 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 the same as the tags in the body in index.html

therefore index.html should contain something like this:

 <body> <app-root>Loading...</app-root> </body>

where instead of <app-root> you should use a selector from the main AppComponent

  1. If you are using your angular app on an external website, you should consider using defer in the headers for angular files.
+22
10 Oct. '17 at 9:35 on
source share

I have the same problem when I use Angular Universal. But this is because I use BrowserModule in main.node.ts , solution

  imports: [ UniversalModule, BrowserModule // <- delete this will solve the issue ],

And check here for more info: https://github.com/angular/universal/issues/542

+6
Sep 19 '16 at 2:49 on
source share

If you use the main angular2 / asp.net template: http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/ , you can find a replacement for the last few lines of boot-client.ts with the following tips (and avoids a lot of terrible console errors when the HMR reloads your page):

 const bootApplication = () => { platform.bootstrapModule(AppModule); }; if (document.readyState === 'complete') { window.onload = () => bootApplication(); location.reload(); } else { document.addEventListener('DOMContentLoaded', bootApplication); }
+5
Mar 08 '17 at 15:00
source share

I updated the Angular 5.2 application for Angular 6.1 and came across a similar problem. In this case, the problem was that the index.html file did not have a <body> . Instead, it was 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 was used to work with Angular 5.2 (and earlier versions) because in the generated index.html script tags were put at the end. After upgrading to 6.1, script tags were instead placed at the beginning of the file (and therefore I assume that it runs before the root element <my-app></my-app> is actually present.

The solution was to move the <body> to index.html. (It was originally placed in the component because someone wanted to apply conditional classes to the body element with ngClass .)

+3
Aug 15 '18 at 8:59
source share

None of the above answers solved my problem. Here's how to solve the same error. You should not have more than one component as a component of Bootstarp. So, in the Bootstrap array there should be only one component. By mistake, I put 4 components in the bootstrap array. I removed these 4 components and put them in an entryComponents array (as shown in the code below). It helped me.

 @NgModule({ declarations: [ AppComponent, SanackBarBodyComponent, SuccessNavBarComponent, AlertNavBarComponent, NormalNavBarComponent ], entryComponents:[ SanackBarBodyComponent, SuccessNavBarComponent, AlertNavBarComponent, NormalNavBarComponent ], imports: [ BrowserModule, BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent ] }) export class AppModule { }
+3
May 27 '19 at 9:44
source share

Perhaps you could use

put off

Tag in your js header files.

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

+2
Feb 03 '17 at 11:12
source share

Django + Corner

I had my own index.html file, not the one that was generated by the angular CLI.

I had this error because I put the generated script files in the <head> section and not at the end of the closing </body> (after the <app-root></app-root> tags)

0
Sep 04 '19 at 9:44
source share


More articles:


All Articles