sem categoria

Atualização para o Angular 2 Final

Na empresa em que estou trabalhando, nós estamos construindo uma aplicação usando o Angular 2 no front-end. Nós iniciamos o projeto na versão RC3 do Angular 2 (2.0.0-rc3), e agora mais recentemente nós atualizamos para a versão Final do Angular 2 (2.0.0). Fazer isso (pelo menos para mim) foi uma tarefa mais difícil do que eu esperava. Então eu resolvi escrever um passo a passo, enquanto eu aprendia a atualizar o projeto.

Como eu disse, fazer a atualização pode dar um pouco de trabalho. Algumas coisas no Router mudaram e isso foi o que mais me trouxe dificuldade. Além de que agora Módulos são usados para cada “pacote de funcionalidade”. Você pode conferir esse Plnkr e o “Quickstart” para ter uma ideia do que deve ser feito. No passo-a-passo abaixo, eu vou me referir a esses dois o tempo inteiro, então eu espero que você pelo menos dê uma olhada neles antes.

Processo de atualização do angular

  1. Colocar os arquivos na nova convenção de nomes: *.component.{ts,html}, *.service.ts, *.routing.ts, *.guard.ts, etc. (Opcional)
  2. Colocar o package.json do “Quickstart” no lugar do package.json atual e executar npm install.
  3. Possivelmente, você deve deletar a pasta “typings” e rodar npm run postinstall, se erros não aparecerem nos *.ts do projeto. Porque erros vão aparecer!
  4. Seguir o exemplo para configurar as rotas.
    • Muitos *.component.ts terão erro, pois ROUTER_DIRECTIVES não existe mais e deve ser retirado de todo o código.
    • Router, ActivatedRoute e Params continuam sendo importados normalmente de @angular/router.
    • Diretivas como o routerLink são inseridas pelo RouterModule aparentemente, mas não tenho certeza.
  5. Acertar também os arquivos de rotas (*.routing.ts):
    • Não existe mais o RouterConfig, nem o provideRouter.
    • Routes substitui RouterConfig.
    • No lugar de terminal: true (junto com redirectTo: ...), agora é usado pathMatch: 'full'.
    • É necessário exportar o objeto whateverRouting.
    • E o Router de Login exporta authProviders contendo os “Guards” e o serviço de login. (acho que isso é opcional.)
  6. É recomendado criar módulos for funcionalidade (ex: app/alunos, app/profs, etc). O módulo raíz (app.module.ts) importa os outros módulos, na seção imports. Fazer isso não é necessário. É possível ter um único módulo, mas ter múltiplos módulos está sendo muito usado. Ao optar por não usar esse modelo, o app.module.ts pode rapidamente ficar lotado de Components e Services. Independente da escolha, pelo menos um módulo deve ser criado para a aplicação, chamado app.module.ts.
    • Cada Módulo importa os módulos que irá precisar, como: HttpModule, FormsModule, CommomMondule.
    • Cada Módulo importa (imports) as rotas pertencentes àquele módulo. Ex: alunos.module.ts importa alunos.routing.ts.
    • Cada Módulo registra seus componentes na seção declarations.
    • Cada Módulo registra os serviços que fornece na seção providers.
    • app.module.ts deve importar BrowserModule, e deve ter uma seção bootstrap: [ AppComponent ].
  7. Criar um main.ts. Tudo é igual ao exemplo.
  8. Atualizar o systemjs.config.js. (Também igual ao exemplo.)
  9. Nos templates HTML, não é mais possível usar #id=index, ou qualquer # dentro do *ngFor. let deve ser usado.

Exemplo de Módulo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// whatever.module.ts

import { CommonModule } from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http'; // '@angular/http' ?
import { whateverRouting } from './whatever.routing';

@NgModule({
imports: [ // `imports`: módulos que dependemos.
CommonModule, // Diretivas como `ngFor` e `ngIf`.
FormsModule, // Template Driven Forms.
HttpModule, // Para requisições http.
whateverRouting, // Rotas desse módulo.
...
],
declarations: [ // `declarations`: components, directives e pipes.
WhateverComponent,
WhateverPipe,
...
],
providers: [ // `providers`: services.
WhateverService,
...
],
})
export class WhateverModule {}

Exemplo de rotas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// whatever.routing.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { WhateverComponent } from './whatever.component';
import { WhateverGuard } from '../../whatever.guard';

const whateverRoutes: Routes = [
{ path: '', redirectTo: '/whatever', pathMatch: 'full' },
{ path: 'whatever', component: WhateverComponent, canActivate: [ WhateverGuard ] },
];

export const whateverRouting: ModuleWithProviders = RouterModule.forChild(whateverRoutes);

O router de login é um pouco diferente:

1
2
3
4
5
// ...
export const authProviders = [
AuthGuard,
AuthService
];

Exemplo de uso de Router dentro de um Component

Os imports que eu observei do router:

1
2
3
4
5
6
7
8
9
10
11
12
13
// whatever.component.ts

import { Router, ActivatedRoute, Params } from '@angular/router';

@Component({...})
export class WhateverComponent {
// Injestão de dependências.
constructor(
private service: WhateverService,
private route: ActivatedRoute,
private router: Router
) {}
}
Compartilhar