Building web apps powered by Angular 2.x using Visual Studio 2017

Download this episode

Download Video

Download captions

Download Captions

Description

In this session we will learn how to setup and use the SpaTemplates to create an application that uses Angular for the client side and ASP.NET Core for the server application. We will investigate the application that is created for us and discover the new features in Visual Studio 2017 that enhance developer productivity. Using TypeScript, we will extend the client application with additional features and integrate with a new Web API service. Finally, we will deploy the application to an Azure site.

For more information, check out these courses on Microsoft Virtual Academy:

Day:

2

Session Type:

Training (Web Dev)

Code:

WEB-103

Embed

Format

Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    • User profile image
      rkc

      Excellent walk through Daren!

    • User profile image
      geeyef

      This was an excellent introduction. Daren did an amazing job presenting and explaining everything. I wish he had an entire series, such as, how to set up bootstrap, how to do authentication, etc.

    • User profile image
      jbarr33

      Thanks for the great video.  Question...

      When debugging and setting breakpoints in TypeScript files it opens up a "dynamic" view of the TypeScript file instead breaking in the original source file, do you know how to stop this from happening?

      Thanks.

    • User profile image
      someone

      This doesn't work - import { Component } from 'angular/core'; isn't found. I have followed the tutorial exactly.

    • User profile image
      gerardolima

      Hi, I am following the video and thought it would be nice if there was a repository for this code.

    • User profile image
      spottedmah

      Hi Daren - can you share the code you are copying and pasting?  Thanks!

    • User profile image
      spottedmah

      @someone:

      This doesn't work - import { Component } from 'angular/core'; isn't found. I have followed the tutorial exactly.

      Try this:

      import { Component } from '@angular/core';

      If you watch the video again there is an @ symbol in his code.  Something appears to be up with the extension.

    • User profile image
      Uday81

      Hello Daren, this is an excellent video to start with. Can we get the source code of the sample banking project you created in the video ?

    • User profile image
      Wisdom

      Hi, this is good stuff- was hoping for a copy of the components folder you copy into the project.

    • User profile image
      Someone

      Thanks for the suggestion - I tried import { Component } from '@angular/core';, but then it won't compile - An unhandled exception occurred while processing the request.

      Exception: Call to Node module failed with error: Prerendering failed because of error: Error: Cannot find module "angular/core"
      at new Error (native)

    • User profile image
      Shabbir

      I have same problem

      Thanks for the suggestion - I tried import { Component } from '@angular/core';, but then it won't compile - An unhandled exception occurred while processing the request.

      Exception: Call to Node module failed with error: Prerendering failed because of error: Error: Cannot find module "angular/core"
      at new Error (native)

    • User profile image
      dcgj

      Very nice introduction to Angular in Visual Studio 2017. Looks like the IntelliSense has improved since 2015. Downloading 2017 asap.

    • User profile image
      StavM

      Great demonstration.
      One thing worth mentioning, in your HTML, bootstrap column classes scale up one notch.
      so basically in "col-md-6 col-sm-6 col-xs-6" the col-sm-6 is redundant because it overlaps it in the col-xs-6.

    • User profile image
      Munawar76

      Where is project.json. I wanted to add .net core assemblies, however having a hard time...  

    • User profile image
      ThWa

      @Munawar76:no more project.json, in VS 2017 project uses .csproj file. Take a look at this guide Project.json to MSBuild conversion guide

    • User profile image
      Bob

      How can I use Visual Studio 2017 Community with webpack module bundler for the client side. This way I don't rely on Razor and MVC. Thanks

    • User profile image
      David

      Great, great work.... Loved it....

      Please, please with sugar on top.... could you (pleeeease) share your code ? ;)

      I am brand new to Angular and I would love to set it up with Bootstrap.

      Or better yet, about a video on Bootstrap and authentication... ?

      Great work...

      Thanks,
      David

    • User profile image
      Barfieldmv

      https://github.com/CRANK211/vs17-ng2-dnc

    • User profile image
      Flywheel

      I really enjoyed this! I thought it was very thorough and well organized. Looking forward to trying it out.

      For people asking about code, check out these links:

      bit.ly/SPATemplate
      https://github.com/CRANK211/vs17-ng2-dnc

    • User profile image
      Alex

      Cannot add an angular 2 material material or use hammerjs librairy.

      It looks like it try to prerender on the server side.

      Any idea?

    • User profile image
      murfu

      If I want single user authentication, I suppose I'm going to have to manually add everything afterwards? Using visual studio 2017, no options for creating angular project with authentication?

    • User profile image
      Max

      Great tutorial,

      Is there a tool available to generate the data object classes from existing server-side objects ? Thanks.

    • User profile image
      Thomas

      Great start to SPA apps with VS2017!

      A couple of things:

      1.) How can you add jQuery to this project?

      2.) The application calls the Web API twice on init - account-list.component.ts. Any suggestions?

      Thanks!

    • User profile image
      David​Masterson

      Really enjoyed this, very clear when you going to do some more in depth ones? 

    • User profile image
      geeyef

      Ran into an issue concerning version control. The dist folders are ignored (via .gitignore) but there's no way to restore them. The dotnet new angular creates these, and they aren't restored via dotnet restore. Is there are way to get these to restore when cloning a repo?

    • User profile image
      Igor Donov

      I have an error updating this to angular 4.

      ERROR in [at-loader] ./node_modules/angular2-universal/node_modules/angular2-platform-node/node-platform.d.ts:1:10
      TS2305: Module '"E:/SkyDrive/_PROJECTS/Web Projects/Angular2 WebApi News Site/node_modules/@angular/platform-browser/platform-browser"' has no exported member 'AnimationDriver'.

      will this be fixed?

    • User profile image
      Martin Sher

      Hi
      How do you upgrade to Angular 4?
      Thanks
      Martin

    • User profile image
      eleite

      Amazing. All what i was looking for.

      Thanks Martin 

    • User profile image
      Cfin

      Very Help, thanks for putting it together. I second the other requests that you make the source code available. Cheers.

    Add Your 2 Cents