Estou estudando rotas no angular e seguindo um tutorial do site deles.Eles pedem para criar um app-routing.module com o ng generate module app-routing --flat --module=app no cmd, meu código para de funcionar quando eu coloco a tag no app.component.html
app-routing.module:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroesComponent } from './heroes/heroes.component';
const routes: Routes = [
{ path: 'heroes', component: HeroesComponent }
];
@NgModule({
exports: [ RouterModule ],
imports: [ RouterModule.forRoot(routes) ],
})
export class AppRoutingModule {}
app.component.html:
<h1>{{title}}</h1>
<router-outlet></router-outlet>
<app-messages></app-messages>
E consegui fazer com que funcionasse mas pra isso tive que mudar o app-routing.module e ficou assim:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import{ HeroesComponent } from './heroes/heroes.component';
const routes: Routes = [
{ path: 'heroes', component: HeroesComponent}
];
export const routing = RouterModule.forRoot(routes)
e tive que mudar o app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { MessagesComponent } from './messages/messages.component';
import { routing } from './app-routing.module';//<-coloquei isso
@NgModule({
declarations: [
AppComponent,
HeroesComponent,
HeroDetailComponent,
MessagesComponent
],
imports: [
BrowserModule,
FormsModule,
routing//<-coloquei isso
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Eu encontrei diversos tutoriais com a solução que não funciona e achei alguns poucos com a solução que funcionou, então minha pergunta é:
- porque a segunda solução funciona e a primeira não?
- porque que existem tantos lugares mostrando a solução errada?
- existe uma maneira melhor de criar essas rotas?