Angular 2 via ASP.NET Core

Angular 2 Client

This project was generated with angular-cli. To learn more about Angular2 or the angular cli please reference the docs.

ASP.NET Core Server

This project was scaffolded using Yoeman using the aspnetcore-angular2 generator

To learn more about asp.net core please read the documentation

Development

Requirements

• .NET Core SDK
• NodeJs
• Yarn (Optional)

Recommended tools

• Angular-cli: install globally using npm install -g angular-cli

Editors / IDE

• Visual Studio 2015 Requirements

  • Visual Studio 2015 Update 3
  • .NET Core 1.0.1 - VS 2015 Tooling Preview 2
  • NPM Task Runner

• VSCode
  Recommended Extensions:

  • Language Support

    • C#

  • Snippets and Autocomplete

    • HTML Snippets
    • Angular 2 TypeScript Snippets
    • Material Design Lite Snippets
    • Angular 2 TypeScript + HTML Snippets

  • Linters

    • Can I Use
    • stylelint

  • Package Management

    • .Net Core Project Manager (Nuget)
    • NPM Script Runner

  • Utilities

    • Unique Lines
    • Git History
    • XML Tools
    • Partial Diff
    • Visual Studio Code Settings Sync
    • change-case

Restoring Dependencies

• Visual Studio 2015 will attempt to restore both nuget and npm packages automatically.
  • If this fails or if Visual Studio is just being difficult you can manually trigger this.
    • Nuget: via the nuget package manager
    • Node modules: via the Task Runner Explorer via the "Install" task.
• VSCode / CLI
  • Open a command line interface
  • Execute dotnet restore for nuget packages
  • Execute npm install for node modules
    • If you installed yarn execute yarn

Build It! (Client & Server)

• Visual Studio: Normal build procedure.
  • There are bindings in the package.json file that instruct Visual Studio to trigger the cient build prior to buiding the C# code.
• VSCode / CLI
  • Execute npm run build
    • There are script definitions in the package.json file that will trigger both .net and JS builds.

Run It! (Client & Server)

• Visual Studio: Normal run / debug procedure.
• VSCode also has a nice integrated debugging experience.
  • Click on the debug tab and click run at the top.
    • Make sure ".Net Core Launch (web)" profile is selected.

Angular2 Development tips

Angular 2 and it's CLI have some nice features to help speed up development.

Development server

Run npm start for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

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

Build

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

Running unit tests

Run npm test to execute the unit tests via Karma.

Running end-to-end tests

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.

Deploying to Github Pages

Run ng github-pages:deploy to deploy to Github Pages.

Further help

To get more help on the angular-cli use ng --help or go check out the Angular-CLI README.

Note: While running the server you can still make changes to the client without having to "rerun".
Simply execute ng build to rebuild client code then refresh your browser to see the changes.

CI via TeamCity

Build Agent Requirements

• .NET Core SDK for Windows
• Nodejs
• Angular CLI
• Yarn Package Manager