发表新帖
发表新帖

The selector “my-app” did not match any elements

前端 未结
关注
12 1070
逝去的感伤
逝去的感伤 2020-12-07 18:15

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 e

相关标签:
12条回答
  • 轻奢々
    2020-12-07 18:58

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

    0 讨论(0)
  • 醉酒成梦
    2020-12-07 18:59

    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

    0 讨论(0)
  • 萌比男神i
    2020-12-07 19:00

    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>
    0 讨论(0)
  • 青春惊慌失措
    2020-12-07 19:00

    Things to do:

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

    2. Check if you have part "boostrap:" - if no add:

      bootstrap: [AppComponent] // where AppComponent is your main component

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

    1. If you are using your angular app in external website then you should consider using defer in headers for angular files
    0 讨论(0)
  • 故里飘歌
    2020-12-07 19:02

    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 { }
    0 讨论(0)
  • 北荒
    2020-12-07 19:03

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

    0 讨论(0)
 看不清?
提交回复
热议问题