Entrar Ainda não tem acesso?
Solucionado (ver solução)
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 Instrutor/Desenvolvedor Web Sênior/Autor

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 Instrutor/Desenvolvedor Web Sênior/Autor

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 Instrutor/Desenvolvedor Web Sênior/Autor

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 Instrutor/Desenvolvedor Web Sênior/Autor

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 Instrutor/Desenvolvedor Web Sênior/Autor

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 Instrutor/Desenvolvedor Web Sênior/Autor

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 Instrutor/Desenvolvedor Web Sênior/Autor

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 Instrutor/Desenvolvedor Web Sênior/Autor

Ú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 Instrutor/Desenvolvedor Web Sênior/Autor

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
Full stack developer

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