O seletor “my-app” não correspondeu a nenhum elemento

86

O problema é que quando executo meu aplicativo, ele funciona bem. Mas quando eu o atualizo, na maioria das vezes fico abaixo de msg.

O seletor "my-app" não correspondeu a nenhum elemento

Mas o estranho é que muitas vezes, quando atualizo meu aplicativo, ele também funciona.

No final das contas, tenho um comportamento estranho do meu aplicativo e não consigo descobrir isso.
Às vezes funciona, às vezes não ...

Alguma sugestão, não consigo dar um código ???

Nota: Eu não tenho uma estrutura ou componentes complexos ainda, mas uma implementação simples.

angular

— micronyks
fonte

poste a mensagem de erro completa ou parte do código ou my-appcomponente.

— Pardeep Jain

No IE11 - Potentially unhandled rejection [2] The selector "micropuppy-app" did not match any elementse no FF- 'EXCEÇÃO: O seletor "my-app" não correspondeu a nenhum elemento BaseException @ cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/… ... .. ... ... .. e continuar '

— micronyks

Já vi isso algumas vezes - é um problema do IE, especificamente como ele carrega scripts, se bem me lembro. Infelizmente, não sei a solução para isso, foi há muito tempo, mas espero que possa apontar a direção certa.

— Sasxa

Sasxa, também estou enfrentando esse problema no FF. Eu não sei qual é o problema. N se sente desamparado ...

— micronyks

102

Isso aconteceu comigo porque eu estava importando meu código na headtag, então ele estava potencialmente em execução e tentando inicializar antes que o DOM estivesse pronto.

Você pode mover o script para o final da bodytag ou colocar o código de bootstrap em um ouvinte de evento:

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

ou:

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

— Ed Hinchliffe
fonte

Não há main.jsinclusão de script nas demos do plunker na documentação do texto digitado. Embora eu tenha o erro.

— Elfayer

5

Não recebi esse erro até tentar agrupar meus arquivos de texto datilografado compilados.

— ps2goat

2

Eu enfrentei o mesmo problema ao usar o webpack para empacotamento de módulo ... e uma vez que coloquei o script após .. body tag .. está funcionando ...

— refatorar

2

Você também pode anexá-lo ao evento window.onload:window.onload = function(){ platformBrowserDynamic().bootstrapModule(AppModule); }

— kitimenpolku

3

OMG eu estava batendo minha cabeça na parede por tanto tempo tentando descobrir isso e era tão simples. Obrigado!

— Patrick Graham

70

Angular 4: Eu tive que mudar <app-root></app-root>com <my-app></my-app>no arquivo index.html

— Mladen Rakonjac
fonte

2

Parece haver um problema com a angular-clicriação de uma app-rootreferência no index.htmlarquivo, enquanto o arquivo ts do ponto de entrada do tutorial do Tour of Heroes se refere em vez disso my-app. IMO os dois devem usar a mesma convenção de nomenclatura, já que a equipe do Angular tem recomendado angular-clicomo a melhor forma de criar um projeto.

— Peter David Carter

Algo semelhante, apenas no caso de alguém enfrentar esse problema com webpack-dev-server (WDS) - eu criei meu aplicativo quando o seletor era <app-root> e iniciei o aplicativo usando WDS. Então eu mudei o seletor para <my-app> em meu componente e index.html. Foi quando comecei a ficar acima do erro. O problema era que index.html na pasta 'dist' não foi atualizado. Parei o WDS, construí meu aplicativo novamente e abri o aplicativo. Tudo começou a funcionar bem!

— ramtech

26

Coisas para fazer:

Vá para app.module.ts (para os módulos principais, na maioria dos casos, é um nome)
Verifique se você tem a parte " boostrap :" - se não adicionar:

bootstrap: [AppComponent] // onde AppComponent é seu componente principal
Verifique se funciona agora, se não - vá para AppComponent e verifique seu seletor . Deve ser igual às tags do corpo em index.html

então index.html deve conter algo assim:

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

onde em vez de <app-root>você deve usar o seletor do AppComponent principal

Se estiver usando seu aplicativo angular em um site externo, você deve considerar o uso de adiar nos cabeçalhos para arquivos angular

— Przemek Struciński
fonte

4

<body>tag corrigiu

— Alex Okrushko,

Obrigado! Resolveu meu problema.

— Muhammad Ayyaz

6

Eu tenho o mesmo problema quando uso o Angular Universal. Mas é porque estou usando BrowserModuleem main.node.ts , a solução é

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

E verifique aqui para mais informações: https://github.com/angular/universal/issues/542

— Hongbo Miao
fonte

Isso não é verdade para as versões mais recentes do Angular. Atualmente, o BrowserModule substitui o UniversalModule, mas um appId é passado como um parâmetro para que o cliente e o servidor possam trocar. Veja aqui: github.com/angular/universal/blob/…

— Dessus

5

Se você estiver usando o modelo principal angular2 / asp.net a partir daqui: http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/ você pode encontrar a substituição das últimas linhas de boot-client.ts com o seguinte ajuda (e evita muitos erros de console de aparência assustadora quando o HMR recarrega sua página):

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

— Ravi Desai
fonte

4

Eu estava atualizando um aplicativo Angular 5.2 para Angular 6.1 e tive um problema semelhante. Nesse caso, o problema era que o arquivo index.html não tinha <body>. Em vez disso, foi incluído no my-appcomponente.

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

Isso costumava funcionar com o Angular 5.2 (e versões anteriores também) porque no index.html gerado as tags de script foram colocadas no final. Após a atualização para o 6.1, as tags de script foram colocadas no início do arquivo (e presumo, portanto, executadas antes que o <my-app></my-app>elemento raiz esteja realmente presente.

A solução foi mudar <body>para index.html . (Ele foi originalmente colocado no componente porque alguém queria aplicar classes condicionais ao elemento de corpo com ngClass.)

— Joni Nousjärvi
fonte

4

Nenhuma das respostas acima resolveu meu problema. É assim que resolvo o mesmo tipo de erro. Você não deve ter mais de um componente como componente Bootstarp. Então, a matriz Bootstrap deve ter apenas um componente. Por engano, coloquei 4 componentes na matriz bootstrap. Removai esses 4 componentes de lá e coloquei na matriz entryComponents (como mostrado no código abaixo). Isso me ajudou.

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

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

— DIBYA RANJAN TRIPATHY
fonte

2

Talvez você pudesse usar o

adiar

Marque em seus cabeçalhos js-files.

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

— Mad Max
fonte

Essa resposta funciona para a maioria dos casos para esse erro. Essa realmente deveria ser a resposta.

— Chinmay

2

Isso aconteceu comigo quando mudei o componente de bootstrap de AppComponentpara um novo componente. Quando você o altera, é necessário alterá-lo no principal index.htmltambém.index.htmldeve conter o componente bootstrap.

Por exemplo, se você alterar o app-componentque app-loginnos app.module.tsna seção de inicialização, então você deve atualizar o seu index.htmlcomo este

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

— PC Krishnadas
fonte

1

Django + Angular

Eu tinha um index.html personalizado, não o gerado pelo angular CLI.

Eu tive este erro porque coloquei os arquivos de script gerados na <head>seção em vez de no final da </body>tag de fechamento (após as <app-root></app-root>tags)

— Luca Filip
fonte

1

Quando eu crio um novo componente, preciso seguir as etapas abaixo para resolver os problemas abaixo.

Etapa 1 - Crie um novo componente com ng g c lakshya. Passo 2 - No aplicativo lakshya folfer criado com 4 arquivos. Etapa 3 - Index.html precisa <app-root></app-root>da <app-lakshya></app-lakshya> Etapa 4 - arquivo app.Module.ts alterar bootstrap: [AppComponent] para bootstrap: [LakshyaComponent]

então resolver o erro acima.

— Krishna
fonte

0

Em seu app.module.ts, se você tiver my-app no bootstrap, comente ou exclua-o.

bootstrap: [AppComponent, // my-app]

— Lloyd
fonte