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

Erro após inserir <router-outlet></router-outlet>

Olá

Seguindo os passos da aula, movi o conteudo de app.component.html para listagem.component.html. Também em app.component.html, coloquei a tag .

Após fazer isso, ao roda a aplicação estou recebendo a mensagem abaixo:

Unhandled Promise rejection: Template parse errors: 'router-outlet' is not a known element: 1. If 'router-outlet' is an Angular component, then verify that it is part of this module. 2. If 'router-outlet' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("

[ERROR ->]

"): AppComponent@2:0 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors: 'router-outlet' is not a known element: 1. If 'router-outlet' is an Angular component, then verify that it is part of this module. 2. If 'router-outlet' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("

[ERROR ->]

"): AppComponent@2:0 Stack trace: TemplateParser</TemplateParser.prototype.parse@http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:8530:21 RuntimeCompiler</RuntimeCompiler.prototype._compileTemplate@http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16905:32 compile/<@http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:79 compile@http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:39 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

6 respostas

Tentei resolver exportando a constante array de app.routes.ts, compilando as rotas dentro de app.module,ts, mas o erro persiste. Vejam o código abaixo:

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

export const appRoutes: Routes = [
    { path: '', component: ListagemComponent },
    { path: 'cadastro', component: CadastroComponent },
    { path: '**', redirectTo: '' }
];
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FotoModule } from './foto/foto.module';
import { HttpModule } from '@angular/http';
import 'rxjs/add/operator/map';
import { PainelModule } from './painel/painel.module';
import { CadastroComponent } from './cadastro/cadastro.component';
import { ListagemComponent } from './listagem/listagem.component';
import { RouterModule, Routes } from '@angular/router';
import { appRoutes } from './app.routes';

@NgModule({
    imports: [ 
        BrowserModule, 
        FotoModule, 
        HttpModule, 
        PainelModule, 
        RouterModule.forRoot(appRoutes) ],
    declarations: [ AppComponent, CadastroComponent, ListagemComponent ],
    bootstrap: [ AppComponent ]
})
export class AppModule {


}

Fala Sérgio beleza? consegue subir o projeto no Github, para que eu possa dar uma olhadinha? \o

Mário, acabei de subir como pediu. Veja que está com a última alteração, que vi em um caso parecido no stackoverflow. Se quiser depois mudo para como está no curso.

Segue a url do projeto: https://github.com/sergiorjs/alurapic.git

solução!

Olá Sérgio,

no código de suas rotas falta vc registrar elas usado o método forRoot de RouterModule.

O codigo de app.routes.ts deve ficar assim:

import { Routes, RouterModule } 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)

Depois em app.module.ts você importa a constante routing de app.routes, ficando desta maneira:

import 'rxjs/add/operator/map'

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { FotoModule } from './foto/foto.module'
import { PainelModule } from './painel/painel.module';
import { ListagemComponent } from './listagem/listagem.component';
import { CadastroComponent } from './cadastro/cadastro.component'
import { routing } from './app.routes'

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

Espero que ajude!!

Abraços, bons estudos!

Certo, o código já estava assim do jeito que vc colou, como orientado no curso, mas alterei quando deu o erro citado no primeiro comentário. Vou tentar quando chegar em casa e posto aqui o resultado.

Reinstalei todo o ambiente e tudo voltou a funcionar.

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