Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

the selector "app" did not match any elements

Referente ao curso Angular 2: webapps ainda mais poderosas parte 1

por Walter Costa
| 53.6k xp | 23 posts

Boa tarde,

Segui todos os passos do curso, porém quando fui testar a aplicação não apareceu a tela.. Olhando o console do Browser me deparei com o erro :

EXCEPTION: Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: The selector "app" did not match any elements

Segue meus arquivos :

app.component.ts

import {Component} from '@angular/core'

@Component({
    selector : 'app',
    templateUrl : '.app/app.component.html'
})
export class AppComponent{}

app.component.html

<h1>Hello World</h1>

app.module.ts

import {NgModule} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {AppComponent} from './app.component';

@NgModule({
    imports:[BrowserModule],
    declarations:[AppComponent],
    bootstrap : [AppComponent]
})
export class AppModule{}

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
3 respostas
solução!
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Veja o código:

@Component({
    selector : 'app',
    templateUrl : '.app/app.component.html'

O caminho do template não esta correto. O correto é './app/app.component.html';

Mas isso não é o erro que você esta recebendo, seu erro é muito antes. Parece que não há o componente <app> em index.html. Isso é indicado pela mensagem:

EXCEPTION: Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: The selector "app" did not match any elements

Em seu index.html tem <app>Carregando...</app>?

por Walter Costa
| 53.6k xp | 23 posts

Olá professor, acertei o caminho do templateURL para './app/app.component.html'

O erro mudou , conforme abaixo :

zone.js:346 Error: Uncaught (in promise): Error: Error in .app/app.component.html:23:11 caused by: Maximum call stack size exceeded

Segue meu index.html, contedo a tag 

<!doctype html>
<html>
    <head>

        <title>Alurapic</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap-theme.min.css">

        <script src="node_modules/core-js/client/shim.min.js"></script>

        <script src="node_modules/zone.js/dist/zone.js"></script>
        <script src="node_modules/reflect-metadata/Reflect.js"></script>
        <script src="node_modules/systemjs/dist/system.src.js"></script>

        <script src="systemjs.config.js"></script>
        <script>
            System.import('app').catch(function(err){ console.error(err); });
        </script>
    </head>
    <body>
      <app>Carregando...</app>
    </body>
</html>

Segue o app.component.ts

import {Component} from '@angular/core'

@Component({
    selector : 'app',
    templateUrl : './app/app.component.html'
})
export class AppComponent{}
por Walter Costa
| 53.6k xp | 23 posts

Consegui resolver professor... o compilador estava parado!! muito obrigado pela ajuda!! Agora poderei seguir em diante!!