Os seguintes recursos de software precisam ser/estar instalados no seu ambiente :

• Visual Studio Code - Editor de código leve e multiplataforma;
• ASP. NET Core SDK e .NET Core SDK apropriados para o seu ambiente;
• NodeJS e NPM;
• Visual Studio 2017 ou VS 2015 Update 3 (etapa opcional se você for um fã do VS);
• Yeoman;

Vamos usar o Yeoman para gerar o nosso projeto Single Page Application com Angular 2 e para isso vamos usar o template aspnetcore-spa do Yeoman.

Nota:  Antes de instalar o Yeoman você tem que ter o Nodejs e o NPM instalados no seu ambiente;

Para instalar o Yeoman no seu ambiente abra uma janela de comandos e digite o seguinte comando :  npm install -g yo generator-aspnetcore-spa

Nota: Atualmente (jan/2019) o projeto pode ser gerado diretamente usando a ferramenta NET CLI usando o comando: dotnet new angular

Etapa 2 - Criação do projeto ASP .NET Core MVC com Angular 2

Vamos agora criar o nosso projeto ASP .NET Core MVC SPA.

Abra uma janela de comandos e crie uma pasta para o seu projeto:  md aspnetCoreAngular2

A seguir posicione-se na pasta criada e digite o comando para exibir as opções de templates de projeto do Yeoman digitando :  yo aspnetcore-spa

Selecione o framework Angular e tecle Enter;

Informe No para criar um projeto de testes e confirme o nome do projeto teclando Enter;

Aofinal do processo você verá o projeto criado na pasta aspnetCoreAngular2 exibindo os arquivos e pastas do tempate usado:

Etapa 3 - Entendendo a estrutura do projeto

Vamos abrir o projeto no Visual Studio Code digitando na linha de comando : Code .

Abaixo vemos o nosso projeto criado com arquivos e pastas :

1 -ClientApp -  é uma aplicação Angular 2 com módulos, componentes, modelos, roteamento, etc Qualquer outro código de desenvolvimento Angular 2 deve ser escrito aqui. 2- Controllers - é uma pasta que contém controladores ASP.NET Core. Controladores MVC e Web API  podem ser escritos aqui. 3- Node_modules - pasta que contém todos os pacotes NPM instalados. O arquivo Package.json contém uma lista de pacotes NPM necessários para trabalhar com Angular 2, outras tecnologias como bootstrap, JQuery etc. Assim que o projeto é criado a partir de yeoman, os scripts são executados a partir de project.json 4- Views - pasta que contém os arquivos HTML do Razor MVC como Layout, Erro, etc. Isso mostra que estamos usando o aplicativo ASP.NET Core MVC. AspnetCoreAngular2.csproj - é o arquivo de projeto .csjproj da solução; 6- Program.cs e Startup.cs - arquivos de inicialização da aplicação; 7- webpack.config.js - arquivo de configuração webpack - Faz o módulo empacotando tarefas. Para o Angular 2 carregar, preparar os bundles com base em arquivos do fornecedor, minificar quando em produção, etc. são todos realizados usando essa configuração.

Etapa 4 - Executando a aplicação

Temos nosso projeto criado e ele pode ser executado de dois modos distintos:

1- Executar a aplicação usando o modo CLI

Para executar a aplicação usando o NET CLi usamos o comando : dotnet run   na janela de comandos.

Ele inicia o aplicativo e fica escutando na portal 5000 no localhost.

A seguir basta abrir o navegador e navegar para : http://localhost:5000   para ver a aplicação.

2- Executar a aplicação usando o Visual Studio Code

Ao abrir o aplicativo no VS Code, você verá o seguinte aviso de que os recursos necessários precisam ser criados. Clique em Sim.

Clique em Sim criará a pasta obj contendo os arquivos com código predefinido para executar o aplicativo.

O Resultado pode ser visto na figura abaixo: