Селектор "my-app" не соответствовал элементам

Проблема заключается в том, когда я запускаю свое приложение, он отлично работает. Но когда я его обновляю, большую часть времени я становлюсь ниже msg.

Селектор "my-app" не соответствовал элементам

Но странно, что много раз, когда я обновляю свое приложение, он также работает.

Итак, в конечном счете, у меня странное поведение моего приложения и я не могу понять это.
Иногда это работает иногда не...

Любое предложение, не может придумать код???

Примечание. У меня еще нет сложной структуры или компонентов, но простая реализация.

Ответы

Ответ 1

Это произошло со мной, потому что я импортировал свой код в тег head, поэтому он потенциально запускался и пытался загрузиться до того, как DOM был готов.

Вы можете либо переместить script в конец тега body, либо поместить код начальной загрузки в прослушиватель событий:

document.addEventListener("DOMContentLoaded", function(event) {
  bootstrap(AppComponent);
});

или

<!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>

Ответ 2

Angular 4: мне пришлось изменить <app-root></app-root> на <my-app></my-app> в файле index.html

Ответ 3

Чем заняться:

  • Перейдите в app.module.ts (к основным модулям, в большинстве случаев это имя)

  • Проверьте, есть ли у вас часть " boostrap:" - если нет add:

    bootstrap: [AppComponent]//где AppComponent является вашим основным компонентом

  • Проверьте, работает ли он сейчас, если нет - перейдите в AppComponent и проверьте свой селектор. Он должен быть таким же, как теги в теле в index.html

поэтому index.html должен содержать что-то вроде этого:

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

где вместо <app-root> вы должны использовать селектор из основного AppComponent

  1. Если вы используете свое приложение angular на внешнем веб-сайте, вам следует рассмотреть возможность использования defer в заголовках для angular файлов

Ответ 4

У меня такая же проблема, когда я использую Angular Universal. Но это потому, что я использую BrowserModule в main.node.ts, решение

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

И проверьте здесь дополнительную информацию: https://github.com/angular/universal/issues/542

Ответ 5

Если вы используете основной шаблон angular2/asp.net: http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/, вы можете найти замену последних нескольких строк boot-client.ts со следующими подсказками (и избегает много ужасных консольных ошибок, когда HMR перезагружает вашу страницу):

const bootApplication = () => { platform.bootstrapModule(AppModule); };
if (document.readyState === 'complete') {
    window.onload = () => bootApplication();
    location.reload();
} else {
    document.addEventListener('DOMContentLoaded', bootApplication);
}

Ответ 6

Я обновлял приложение Angular 5.2 для Angular 6.1 и сталкивался с подобной проблемой. В этом случае проблема заключалась в том, что файл index.html вообще не имел <body>. Вместо этого он был включен в компонент my-app.

<!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>

Это использовалось для работы с Angular 5.2 (и более ранними версиями), потому что в сгенерированном index.html теги скриптов были помещены в конец. После обновления до 6.1 теги сценариев вместо этого помещались в начало файла (и поэтому я предполагаю, что он выполняется до того, как на самом деле присутствует корневой элемент <my-app></my-app>.

Решение заключалось в перемещении <body> в index.html. (Он был первоначально помещен в компонент, потому что кто-то хотел применить условные классы к элементу body с ngClass.)

Ответ 7

Ни один из вышеперечисленных ответов не решил мою проблему. Вот как решить такую же ошибку. У вас не должно быть более одного компонента в качестве компонента Bootstarp. Так, в массиве Bootstrap должен быть только один компонент. По ошибке я поместил 4 компонента в массив начальной загрузки. Я удалил эти 4 компонента и поместил их в массив entryComponents (как показано в код ниже). Это помогло мне.

@NgModule({
 declarations: [
AppComponent,
SanackBarBodyComponent,
SuccessNavBarComponent,
AlertNavBarComponent,
NormalNavBarComponent
],
entryComponents:[ 
SanackBarBodyComponent,
SuccessNavBarComponent,
AlertNavBarComponent,
NormalNavBarComponent
],

imports: [
BrowserModule,
BrowserAnimationsModule
],
 providers: [],
 bootstrap: [AppComponent
]
})
export class AppModule { }

Ответ 9

Джанго + Угловая

У меня был собственный файл index.html, а не тот, который был сгенерирован угловым CLI.

У меня была эта ошибка, потому что я поместил сгенерированные файлы сценариев в раздел <head>, а не в конец закрывающего тега </body> (после тегов <app-root></app-root>)

Ответ 10

В вашем app.module.ts, если у вас есть my-app в начальной загрузке, прокомментируйте или удалите его.

начальная загрузка: [   AppComponent,   // мое приложение ]