Deploy em um Servidor Externo

Geralmente o host que você paga tem uma área de ajuda que farua de host para host. Além de variar de host para host cada server é configurado de uma maneira.

No entanto, o server tem que sempre devolver para qualquer requisicao a pagina principal da app, inclusive para erros. Isso é padrão de toda Single Page App.

Com essa dica basta entrar em contato com o suporte do seu host que eles lhe ajudarão.

Mas qual é seu server e host?

Oi Flávio. Tudo bem? Na verdade estamos montando o ambiente usando um container docker local e vamos subir ele pra uma hospedagem no JElastic (representado pela Localweb aqui no Brasil). Como informei anteriormente, criamos um container Docker com Ubuntu + Apache2 a partir do zero. Não sei se é necessário fazer alguma configuração no Apache ou mesmo se é preciso instalar alguma coisa específica no SO, como o pacote do nodejs, por exemplo. Eu havia entendido que, após a compilação do app, não seria mais necessário um servidor node, mas que as páginas agiriam como se fossem uma página estática (HTML + CSS + Javascript) sem necessidade de intervenção ou alguma interpretação pelo servidor. Mas posso ter entendido errado. Bem, se for possível e sem precisar entrar em detalhes, você poderia dar uma sugestão de configuração de uma máquina que poderia rodar uma aplicação Angular 2? Eu vi como fazer com o Firebase e com o GitHub Pages, mas pretendo implantar a aplicação aqui na rede interna da empresa e então precisa ser num servidor dedicado.

Desde já meu muito obrigado.

Bom, aqui há uma orientação para o Heroku

http://stackoverflow.com/questions/37672777/how-to-deploy-angular2-app-built-using-angular-cli

Mas tipo, se suas rotas do Angular não usa #, usam o history mode que é o padrão, você não pode simplesmente hospedar a aplicação em um servidor estático, não vai funcionar. Isso porque, em qualquer aplicação SPA, seu servidor precisa ter uma rota que para qualquer URL que chegar nele, ele sempre precisará devolver index.html. Se não me engano, o apache sozinho é apenas um servidor HTTP, é necessário ter alguém que faça o mapeamento das rotas (se o apache fizer isso sozinho, ótimo).

Além disso, o mesmo servidor que você hospedou sua aplicação Angular, não deve ser o mesmo da sua API, devem ser dois servidores em separado. Eu sei, eu sei, criar uma Single Page Application é muito mais complexa do que uma aplicação web tradicional e já vi muitos projetos falharem porque os gerentes de projetos não sabem das vantagens e desvantagem de SPA's e como contorná-los. É por isso que hoje existe a profissão de arquiteto SPA.

Em suma, esses são os passos para você configurar seu server. Mas lembre-se, o Angular CLI é beta e bugado, inclusive é um dos motivos deu não ter abordado no curso desde o início. Por fim, no cômputo geral, talvez o Angular 2 ainda precise amadurecer um pouco até que eu adote em meus projetos pessoais, apesar deu achar que ele tem um futuro promissor. Acredito que com a versão 4 e a versão final do CLI vá facilitar a vida de todos.

Eu tive um problema parecido usando uma telinha que busca uma informação no banco e retorna os dados. Para fazer o deploy no JBOSS 4 e 7, fiz o mesmo processo com o ng-cli. Com o dist pronto, copiei e colei tudo na pasta WebContent (não utilizei maven). Subiu, mas ficava loading. Pelo erro do console vi que ele não achava minha página principal e arrumei colocando o contexto da aplicação no início dos javascripts. Assim:

Apenas os trechos alterados:

DE:
<link rel="stylesheet" href="assets/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/bootstrap/dist/css/bootstrap-theme.min.css">

PARA:
<link rel="stylesheet" href="angular2_jboss4/assets/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="angular2_jboss4/assets/bootstrap/dist/css/bootstrap-theme.min.css">

...

<script type="text/javascript" src="angular2_jboss4/inline.bundle.js"></script>
insira seu código aqui

Ou seja, os scripts e os CSSs devem estar sendo chamados a partir do contexto. Li bastante a respeito disto para não ter esse trabalho e o que encontrei foi que a tag abaixo é quem faria isso, porém não funcionou.

<base href="/">

Segue um link que achei sobre esse base href que deve funcionar (ainda não testei). http://stackoverflow.com/questions/37672777/how-to-deploy-angular2-app-built-using-angular-cli

Espero ter ajudado.

Abçs,

Wallace