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