Селектор my-app не соответствует ни одному элементу

Question 1

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

Селектор my-app не соответствует ни одному элементу

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

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

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

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

Question 2

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

Вы можете переместить сценарий в конец 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>

Question 3

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

Question 4

Дела, которые необходимо сделать:

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

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

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

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

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

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

Question 5

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

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

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

Question 6

Если вы используете основной шаблон 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);
}

Question 7

Я обновлял приложение 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="https://stackoverflow.com/">
  <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 . (Первоначально он был помещен в компонент, потому что кто-то хотел применить условные классы к элементу тела с помощью ngClass.)

Question 8

Ни один из приведенных выше ответов не решил мою проблему. Вот как решить такую же ошибку. У вас не должно быть более одного компонента в качестве компонента 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 { }

Question 9

Может быть, вы могли бы использовать

отложить

Пометьте в заголовках js-файлы.

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

Question 10

Это случилось со мной, когда я изменил компонент начальной загрузки с AppComponentна новый компонент. Когда вы его меняете, вам нужно изменить его и в основном index.html. index.htmlдолжен содержать компонент начальной загрузки.

Например, если вы измените app-componentк app-loginв app.module.tsв разделе начальной загрузки , то Вам следует обновить , index.htmlкак это

<body>
  <app-login></app-login>
</body>

Question 11

Когда я создаю новый компонент, необходимо выполнить следующие шаги, чтобы решить указанные ниже проблемы.

Шаг 1 - Создайте новый компонент с помощью ng g c lakshya. Шаг-2 - Под приложением создается фолфер из 4 файлов. Шаг-3- Index.html необходимость <app-root></app-root>в <app-lakshya></app-lakshya> стадии начальной загрузки 4- app.Module.ts изменения файла: [AppComponent] для начальной загрузки: [LakshyaComponent]

так что устраните ошибку выше.

Question 12

Django + Angular

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

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

Question 13

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

bootstrap: [AppComponent, // my-app]