Oque há de novo no Angular4?
Published in
4 min readMar 10, 2017
Aplicações Angular, ou websites são compostos por uma coleção de “webcomponents”. Componentes que são formados de HTML, CSS e Código TypeScript. Neste universo novo, lhes apresento as novidades do Angular 4.
Funcionalidades
- Melhora na robustez nas rotas
- Nova “View Engine” Otimizando a geração de código
- Se você não usa animação, o código desta API não é adicionado no bundle final, como era no Angular 2. Se você utiliza é necessário adicionar esta API no package.json (@angular/animations)
- TypeScript na versão 2.1 é necessário. Esta versão irá melhorar a performance, e verificação de tipos na sua aplicação
- Segurança de rotas, especialmente para lazy loading module
- Usar a palavra chave reservada, abstract, diminui o tamanho do arquivo
- Adiciona expressões puras e suporte a eventos para “view engine”
- Permitir funções Calc e gradiente.
- DatePipe não deve lançar NaN e analisa string de entrada mesmo que não seja uma data válida
- Agora o empacotamento permite que as aplicações, o projeto ou o WebSite usem strictNullChecks em seu Typescript. Se você deseja use strictNullChecks.
- AsyncPipe.transform () é adicionado em angular 4
- Você pode adicionar suporte e serviços para geração de mapas de origem
- Você pode adicionar o local de destino aos “bundles translation”
- “You can style encapsulation for new view engine”
- Nova propriedade Observable é adicionada isStable em ApplicationRef para mostrar quando é estável e instável
- Nova API adicionada para renderizar Module e ModuleFactory para string.
- Agora plataforma -servidor suporta @angular / http de @angular / plataforma -servidor
- Desativar componentes que não sejam componentes de entrada
- Melhorar mensagens de erro para elementos e propriedades desconhecidos no compilador aot
- Alterar o parâmetro ChangeDetectorRef de KeyValueDifferFactory e IterableDifferFactory
- Compress Closure Compiler warning.
- getRawValue deve funcionar corretamente com FormGroups / Arrays aninhados em Angular 4 Form.
- Permita misturar “shadow dom” com “non shadow dom” no platform-browser e não deve lançar debug para contendo $. Você também pode adicionar estilos com encapsulamento nativo no “shadow dom”.
- Permite criar vários platformServer e platformDynamicServer.
- Adicionado validação para input com e-mail
- Adicionado validação para verificar se dois inputs são iguais
- Adicionado suporte ao ngIf trabalhar com Observable direto
Angular 4 — depreciações (para Angular 5 vão deixar de existir)
- KeyValueDifferFactory e IterableDifferFactory não têm mais ChangeDetectorRef como um parâmetro. Não foi utilizado e tem sido por razões históricas.
- O OpaqueToken agora está desativado, use InjectionToken <T> no lugar.
- Injector.get (token: any, notFoundValue ?: any): any é agora deprecated use o mesmo método que agora está sobrecarregado como Injector.get <T> (token: Type <T> | InjectionToken <T>, notFoundValue ?: T ): T;
Angular 4 — Quebras
- As classes que derivam de AsyncPipe e substituem transform () podem não compilar corretamente.
- RootRenderer não pode ser usado em Angular 4 porque é obsoleto em Angular 4. Você pode usar RendererFactoryV2.
- Suporte para Iterable <T> não é necessário em tempo de execução, mas uma definição de tipo Iterable <T> deve estar disponível.
- Injector.get () é agora parametrizado, é possível que o código que costumava trabalhar não funcione devido a checagem de tipos.
Nova sintaxe — Enhanced * ngIf
1) Agora você pode usar uma sintaxe de estilo if / else e atribuir variáveis locais em sua sintaxe de vinculação de modelo.
<ng-template #loading> Carregando ... </ng-template>
<div * ngIf = "clientObservable | async; else carregando; let client"> {{client.name}}
</ div>2) Em Angular 2 (mas pros meus alunos isso não é problema, eu sempre ensinei usando a sintaxe do angular 4 :P) :
@Componente() Class SomeComponent extends OnInit {}
Em Angular 4:
@Componente() Classe SomeComponent implements OnInit {}
Proposta de mudança para o ngIf e ngFor
Há também uma proposta de mudança (RFC) para o ngIf e ngFor em aberto, e que você pode contribuir. Qualquer das idéias no link abaixo, irá trazer ganhos consideráveis para todos nós.
