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

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
18
respostas

EXCEPTION: Error in app.component.html:23:13 caused by: too much recursion

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

por Antonio Ladeia
| 73.4k xp | 9 posts

Comecei a fazer o curso, mas logo ao final da primeiro capitulo recebi este erro:

EXCEPTION: Error in app.component.html:23:13 caused by: too much recursion
core.umd.js:3462:13
ORIGINAL EXCEPTION: too much recursion
core.umd.js:3464:17
ORIGINAL STACKTRACE:
core.umd.js:3467:17
DebugAppView</DebugAppView.prototype.create@http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9634:17
anonymous/_View_AppComponent0.prototype.createInternal@AppComponent.ngfactory.js:80:3
AppView</AppView.prototype.create@http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9419:20
DebugAppView</DebugAppView.prototype.create@http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9631:24
anonymous/_View_AppComponent0.prototype.createInternal@AppComponent.ngfactory.js:80:3
AppView</AppView.prototype.create@http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9419:20
DebugAppView</DebugAppView.prototype.create@http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9631:24
anonymous/_View_AppComponent0.prototype.createInternal@AppComponent.ngfactory.js:80:3
AppView</AppView.prototype.create@http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9419:20
DebugAppView</DebugAppView.prototype.create@ht…
core.umd.js:3468:17
ERROR CONTEXT:
core.umd.js:3471:17
Object { _view: {…}, _nodeIndex: 24, _tplRow: 23, _tplCol: 13 }
core.umd.js:3472:17
Unhandled Promise rejection: Error in app.component.html:23:13 caused by: too much recursion ; Zone: <root> ; Task: Promise.then ; Value: 
Object { _nativeError: Error, originalError: InternalError, context: {…}, stack: "" }
 DebugAppView</DebugAppView.prototype.create@http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9634:17
anonymous/_View_AppComponent0.prototype.createInternal@AppComponent.ngfactory.js:80:3
AppView</AppView.prototype.create@http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9419:20
DebugAppView</DebugAppView.prototype.create@http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9631:24
anonymous/_View_AppComponent0.prototype.createInternal@AppComponent.ngfactory.js:80:3
AppView</AppView.prototype.create@http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9419:20
DebugAppView</DebugAppView.prototype.create@http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9631:24
anonymous/_View_AppComponent0.prototype.createInternal@AppComponent.ngfactory.js:80:3
AppView</AppView.prototype.create@http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9419:20
DebugAppView</DebugAppView.prototype.create@ht…
zone.js:344:13
Error: Uncaught (in promise): Error: Error in app.component.html:23:13 caused by: too much recursion
Stack trace:
resolvePromise@http://localhost:3000/node_modules/zone.js/dist/zone.js:418:31
makeResolver/<@http://localhost:3000/node_modules/zone.js/dist/zone.js:395:13
ZoneDelegate.prototype.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:192:19
Zone.prototype.run@http://localhost:3000/node_modules/zone.js/dist/zone.js:85:24
scheduleResolveOrReject/<@http://localhost:3000/node_modules/zone.js/dist/zone.js:451:52
ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:225:23
Zone.prototype.runTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:125:28
drainMicroTaskQueue@http://localhost:3000/node_modules/zone.js/dist/zone.js:357:25
ZoneTask/this.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:297:25
zone.js:346:9

Acredito que fiz como está no curso, alguém ja passou por isso?

18 respostas
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor

Boa tarde!

Você entrou em recursão chamando um método que chama ele mesmo!

Cole o código de app.component.ts e do app.component.html

Pode ficar tranquilo que mais de 1000 alunos passaram dessa parte sem problema algum, vamos descobrir.

por Antonio Ladeia
| 73.4k xp | 9 posts

este é o app.component.ts

import { Component } from "@angular/core";

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

e este é o html

<div class="jumbotron">
    <h1 class="text-center">Alurapic</h1>
</div>
<div class="container">
   <img class="img-responsive center-block" src="img/leao.jpg" alt="leão">
</div>
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor

Esse html é do app.component.html? A mensagem de erro aponta uma linha que não existe nesse arquivo.

1 - Você mudou mais algum arquivo?

2 - Está acessando a App de localhost:3000?

3 - o nome do arquivo de template existe, está na pasta correta?

4 - qual versão do Node está utilizando ?

5 - cole o conteúdo de index.html

6 -Qual navegador? Versão?

Responde pra mim?

por Antonio Ladeia
| 73.4k xp | 9 posts

Vamos lá:

1 - Você mudou mais algum arquivo? Sim, todos os que foram utilizados nesta aula

2 - Está acessando a App de localhost:3000? Isso mesmo

3 - o nome do arquivo de template existe, está na pasta correta? Sim, existe e está na pasta app

4 - qual versão do Node está utilizando ? v9.2.0

por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor

Não use versão ímpar de Node. Remova e instale a versão par. Versão ímpar é experimental.

Faça isso, pare a App e rode novamente.

por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor

Tem mais pergunta que fiz, item 5 e 6. Responde para mim?

por Antonio Ladeia
| 73.4k xp | 9 posts

Node 8.0 agora e o mesmo erro...

por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor

Responda item 5 e 6 que faltou. Outra coisa. Você está rodando o compilador do TS em sua máquina? Se não estiver rodando nada funcionará.

5 - cole o conteúdo de index.html

6 -Qual navegador? Versão?

por Antonio Ladeia
| 73.4k xp | 9 posts

Sim, estou usando o compilador. 5 - cole o conteúdo de index.html

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

6 -Qual navegador? Versão? Firefox 57.0,1

por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor

Testou no Chrome?

por Antonio Ladeia
| 73.4k xp | 9 posts

testei agora no chromium, mesmo prob

por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor

Firefox já deixou de ser um bom browser faz tempo. É muito bugado.

Achei esse mesmo erro aí no Firefox. Tente no Chrome. Se funcionar, tem que esperar corrigir o Firefox.

https://github.com/angular/angular/issues/18344

por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor

Última coisa que você pode fazer. Pare os dois terminais ( O que roda o compilador e o que roda o server). Vai na pasta client e apaga a pasta node_modules somente. Depois, ainda dentro de client baixe as dependências com npm install. Depois de baixar, rode o compilador com npm start. Não esqueça de subir o Server e acessar sua App por localhost:3000 no browser.

Se não funcionar, pode tentar começar do zero e verificar. Não faço a menor ideia do erro que você está recebendo. Alguma coisa de infra que não sei o que é.

por Antonio Ladeia
| 73.4k xp | 9 posts

Me desculpe, mas atacar o firefox não me parece uma boa justificativa da tecnologia, o firefox é um browser maravilhoso, que respeita seus usuários e tem ideais muito justos, além de ser maravilhoso, por isso ele é o meu browser, e de muitos dos meus clientes.

Eu não uso o chrome pq não curto mesmo, mas vou instalar aqui só para ver se funciona, de qualquer forma é complicado trabalhar com o angular se não funciona no firefox...

por Antonio Ladeia
| 73.4k xp | 9 posts

Realmente não é coisa do firefox, olha o erro do chrome...

Unhandled Promise rejection: Error in app.component.html:23:13 caused by: Maximum call stack size exceeded ; Zone: <root> ; Task: Promise.then ; Value: ViewWrappedError RangeError: Maximum call stack size exceeded
    at new ViewWrappedError (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:5559:53)
    at _View_AppComponent0.DebugAppView._rethrowWithContext (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9688:27)
    at _View_AppComponent0.DebugAppView.create (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9634:22)
    at _View_AppComponent0.createInternal (AppComponent.ngfactory.js:80:15)
    at _View_AppComponent0.AppView.create (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9419:25)
    at _View_AppComponent0.DebugAppView.create (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9631:48)
    at _View_AppComponent0.createInternal (AppComponent.ngfactory.js:80:15)
    at _View_AppComponent0.AppView.create (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9419:25)
    at _View_AppComponent0.DebugAppView.create (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9631:48)
    at _View_AppComponent0.createInternal (AppComponent.ngfactory.js:80:15)
consoleError @ zone.js:344
zone.js:346 Error: Uncaught (in promise): Error: Error in app.component.html:23:13 caused by: Maximum call stack size exceeded
    at resolvePromise (zone.js:418)
    at zone.js:395
    at ZoneDelegate.invoke (zone.js:192)
    at Zone.run (zone.js:85)
    at zone.js:451
    at ZoneDelegate.invokeTask (zone.js:225)
    at Zone.runTask (zone.js:125)
    at drainMicroTaskQueue (zone.js:357)
    at XMLHttpRequest.ZoneTask.invoke (zone.js:297)
consoleError @ zone.js:346
DevTools failed to parse SourceMap: http://localhost:3000/bootstrap.min.css.map
DevTools failed to parse SourceMap: http://localhost:3000/bootstrap-theme.min.css.map
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor

Testei aqui no Chrome, Firefox e Safari. Todos funcionaram.

Então, faça o processo de baixar as dependências e me diz se funcionou.

solução!
por Gabriel Oliveira
| 184.3k xp | 1 posts

O erro está aqui: 

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

o caminho correto se você criou na pasta app seria

 templateUrl: './app/app.component.html'

Passei pelo mesmo problema =)

por Antonio Ladeia
| 73.4k xp | 9 posts

Foi isso mesmo gustavo, muito obrigado

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA