Onde colocar o aplicativo Angular em uma solução de API da Web do ASP.NET?

Estou iniciando um aplicativo greenfield e quero usar o ASP.NET (4.6) e o Angular 2. Para o back-end, criei um projeto no Visual Studio e agora estou me perguntando onde colocar o aplicativo Angular. Eu realmente quero usar o npm e as ferramentas de nó para o front-end, mas, no final, ele será hospedado na mesma instância do Serviço de Aplicativo do Azure com o aplicativo Angular at domain.com/e a api under domain.com/api/ou similar .

Como devo separar os aplicativos no Visual Studio? O aplicativo Angular deve estar em seu próprio projeto? Devo ter o aplicativo Angular no mesmo projeto que a API? Mesmo que eu não queira usar o nuget e as outras ferramentas VS para isso? (Para o front end, o VS seria mais ou menos um editor de código glorificado). Não encontrei nenhuma prática recomendada para essa combinação.

Você tem duas opções.

Crie projetos mywebsite.api e mywebsite.app separados em sua solução.

Vantagens

• Separação adequada de preocupações.
• Você pode implantar atualizações em sua API e seu front end independentemente.
• A arquitetura dos sites pode ser alterada independentemente (ou seja, você pode atualizar sua API para executar no asp.net 5 sem afetar o site)
• Limpador

Crie um único projeto com o aplicativo cliente e a API em um projeto

Vantagens

• Mais fácil de implantar atualizações
• Não é necessário configurar para trabalhar com o CORS

Como hospedar e desenvolver o aplicativo localmente.

Uma solução eficaz para o desenvolvimento é usar o lite-server para executar o aplicativo cliente (Angular 2) e o IIS / Casini para hospedar o código da API da web. Um bom exemplo de como usá-lo é dado no tutorial de início rápido do Angular 2 (link abaixo). Meu processo de desenvolvimento é executar a API por meio do Visual Studio e trabalhar com a codificação do site do cliente usando o Visual Studio Code e o lite-server (Atom é outra boa opção).

A partir dos documentos lite-server. Servidor de nó de desenvolvimento leve que serve um aplicativo da Web, abre-o no navegador, atualiza quando html ou javascript muda, injeta alterações de CSS usando soquetes e tem uma página de fallback quando uma rota não é encontrada.

https://code.visualstudio.com/

https://angular.io/docs/js/latest/quickstart.html

https://www.youtube.com/watch?v=e_FVeYWUF3s

https://github.com/johnpapa/lite-server

Minha visão

Não há problema em usar o Nuget / NPM na mesma solução e isso não deve informar sua escolha da estrutura do projeto.

Eu só uso a abordagem de projeto único para aplicações de demonstração / prova de conceito. Para lançamentos de produção, sempre separarei minhas preocupações adequadamente e tenho um projeto de API dedicado.

Encontrei este projeto semeador https://github.com/damienbod/AngularWebpackVisualStudio/, que permite desenvolver e hospedar o cliente e o servidor em um único projeto do Visual Studio (2017).

Concordo com os comentários do @CountZero sobre as vantagens de usar dois sites para hospedar (especialmente a separação de preocupações), mas a grande desvantagem para mim é ter que ativar o suporte ao CORS na sua API quando, na maioria dos casos, o único consumidor da sua API é o seu próprio front-end do cliente. Não sou especialista em CORS, mas isso parece uma sobrecarga desnecessária e também vem com ameaças de segurança adicionais.

Bem, obviamente você pode separá-los em duas soluções, adicionar outro projeto em solução ou colocá-los no mesmo projeto. Eu direi o que eu faria.

IMHO, se você quiser tirar proveito das sessões no IIS e / ou ocultar o processo de autenticação na API, escreva também angular no Visual Studio. O VS2015 possui uma integração muito boa (intellisense) com angular se você instalar extensões de desenvolvimento da web. Devo dizer que desta forma seria mais compacto e portátil.

Se você quiser adicionar páginas de documentação no projeto de back-end, separe-as em seus próprios projetos (mesma solução) e ative a API de um subdomínio ou subpasta.

Se você não está interessado em nenhuma das opções acima e se sente mais à vontade com o modo como está acostumado, faça isso. Se você tiver uma autenticação baseada em token, poderá separar projetos sem dúvida.

No VS 2015, você tem a opção de iniciar mais de um projeto em sua solução ao depurar, desde que você defina URLs de projeto diferentes para cada um.

Como exemplo, você configuraria seu projeto de aplicativo Angular para execução http://localhost:55000/e o projeto de API pode ser configurado para execução http://localhost:55000/api. Você define a propriedade URL do projeto na caixa de diálogo Propriedades do projeto na guia Web.

Em seguida, para definir vários projetos de inicialização, na caixa de diálogo Propriedades da solução em Propriedades comuns, selecione o nó Projeto de inicialização. À direita, você encontrará opções para Single startup projecte Multiple startup projects. Escolha o botão de opções Múltiplos projetos de inicialização. Em seguida, escolha a Ação apropriada ao lado do seu projeto Angular (inicie sem depuração, pois é Angular e você provavelmente estará depurando isso no navegador) e, ao lado do seu projeto de API, escolha Iniciar.

Agora, quando você pressiona executar, o aplicativo Angular será aberto no navegador e a API da web também começará a ser executada. Você pode definir pontos de interrupção nos métodos da API da Web e acessá-los no aplicativo Angular.