Migrando do AngularJS para o Angular7 por meio de um aplicativo híbrido
A tarefa não é a mais fácil, mas factível.
Eu a encontrei quando me mudei para uma nova empresa.
O fato de ser factível pode ser encontrado no
manual .
Foi criado especificamente para simplificar a transição sem a necessidade de criar um novo projeto e reescrever cada componente desde o início.
Conforme concebido pelos desenvolvedores, nosso projeto deve começar a trabalhar no AngularJS e no Angular a nova versão com uma substituição gradual do código.
Então eu decidi fazer isso.
O guia é bastante detalhado, mas basicamente contém a parte teórica.
Para uma pessoa que costumava lidar principalmente com o Vue, não é tão simples entender imediatamente os meandros da organização de estruturas.
A principal dificuldade para mim foi que a estrutura dos projetos no AngularJS e Angular7 é diferente.
Daí a necessidade de reescrever manualmente todas as dependências, serviços e componentes.
De fato, qualquer hibridismo com essa abordagem perde seu significado, pois a aplicação, em qualquer caso, precisa ser completamente reescrita.
Foi o que fiz no começo, sem encontrar uma maneira menos cara.
No entanto, existe uma opção melhor.
Aqui eu achei muito útil.
Descreverei em detalhes o que fiz.
Você precisa criar um novo projeto.
No Node.js:
npm install -g @angular/cliInstale o Angular globalmente.
Em seguida, você precisa criar uma pasta para o aplicativo e acessar o Node.js.
Os principais comandos que podem ser necessários aqui para encontrar a pasta desejada:
cd _ e
cd .. para retornar ao diretório acima.
Portanto, quando a pasta do projeto for encontrada, você precisará criar um projeto nela.
No Node.js, escrevemos:
ng new _No processo de criação do projeto, você terá várias opções para o aplicativo, nas quais é necessário especificar os parâmetros desejados.
Quando o aplicativo é criado, você pode abri-lo no navegador com o comando:
ng serve --openNo entanto, não há nada a abrir ainda.
Agora você precisa instalar as dependências necessárias para o AngularJS e o Angular funcionarem:
npm install --save @angular/upgradeA partir de agora, o aplicativo suporta os dois frameworks.
Agora abra o projeto antigo, procure o arquivo package.json.
Ele lista todas as dependências necessárias para a operação do nosso aplicativo.
Eles precisam ser instalados manualmente.
Por exemplo:
npm install --save angular @uirouter/angularjsApós esta etapa, você pode transferir todos os estilos globais para o novo aplicativo.
Agora transferimos todos os arquivos do aplicativo.
Para a orientação acima, vamos além.
Mude o nome do componente raiz.
Em app.module.ts, adicione a linha:
import * as angular from 'angular';
Isso não é indicado no manual, mas sem ela a hibridação não pode ser alcançada.
Agora temos uma aplicação que, em teoria, deveria ser um híbrido.
Na prática, vários erros podem ocorrer nesta fase, principalmente relacionados a dependências, sobre as quais vou escrever em outro artigo.
Se eles não surgirem, vá em frente e altere o módulo após o módulo AngularJS para Angular na versão desejada.
Este artigo fornece uma excelente representação visual das principais diferenças entre o código das duas estruturas.
Passo a passo, e você não terá uma única linha no AngularJS.