Angular and .NET Core

Play Angular and .NET Core
Sign in to queue


In this episode, Robert is joined by Ed Charbeneau for a discussion on using Angular with ASP.NET Core. Ed shows how to create an Angular app using the new ASP.NET Core project templates [01:45], how to create an Angular app with a Web API backend [20:45] and how to use Angular to build a native iOS and Android app [27:10]





The Discussion

  • User profile image

    The "Read about the Angular template for .NET" Link is broken.

    It should be

  • User profile image

    @Darren: Thanks Darren. I fixed it. 

  • User profile image
    Joe Zack

    Perfect timing, thanks!

  • User profile image

    @punkouter2: I can't speak on behalf of the .NET team, but I think demo 2 is easy enough to implement with the File > New Web API project. I would suggest leaving an issue on the github page for the JavaScript Services project. That way the issue can be tracked and opinions can shared about the solution you're proposing. If it's something more people want, then a new template could emerge from the issue you post.

    I will add, that I'm pleasantly surprised with how Visual Studio handles such a variety of technologies, ie: Webpack, npm, Angular, TypeScript and so on. Visual Studio was extremely flexible when I was working through these demos. 

  • User profile image

    Note that I had to add

    import 'core-js/client/shim'; 

    to "boot.browser.ts" to get this template working in IE11.

    This is just something I have found on the internet while finding a solution for the Increment button not working. I am new to Angular and Typescript, so I am not sure if this is a good fix and it is just missing in the VS template, or if I should have done something else?

  • User profile image

    @carens: The best way to share your experience would be to log the issue on the project's GitHub page.

    I would personally search the issues first to make sure there not a duplicate. If there's not, post a detailed explanation of what happened. You should get either a suggestion on if your fix is appropriate or if it may be fixed in future versions of the template.

    Microsoft is open source now, so we [developers] can have direct feedback through GitHub issue.

  • User profile image

    For running the app, you will likely have a multitude of APIs, say if you have a number of micoservices on the backend, a number of endpoints or even a delivery layer in front of that, I would set up Sites in my local IIS, point the folders to the web apps, add entries to my host file which point to those sites, like or if you have one web api app dev.myapi.local

    And set up a few different task to run in dev, staging, production, dev having the local endpoints which get injected into client app at start u etc. This way when you change your backend code, you can just rebuild and run the client app. There's no need to run web api, then run the client app. It also means your client app can hit a number of endpoints at the same time.

    Maybe (definitely) there's a disadvantage to this I'm not thinking of, but it seems like this process could also be automated with some configuration. Obviously publishing would be another step.

    For the moment the build and debug process still seems laborious to me.

    Just my two cents. Thanks for the video.


  • User profile image

    Where could I download the sample code?

  • User profile image

    Where could I download the sample code?


    Note: Running the mobile app requires custom firewall rules.


  • User profile image
  • User profile image

    I have the basic program up and running easily enough, but I am having a heck of a time getting third party libraries integrated into the application. I'm starting with moment js. First, I did
    npm install --save moment
    Which loaded moment in node_modules
    Then I opened webpack.config.vendor.js and added moment to the non shaking tree, like this:
    const nonTreeShakableModules = [
    (note i also tried just 'moment' and that didn't work either in the end though both worked when i ran webpack.

    THEN, I ran
    webpack --config webpack.config.vendor.js
    and that worked without errors.

    At this point, I'm at a loss as to how to actually USE moment js.

    I tried:
    import * as moment from 'moment/moment' (or 'moment' when i tried that)
    declare var moment: any

    This also didn't fail until runtime:
    import { Moment } from 'moment/moment'
    constructor(private moment: Moment) {}
    which was reaching, I know, but I had to try it

    But every time, any attempt to use moment tells me moment is undefined.

    Could someone please show me how to add momentjs to this application and how to actually USE it within my Components?

    BONUS POINTS: I see JQuery is added by default. How do I use that in Typescript given an el: ElementRef to execute against?

  • User profile image

    Where could I download the sample code of the 2nd part of the video? The code of BackendForNg and of the ClientApp of the 2nd part? I miss especially the code of the ClientApp of the 2nd part. Without that is very difficult to follow along and see how it works.

  • User profile image

    Here's the source from the second demo.


  • User profile image

    Thank you for the link with the source from the second demo, but there are no files or code there. Just empty folders. Did you push everything to the remote repository?

Add Your 2 Cents