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

85

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

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

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

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

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

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

angular микроники
источник
опубликуйте полное сообщение об ошибке либо часть кода, либо my-appкомпонент.
Пардип Джайн
В IE11 Potentially unhandled rejection [2] The selector "micropuppy-app" did not match any elementsи FF- 'ИСКЛЮЧЕНИЕ: селектор my-app не соответствует ни одному элементу BaseException @ cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/… ... .. ... ... .. и продолжаем »
micronyks
Я видел это пару раз - это проблема IE, в частности, как он загружает скрипты, если я правильно помню. Боюсь, я не знаю, как исправить это, было давно, но, надеюсь, это может указать вам правильное направление.
Sasxa
Sasxa, я тоже сталкиваюсь с этой проблемой в FF. Не знаю, в чем проблема. N чувствует себя беспомощным ...
micronyks

Ответы:

101

Это случилось со мной, потому что я импортировал свой код в 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>
Эд Хинчлифф
источник
В main.jsдокументации по машинописному тексту нет включения сценария в демонстрационные примеры plunker. Хотя у меня есть ошибка.
Elfayer 04
5
Я не получал эту ошибку, пока не попытался связать свои скомпилированные файлы машинописного текста.
ps2goat
2
Я столкнулся с той же проблемой при использовании webpack для объединения модулей .... и как только я поместил скрипт после тега .. body .. он работает ...
рефакторинг
2
Вы также можете прикрепить его к событию window.onload:window.onload = function(){ platformBrowserDynamic().bootstrapModule(AppModule); }
kitimenpolku
3
О боже, я так долго бился головой о стену, пытаясь понять это, и это было так просто. Спасибо!
Патрик Грэм
69

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

Младен Раконжак
источник
2
Похоже, возникла проблема с angular-cliсозданием app-rootссылки в index.htmlфайле, в то время как ts-файл точки входа учебника Tour of Heroes ссылается на my-app. ИМО, эти двое должны использовать одно и то же соглашение об именах, так как команда Angular рекомендовала angular-cliкак лучший способ создания проекта.
Что
В некоторой степени похоже, на всякий случай, если кто-нибудь столкнется с этой проблемой с webpack-dev-server (WDS) - я создал свое приложение, когда селектор был <app-root>, и запустил приложение с помощью WDS. Затем я изменил селектор на <my-app> в моем компоненте и index.html. Именно тогда я начал получать ошибку выше. Проблема заключалась в том, что index.html в папке dist не обновлялся. Я остановил WDS, снова построил свое приложение, а затем запустил приложение. Все заработало отлично!
ramtech
26

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

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

  2. Проверьте, есть ли у вас часть " boostrap :" - если нет, добавьте:

    bootstrap: [AppComponent] // где AppComponent - ваш основной компонент

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

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

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

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

  1. Если вы используете приложение angular на внешнем веб-сайте, вам следует подумать об использовании defer в заголовках для файлов angular.
Пшемек Струцински
источник
4
<body>тег исправил это
Алекс Окрушко
Спасибо! Это решило мою проблему.
Мухаммад Айяз
6

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

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

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

Хунбо Мяо
источник
Это не так для последних версий Angular. В наши дни BrowserModule заменяет UniversalModule, но appId передается в качестве параметра, чтобы клиент и сервер могли обмениваться данными. Смотрите здесь: github.com/angular/universal/blob/…
Dessus
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);
}
Рави Десаи
источник
4

Я обновлял приложение 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.)

Йони Ноусъярви
источник
4

Ни один из приведенных выше ответов не решил мою проблему. Вот как решить такую ​​же ошибку. У вас не должно быть более одного компонента в качестве компонента 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 { }
ДИБЬЯ РАНДЖАН ТРИПАТИЯ
источник
2

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

отложить

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

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

Безумный Макс
источник
Этот ответ работает в большинстве случаев для этой ошибки. Это действительно должен быть ответ.
Чинмай,
2

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

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

<body>
  <app-login></app-login>
</body>
Кришнадас ПК
источник
1

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

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

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

Кришна
источник
0

Django + Angular

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

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

Лука Филип
источник
0

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

bootstrap: [AppComponent, // my-app]

Ллойд
источник