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

Sign in to queue

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

Download

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?

  • User profile image
    ng1231

    Any help on the below error will be appreciated.

    Getting following error :

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

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

  • User profile image
    Ross

    Encounter Error while using IE10:
    Line: 32988
    Error: Unable to get property 'apply' of undefined or null reference

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

    seems to point to adding polyfills, however I cannot find polyfills.ts in the project.
    https://stackoverflow.com/questions/41276692/angular2-ie11-unable-to-get-property-apply-of-undefined-or-null-reference

    Help...

  • User profile image
    Nick

    Hi Darren, great video ;0).

    1) Can you use the angular cli to create new componenents / services etc. in the project?

    2) Please can you do a video / tutorial on setting up authentication and authorisation using this template?

    thanks

  • User profile image
    hasangundog​du

    Hi

    i am trying to create CrankBank project. Same time the video. Everything is fine till.. chek the app folder in ClientApp. There is a three app module, app.module.client.ts, app.module.server.ts, app.module.shared.ts. But in the video there is one app.module.ts Project run perfectly but i wonder it. Why there is a three app modules. I hope u can explain that :) Sorry my bad english :)

    please help..

  • User profile image
    Planet​Awesome

    You nailed it ...

  • User profile image
    roica

    Awesome !

    You should do more of these with less 'shortcuts' - i.e. show the entire way.

  • User profile image
    Goke

    Great presentation and highly informative. All I need to get started.

    However, I noticed that bootstrap components with javascripts such as NavBar in does not expand to show menu in collapse mode. Similarly Tab component not working.
    Please any fix.

  • User profile image
    Marcell

    Good stuff, thanks!

  • User profile image
    Sooryanaray​an

    Where can I download the source used in the video?

  • User profile image
    medtec99

    @Ross:I had the same issue. It's because the template is missing the polyfills for IE 10/11

    There are several solutions to this but the simplest I found is the following:

    in the boot-client.ts file under the clientApp folder add the following lines under 'import 'zone.js'

    /** IE9, IE10 and IE11 requires all of the following polyfills. **/
    import 'core-js/es6/symbol';
    import 'core-js/es6/object';
    import 'core-js/es6/function';
    import 'core-js/es6/parse-int';
    import 'core-js/es6/parse-float';
    import 'core-js/es6/number';
    import 'core-js/es6/math';
    import 'core-js/es6/string';
    import 'core-js/es6/date';
    import 'core-js/es6/array';
    import 'core-js/es6/regexp';
    import 'core-js/es6/map';
    import 'core-js/es6/set';

     

     

  • User profile image
    Quanghai

    hello!!! thank you for your tut

    I have a question but can not find the answer: How can I use Visual studio 2015 to run this project. Please support me because my company is using Visual studio 2015, can not upgrade to 2017. Thank you very much!!

  • User profile image
    Ravi Kishore

    Great article.

  • User profile image
    John Snyder

    @Goke I have the same issue regarding bootstrap NavBar. Anyone have any success?

  • User profile image
    songping

    Does there exist some possibility to get intellisense for the html selector and its properties?

  • User profile image
    Chris

    @Quanghai - If anyone wants to accomplish this tutorial in Visual Studio 2015 then do the following (all installs can be found with a simple Google search):

    Install node.js 6.5 or above
    Install DotNetCore.1.0.1.SDK.1.0.0.Preview2-003133-x64
    Install DotNetCore.1.0.1.VS2015Tools.Preview2.0.3
    Install the ASP.NET Core Template Pack v1.1.37 (by Mads Kristensen)

    Run Visual Studio 2015 and you will now see the template when you go to create a new Web project.

    Some dependencies may not install. I had a problem with one named FSEvents. To remove these warnings, I navigated to the package.json file in the 'node_modules' folder of the package that FSEvents depended on (in this case it was called 'Chokidar' under a package named 'Webpack'(. Remove any mentions of FSEvents from the json file and the warning should go.

  • User profile image
    Chris

    Oh and the source code can be found on Github!!!

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

  • User profile image
    Jeff

    using VS 2017 enterprise on Windows 10 Pro
    -When launching the app I get an error saying localHost not responding and its pointing To
    -Vendor.js
    function combine(options) {
    return ((Object)).assign.apply(((Object)), [{}].concat(options));
    }

    Any ideas ??
    Thks and have a great day !
    Jeff

  • User profile image
    Jeff

    OMG should have try this before, switching to launching the web app in EDGE instead of IE solved the issue

    Thks for the great work !!!!!!!!!

  • User profile image
    Thanveer Ahamed

    Hi Daren May,

    This is a very beautiful and descriptive video. Everything worked perfectly fine. But I had 2 issues. As I am entirely new to developing Angular 2 app using VS2017. Indirectly (via the video) you are the first person who is guiding me. I would really appreciate your response for the ASAP. I would like to know if you faced similar issues? If yes, how did you fix it?

    Issue 1: Bootstrap and Kendo UI animations are nor working. Below are the imports I am using. If I use bootstrap Nav bar, the dropdown & toggle does not work. Really appreciate if you can guide me.

    Issue 2: While I access this app on IE, I get below error.
    SCRIPT5007: Unable to get property 'apply' of undefined or null reference. vendor.js(305,717).

  • User profile image
    Enrique

    Hi i not speak english ja, i have a issue bootstrap.min.js and bootstrap.js dont working the nav var not doing the collapse or anything that use bootstrap.min.js and bootstrap.js

  • User profile image
    Leudy

    ¿somebody has the account-detail.component.ts and account-detail.component.html? 

  • User profile image
    Gabriel

    Hi...have the same problem with bootstrap...how to solve this ?? i try a from upgrading to bootstrap 4 and even downgrade him (that ruin my hole project)... still no solution

  • User profile image
    dhabed

    The current version of template has changed as it now splits app.module into server, client and shared. Have to take that into account. In addition, in order to the AccountService to be able to make the get request I needed to change the code as follows. Notice as I added ${this.originUrl} to the Url so it can find it, without having to hardcode url.

    import { Injectable } from '@angular/core';
    
    import { Inject } from '@angular/core';
    
    import { Http } from '@angular/http';
    import 'rxjs/Rx';
    
    import { AccountSummary } from './account-summary.type';
    import { AccountDetail } from './account-detail.type';
    import { AccountType } from './account-type.enum';
    
    @Injectable()
    export class AccountService {
        
        constructor( @Inject('ORIGIN_URL') private originUrl: string, private http: Http) {        
        }    
        getAccountSummaries() {
            
            return this.http.get(`${this.originUrl}/api/Bank/GetAccountSummaries`)
                .map(response => response.json() as AccountSummary[])
                .toPromise();
        }
         getAccountDetail(id: string) {
             return this.http.get(`${this.originUrl}/api/Bank/GetAccountDetail/${id}`)
                 .map(response => response.json() as AccountDetail)
                 .toPromise();
         }
    }
    

  • User profile image
    Byron Crowell

    God bless you for this video. As a .Net developer I find it unfathomable that the state of web development has devolved into this kludge of disparate tools and bobbles that all have to be stacked and normalized somehow. What a freaking mess. Thanks for, at least, showing us how to use visual studio to make the whole thing a bit more manageable.

  • User profile image
    Scott

    You web devs are nuts. This is craziness!

  • User profile image
    L0max

    Don't waste you time with this - it makes no sense and the provided code doesn't even work!

  • User profile image
    Sky

    Hey there,

    I'm trying to run this demo, and the angular Core is not showing up on my list. Any advice? Running dotnet new -l returns aurelia, knockout.js, vue.js, and web API but no angular.

  • User profile image
    tlang

    version 1 of spatemplates drops support of angular. I went to the previous version: 0.9.3

    also,
    with the new template, which breaks up the app.module into three parts, I got as far as adding the AccountService.

    after that:
    Exception: Call to Node module failed with error: Error: Uncaught (in promise): Error: No provider for AccountService!
    Error: No provider for AccountService!

    If anybody has gotten this to work with version 0.9.3 of the Spa template can you please publish the solution or let us know what you did.

  • User profile image
    Martin Palmer

    You guys not seeing the Angular templates need to update to DotNet Core version 2. Then it all appears and works fine. As of today I've built 2 Angular Sandbox applications with no problem.

    One issue I have found is that using an HTML file for a templateURL property with a dash in the name presents an error when you try to access the templateUrl in the Component.

    The workaround appears to be to leverage HTML files without any dashes.

  • User profile image
    magdog

    If you installed the latest ASPCoreNet SPA package and the Angular template is not available, be sure the .NET Core 2.0 SDK is installed. After installing, the Angular template appeared and I was able to use and run the SPA-based project.

  • User profile image
    Marco Hernandez

    That moment you realize that after you install SpaTemplates, lo and behold, the angular template is not available....

  • User profile image
    JenW

    I am following the video up to about 55 minutes in. I have copied over the "completed" files from the downloaded code to my local project. I am using Visual Studio 2017 15.3. I am not able to run the code in the browser. I get an exception error:
    "NodeInvocationException: Template parse errors:
    Can't bind to 'ngForOf' since it isn't a known property of 'account-summary'.
    1. If 'account-summary' is an Angular component and it has 'ngForOf' input, then verify that it is part of this module.
    2. If 'account-summary' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
    </div>
    <div class="panel-body" >
    <account-summary [ERROR ->]*ngFor="let account of cashAccounts" [account]="account"></account-summary>
    </div>
    </div>
    "): ng:///AppModuleShared/AccountListComponent.html@7:25"

    This is my accountlist.html that I copied from the example:

    <h1>Account Summary <small>January 3rd 2017</small></h1>

    <div class="panel panel-default panel-primary">
    <div class="panel-heading">
    <h3 class="panel-title">Cash Accounts</h3>
    </div>
    <div class="panel-body" >
    <account-summary *ngFor="let account of cashAccounts" [account]="account"></account-summary>
    </div>
    </div>
    <div class="panel panel-default panel-primary">
    <div class="panel-heading">
    <h3 class="panel-title">Credit Accounts</h3>
    </div>
    <div class="panel-body">
    <account-summary *ngFor="let account of creditAccounts" [account]="account"></account-summary>
    </div>
    </div>

  • User profile image
    lstockton

    I issued the command to download the templates, but it didn't download the one for Angular.

     

  • User profile image
    lstockton

    @Marco Hernandez:  I have the same issue.

    Considering that there's been no response since August, I suspect this is a dead-end.

  • User profile image
    Karlito

    Angular is no longer among the templates downloaded. What do we do? Is there an update?

  • User profile image
    kingvee

    Angular is not in the template anymore as it is in .NET Core 2.0 

  • User profile image
    kingvee

    @lstockton:Its not in the template anymore because it is on .NET CORE 2.0

  • User profile image
    clen martin

    why the template is not working in IE11?

  • User profile image
    Ashwin

    Angular still appears to be in the templates.
    I've just configured a project using the steps provided here. Angular is listed under Web/MVC/SPA.

    @kingvee: If you install the SpaTemplates, it will pull angular from there. If you don't, it will pull it from the .NET Core, which will probably fail if you follow the instructions here.
    Atleast, this happened to me.

  • User profile image
    Raja

    Do I need to install Node.js on Production Server to host Angular application ? if yes, why do we need node.js?

    I'm getting the below error message.

    An unhandled exception has occurred: Failed to start Node process. To resolve this:.

    [1] Ensure that Node.js is installed and can be found in one of the PATH directories. Current PATH enviroment variable is:

  • User profile image
    Selvakumar

    Hi,
    In my application "ng2" element is not listing. I am trying to add "ng for" element in <account-summary> but ng2 element is not listing. Did I miss any installation?

    Thanks
    Selvakumar R

  • User profile image
    Wil

    Great post! Where to download the project?

  • User profile image
    Mike

    I would also like to see some source files for this demo project. Primarily the full BankController.cs, account-detail.type.ts, account-transaction.type.ts, account-detail.component.html, and account-detail.component.ts.

Add Your 2 Cents