Aguarde o build do projeto ser finalizado.
Time: 765ms
: Compiled successfully.
success Already up-to-date.
Abra uma nova aba no terminal pressionando no botão '+' ao lado do yarn start.
Na aba de /bin/bash use o seguinte comando.
yarn ng generate module app-routing --flat --module=app
Aguarde a criação do modulo de rotas... Se tudo der certo um novo arquivo type script será criado na pasta app, como exibido abaixo;
CREATE src/app/app-routing.module.ts (196 bytes)
UPDATE src/app/app.module.ts (393 bytes)
Done in 1.06s.
Faça algumas alterações no arquivo src/app/app-routing.module.ts ;
- Estrutura padrão:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
declarations: [],
imports: [
CommonModule
]
})
export class AppRoutingModule { }
- Estrutura modificada:
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
Com essas modificações, o projeto estará setado para o uso de rotas. Acompanhe o exemplo de criação e configuração de um novo componente para o projeto.
Na aba de /bin/bash use o seguinte comando.
yarn ng generate component exemplo
Aguarde a criação do componente "exemplo"... Se tudo der certo um novo diretório será criado na pasta app, como exibido abaixo;
CREATE src/app/exemplo/exemplo.component.css (0 bytes)
CREATE src/app/exemplo/exemplo.component.html (22 bytes)
CREATE src/app/exemplo/exemplo.component.spec.ts (635 bytes)
CREATE src/app/exemplo/exemplo.component.ts (279 bytes)
UPDATE src/app/app.module.ts (479 bytes)
Done in 1.27s.
Agora que o componente "exemplo" foi criado, precisamos adicioná-lo como uma das rotas da página principal. Para isso, faça as devidas adições no arquivo src/app/app-routing.module.ts;
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import {ExemploComponent} from "./exemplo/exemplo.component";
const routes: Routes = [
{path:'exemplo',component: ExemploComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
Agora o componente exemplo está pronto para ser referenciado nas páginas da aplicação. Lembre-se de repetir este processo para cada componente criado.
OBS: Pode ocorrer do projeto acusar um erro no import;
Cannot find module './exemplo/exemplo.component' or its corresponding type declarations.
Porém o erro acima não interfere na execução do projeto.
Substitua o html do arquivo app/app.component.html, como sugerido no exemplo abaixo;
<div>
<a routerLink="exemplo"> Exemplo atividade</a>
</div>
<router-outlet></router-outlet>
Salve o arquivo e no Browser, pressione o botão hiperLink Exemplo atividade;
Exemplo atividade
exemplo works!
O html do componente "exemplo", que se encontra no arquivo app/exemplo/exemplo.component.html, foi exibido na página através da tag;
<router-outlet></router-outlet>
Se o exemplo funcionou perfeitamente, o seu projeto foi devidamente configurado!