This is a project to learn how to use Angular2 with ASP.NET Core and angular-cli using VSCode and Visual Studio 2017.

Angular part is based on the official Angular's Tour of Heroes tutorial but using Angular-Cli instead of SystemJS.

This project was generated with angular-cli version 1.0.0-beta.26.

• Install Node.js and npm
  • Verify that you are running at least node v5.x.x and npm 3.x.x by running node -v and npm -v
• > npm install -g npm
• > npm install -g typescript
• > npm install -g @angular/cli angular-cli
• Install .NET Core 1.1 runtime/SDK

• > npm install -g typings
• > npm install -g gulp
• > npm install -g bower
• > npm install -g yo
• > npm install -g grunt-cli
• ...OR SHORTLY: > npm install -g npm typescript angular-cli gulp bower typings grunt-cli yo

• cd .\src\Frontend > npm start which starts ng serve
• cd .\src\Backend run command > dotnet restore only first time after clone
• cd .\src\Backend > dotnet watch run or > dotnet run
• Navigate to http://localhost:4200/ - this is the Frontend URL created by ng serve which is configured in proxy.conf.json to pass all the API requests to the running ASP.NET Core application on port :5002. The ng serve does not create any files on disk and everything is served from memory.
• ng build command will transpile and bundle all needed files and copy everything, including static files, to wwwroot folder of the Backend application

• Drop database before enabling EF migrations: dotnet ef database drop -c ApplicationDbContext

• Enable and create EF migration: dotnet ef migrations add InitialCreate -c ApplicationDbContext

• Remove EF migrations: dotnet ef migrations remove

• Apply the migration to the database: dotnet ef database update -c ApplicationDbContext

• Add new migration after code changes:

  dotnet ef migrations add HeroDescription -c ApplicationDbContext
  dotnet ef database update -c ApplicationDbContext
  

In terminal got to Frontend directory: cd src\Frontend

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files. this is the Frontend URL created by ng serve which is configured in proxy.conf.json to pass all the API requests to the running ASP.NET Core application on port :5002. The ng serve does not create any files on disk and everything is served from memory.

Run ng build to build the project. The build artifacts will be stored in the Backend/wwroot directory. Use the -prod flag for a production build.

Run ng test to execute the unit tests via Karma.

Run ng e2e to execute the end-to-end tests via Protractor. Before running the tests make sure you are serving the app via ng serve.

Run ng generate component component-name to generate a new component. You can also use ng generate directive/pipe/service/class/module.

First version SystemJS & Gulp

ng quickstart

ng tutorial

mdymel/AspNetCoreAngular2Cli

antonybudianto/angular-webpack-starter

antonybudianto/angular2-starter