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.

    • User profile image
      Allan

      Pretty useless demo without the source code. I have better things to do like reading a good book on Angular than watching a guy typing and flipping tabs.

    • User profile image
      squaretable

      Great video

      Does this template support scss? If not, any instructions on how to add?

      Thanks

    • User profile image
      Larry Garrett

      Daren - wow! great material - great presentation. Good job!!!

    • User profile image
      Jay

      Great bit of teaching! Thank you!

    • User profile image
      lojk

      Possibly one of the best Channel9 videos I've ever seen (and I've seen a lot); clear and informative but also very helpful to see you making (and fixing) the errors as you go. I have been struggling to get started on Angular for a few weeks but this video has really helped me to get the results I knew should be possible.

      I have got my starter/learning site running on a Linux VM in a fraction of the time that the equivalent MVC/JS site would have taken me. I may never write another MVC Web App and for that I thank you for helping that happen.

      In 20 years I have never been so excited to be a developer - the new world of Microsoft' open-source, cross-platform and cross-vendor support is a truly amazing thing to behold.

    • User profile image
      lojk

      @Martin Sher: in case you didn't already find it - the angular page tells you all about it.

      http://angularjs.blogspot.co.uk/2017/03/angular-400-now-available.html

      Its about half way down the page - "Updating to 4.0.0". Realistically until you need to or at least understand what you are doing a bit more fully, I recommend not doing so.

    • User profile image
      zman13

      Great job Daren! Great fast tour through a lot of functionality and workflow!

    • User profile image
      Dopeysmith

      This was very helpful, have been working on a prod app using Angular 2, SignalR & Web API, but this helped me out with doing something similar in .NET Core. One issue I would point out (& took me a while to prove it & someone smarter will be explain why).

      If you create a new GIT Repo (blank) & checkout/clone to your device, this approach fails, it starts launching the app using dotnet.exe. What you need to do is go through your process, then push to a new repo (I had to watch you video a couple of times to realize I wasn't missing anything)

    • User profile image
      Dopeysmith

      @Dopeysmith:& I'm having to use base web sockets, as SignalR isn't there for Core yet.

    • User profile image
      Selorm

      Hello Daren,

      After updating my vs 2017,the spa templates have vanished.When i try to install them,i get this error " Unable to resolve 'Microsoft.AspNetCore.SpaTemplates' for '.NETCoreApp,Version=v1.0'.

    • User profile image
      David Karasek

      Thanks for putting this together. I just wish it were in a text not video format.

    • User profile image
      ajamaeen

      Thanks this demo should be named monolithic demo.

    • User profile image
      David Karasek

      Leave it to Microsoft to violate SOLID design principals and mix apples and oranges. This demo should leave ASP.Net out of this and just demo using Angular in a Visual Studio HTML5 project.

    • User profile image
      eyeamdas

      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:/Proj/Angular2 WebApi News Site/node_modules/@angular/platform-browser/platform-browser"' has no exported member 'AnimationDriver'.

      will this be fixed?

    • User profile image
      Milt

      Crank Bank? lol See urban dictionary.

    • User profile image
      Doan Thai

      Thanks, It is very useful for me.

    • User profile image
      Caballep

      Thank you!

    • User profile image
      ron

      run it get exception:

      vendor.js
      function combine(options) {
      return ((Object)).assign.apply(((Object)), [{}].concat(options));
      }

      Unhandled exception at line 32988, column 5 in http://localhost:56825/dist/vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M

      0x800a138f - JavaScript runtime error: Unable to get property 'apply' of undefined or null reference

    • User profile image
      James Secker

      Whilst using this method, was it the best way to add third party libraries such as font awesome?

    Add Your 2 Cents