1
resposta

Criar um portal Angular que possa carregar aplicações externas

Tenho um projeto para criar um portal em Angular, onde algumas das aplicações que serão acessadas estão publicadas e possuem uma url própria para o acesso.

Seria possível fazer com que o angular acesse essas aplicações via router, e carregue a mesma via router-outlet?

Temos um portal antigo onde as aplicaçoes são carregadas em i-frames, mas gostaria de rescrever esse portal com o front-end em Angular.

Se algum tiver alguma sugestão, será muito útil.

obrigado.

Marco Iung

1 resposta

Sim, é possível fazer isso em Angular. Uma opção seria utilizar o módulo "RouterModule" do Angular para criar rotas para as aplicações externas e carregá-las em um componente "wrapper" que contenha o router-outlet.

Para isso, você pode criar um componente wrapper que contenha o router-outlet e crie rotas para cada aplicação externa que deseja acessar. As rotas podem ser definidas como componentes vazios, pois o objetivo é apenas redirecionar para a URL externa.

Por exemplo:

const routes: Routes = [
  { path: 'app1', component: EmptyComponent, data: { externalUrl: 'http://www.app1.com' } },
  { path: 'app2', component: EmptyComponent, data: { externalUrl: 'http://www.app2.com' } },
];

@Component({
  selector: 'app-wrapper',
  template: '<router-outlet></router-outlet>',
})
export class WrapperComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit() {
    this.router.events
      .pipe(filter((e) => e instanceof NavigationEnd))
      .subscribe((e: NavigationEnd) => {
        const url = e.urlAfterRedirects;
        const route = routes.find((r) => url.includes(r.path));
        if (route) {
          window.location.href = route.data.externalUrl;
        }
      });
  }
}

@Component({
  template: '',
})
export class EmptyComponent {}

Nesse exemplo, as rotas "app1" e "app2" redirecionam para as URLs externas "http://www.app1.com" e "http://www.app2.com", respectivamente. O componente "WrapperComponent" contém o router-outlet e o componente "EmptyComponent" é utilizado apenas como um placeholder para a rota.

No método ngOnInit do componente "WrapperComponent", é inscrito um evento para detectar a navegação para uma rota e, se a rota for uma das definidas, a aplicação é redirecionada para a URL externa correspondente.

Assim, ao navegar para a rota "/app1" ou "/app2", a aplicação Angular redirecionará para as respectivas URLs externas, que serão carregadas em uma única instância do componente "WrapperComponent" e exibidas no router-outlet.

É importante lembrar que, ao acessar uma aplicação externa, o controle do Angular é perdido, portanto, o estado da aplicação externa não será mantido no contexto do Angular.