Solucionado (ver solução)
Solucionado
(ver solução)
10
respostas

Erro ao executar o projeto

Caros, repliquei o código do projeto tal qual as vídeo aulas. Mas após criar as rotas, o projeto não executou mais. O erro que consegui coletar foi: EXCEPTION: Error in http://localhost:3000/app/app/app.component.html:23:13 caused by: Maximum call stack size exceeded

Meu arquivo app.routes.ts

import {RouterModule, Routes} from '@angular/router';
import {ListagemComponent} from './listagem/listagem.component';
import {CadastroComponent} from './cadastro/cadastro.component';

const appRoutes: Routes = [

    {path: '', component: ListagemComponent},
    {path: 'cadastro', component: CadastroComponent},
    {path: '**', redirectTo: ''}
];

export const routing = RouterModule.forRoot(appRoutes);

Meu arquivo app.module.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HttpModule} from '@angular/http';
import 'rxjs/add/operator/map';
import {AppComponent} from './app.component'
import {FotoModule} from './foto/foto.module'
import {PainelModule} from './painel/painel.module'

import {CadastroComponent} from './cadastro/cadastro.component';
import {ListagemComponent} from './listagem/listagem.component';
import {routing} from './app.routes';


@NgModule({
    imports: [
        BrowserModule,
        FotoModule,
        HttpModule,
        PainelModule,
        routing
    ],
    declarations: [
        AppComponent,
        CadastroComponent,
        ListagemComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}
10 respostas

Você está chamando recursivamente uma função e isso está estourando sua pilha. Fique tranquilo que mais de 1000 passaram dessa parte sem problema algum.

O erro está em App.component como indicado na mensagem de erro, mas você não postou o código.

Então professor, no arquivo app.component.html só existe a diretiva router-outlet

<router-outlet></router-outlet>

O meu app.component.ts:

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

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

Então, a mensagem de erro do Angular não deixa claro onde é o problema, mas como é recursividade, você precisa olhar cada componente seu, se fez alguma mudança injetando algo recursivo (elemento no próprio elemento ) ou coisa parecido.

Você esta usando as mesmas libs que eu disponibilizei ou atualizou? Aliás, coloque a mensagem de erro completo, não apenas a mensagem padrão.

Segue a mensagem completa.


core.umd.js:3464 ORIGINAL EXCEPTION: Maximum call stack size exceeded
ErrorHandler.handleError @ core.umd.js:3464
(anonymous) @ core.umd.js:6860
ZoneDelegate.invoke @ zone.js:192
onInvoke @ core.umd.js:6242
ZoneDelegate.invoke @ zone.js:191
Zone.run @ zone.js:85
(anonymous) @ zone.js:451
ZoneDelegate.invokeTask @ zone.js:225
onInvokeTask @ core.umd.js:6233
ZoneDelegate.invokeTask @ zone.js:224
Zone.runTask @ zone.js:125
drainMicroTaskQueue @ zone.js:357
ZoneTask.invoke @ zone.js:297
core.umd.js:3467 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ core.umd.js:3467
(anonymous) @ core.umd.js:6860
ZoneDelegate.invoke @ zone.js:192
onInvoke @ core.umd.js:6242
ZoneDelegate.invoke @ zone.js:191
Zone.run @ zone.js:85
(anonymous) @ zone.js:451
ZoneDelegate.invokeTask @ zone.js:225
onInvokeTask @ core.umd.js:6233
ZoneDelegate.invokeTask @ zone.js:224
Zone.runTask @ zone.js:125
drainMicroTaskQueue @ zone.js:357
ZoneTask.invoke @ zone.js:297
core.umd.js:3468 RangeError: Maximum call stack size exceeded
    at new ViewWrappedError (core.umd.js:5559)
    at _View_AppComponent0.DebugAppView._rethrowWithContext (core.umd.js:9688)
    at _View_AppComponent0.DebugAppView.create (core.umd.js:9634)
    at _View_AppComponent0.createInternal (AppComponent.ngfactory.js:85)
    at _View_AppComponent0.AppView.create (core.umd.js:9419)
    at _View_AppComponent0.DebugAppView.create (core.umd.js:9631)
    at _View_AppComponent0.createInternal (AppComponent.ngfactory.js:85)
    at _View_AppComponent0.AppView.create (core.umd.js:9419)
    at _View_AppComponent0.DebugAppView.create (core.umd.js:9631)
    at _View_AppComponent0.createInternal (AppComponent.ngfactory.js:85)
ErrorHandler.handleError @ core.umd.js:3468
(anonymous) @ core.umd.js:6860
ZoneDelegate.invoke @ zone.js:192
onInvoke @ core.umd.js:6242
ZoneDelegate.invoke @ zone.js:191
Zone.run @ zone.js:85
(anonymous) @ zone.js:451
ZoneDelegate.invokeTask @ zone.js:225
onInvokeTask @ core.umd.js:6233
ZoneDelegate.invokeTask @ zone.js:224
Zone.runTask @ zone.js:125
drainMicroTaskQueue @ zone.js:357
ZoneTask.invoke @ zone.js:297
core.umd.js:3471 ERROR CONTEXT:
ErrorHandler.handleError @ core.umd.js:3471
(anonymous) @ core.umd.js:6860
ZoneDelegate.invoke @ zone.js:192
onInvoke @ core.umd.js:6242
ZoneDelegate.invoke @ zone.js:191
Zone.run @ zone.js:85
(anonymous) @ zone.js:451
ZoneDelegate.invokeTask @ zone.js:225
onInvokeTask @ core.umd.js:6233
ZoneDelegate.invokeTask @ zone.js:224
Zone.runTask @ zone.js:125
drainMicroTaskQueue @ zone.js:357
ZoneTask.invoke @ zone.js:297
core.umd.js:3472 DebugContext {_view: _View_AppComponent0, _nodeIndex: 26, _tplRow: 23, _tplCol: 13}
ErrorHandler.handleError @ core.umd.js:3472
(anonymous) @ core.umd.js:6860
ZoneDelegate.invoke @ zone.js:192
onInvoke @ core.umd.js:6242
ZoneDelegate.invoke @ zone.js:191
Zone.run @ zone.js:85
(anonymous) @ zone.js:451
ZoneDelegate.invokeTask @ zone.js:225
onInvokeTask @ core.umd.js:6233
ZoneDelegate.invokeTask @ zone.js:224
Zone.runTask @ zone.js:125
drainMicroTaskQueue @ zone.js:357
ZoneTask.invoke @ zone.js:297
zone.js:344 Unhandled Promise rejection: Error in http://localhost:3000/app/app/app.component.html:23:13 caused by: Maximum call stack size exceeded ; Zone: <root> ; Task: Promise.then ; Value: ViewWrappedError {_nativeError: Error: Error in http://localhost:3000/app/app/app.component.html:23:13 caused by: Maximum call stack…, originalError: RangeError: Maximum call stack size exceeded
    at new ViewWrappedError (http://localhost:3000/node…, context: DebugContext} RangeError: Maximum call stack size exceeded
    at new ViewWrappedError (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:5559:20)
    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:85: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:85: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:85:15)
consoleError @ zone.js:344
_loop_1 @ zone.js:371
drainMicroTaskQueue @ zone.js:375
ZoneTask.invoke @ zone.js:297
zone.js:346 Error: Uncaught (in promise): Error: Error in http://localhost:3000/app/app/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)

Você não me disse que atualizou a lib do seu projeto ou se esta usando o bugado angular CLI.

Ah sim, desculpe, não atualizei nenhuma lib e não estou usando o CLI.

{
  "name": "client",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "tsc:w": "tsc -w",
    "start": "npm run tsc:w",
    "typings": "typings"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "typescript": "^2.0.2",
    "typings":"^1.3.2"
  }
}
solução!

Olha, como você disse que havia feito idêntico ao que faço na aula eu confiei, mas parece que você não fez.

Veja o endereço da URL do template de App.Component, esta incorreta.

Você fez assim:

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

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

Eu faço assim:

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

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

Dá uma verificada. 99% de chance de ser isso o problema.

Carlos, foi?

Minhas sinceras desculpas Professor. Eu adicionei o atributo moduleId e não alterei o caminho do template.

Agora sim. Agradeço seu tempo. Abs.

Carlos, não precisa se desculpar. Isso acontece, ontem mesmo cai em problema semelhante. É que lendo seu texto, tive a ideia de que você estava muito convicto e isso baixou minha guarda na hora de ler seu código. O problema era mais simples do que imaginávamos. Aliás, a mensagem de erro do Angular poderia ser melhor, para ajudar, né, mas uma pensa que ainda é assim.

Sucesso e bom estudo meu aluno!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software