Селектор “my-app” не відповідає жодному елементу

Question 1

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

У селекторі "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 на зовнішньому веб-сайті, вам слід розглянути можливість використання відкладеного в заголовках для кутових файлів

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 . (Спочатку він був розміщений у компоненті, оскільки хтось хотів застосувати умовні класи до елемента body за допомогою ngClass.)

Question 8

Жодна з наведених вище відповідей не вирішила мою проблему. Таким чином, ми вирішили таку ж помилку. Ви не повинні мати більше одного компонента як компонент Bootstarp. Отже, масив Bootstrap повинен мати лише один компонент. Помилково я помістив 4 компоненти в масив bootstrap. Я вилучив ці 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

Це трапилося зі мною, коли я змінив компонент bootstrap AppComponentна новий. Коли ви змінюєте його, вам потрібно змінити його і в основному index.html. index.htmlповинен містити компонент bootstrap.

Наприклад, якщо ви зміните app-componentдо app-loginв app.module.tsу розділі початкового завантаження , то Вам слід оновити , index.htmlяк це

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

Question 11

Коли я створюю новий компонент, потрібно виконати наведені нижче дії, щоб вирішити наведені нижче проблеми.

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

так вище вирішення помилки.

Question 12

Джанго + Кутова

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

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

Question 13

У вашому app.module.ts, якщо у вас є my-app у завантажувальному стріппі, прокоментуйте або видаліть його.

bootstrap: [AppComponent, // my-app]