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

router-outlet erro

Depois de inserir as rotas seguindo o exemplo da atividade Single Page Application (SPA) o aplicativo apresenta o erro:

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@0: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 ->]

app.module.ts

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 { routing } from './app.routes';


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

app.routes.ts

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


export const appRoutes: Routes = [
    {path:'',component:ListagemComponent},
    {path:'cadastro',component:CadastroComponent},
    {path:'**',redirectTo:''}
];

export const routing = RouterModule.forRoot(appRoutes);

app.component.html

<router-outlet></router-outlet>
2 respostas

Bom dia. Parece seu AppModule não importou o arquivo de rotas. Olhando no seu código, ele importa sim, mas verifique se o compilador em tempo real do TypeScript esta rodando. Caso você tenha feito essa alteração com ele parado, você terá problema.

Outro problema é não ter salvo o arquivo, mas isso é raro de acontecer. Se nada disso ajudar, feche o projeto, aparece o terminal e rode novamente.

solução!

Flavio, obrigado pelo contato comparei o meu código com o do curso e vi que o arquivo "app.routes.js" estavam diferentes, então alterei o meu e deu certo.

Abraços Lincoln John