Angular and .NET Core

The Discussion

• 

  The "Read about the Angular template for .NET" Link is broken.
  
  It should be http://www.telerik.com/blogs/cooking-with-aspnet-core-and-angular-2

• 

  @Darren: Thanks Darren. I fixed it. 

• 

  Will there be a option for the template to split it into two projects like the 2nd part of the video rather than do this manually ? It seems when working with a team the angular front end people would rather have their own project and not deal with VS

• 

  Perfect timing, thanks!

• 

  @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.

  https://github.com/aspnet/JavaScriptServices/issues

  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. 

• 

  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?

• 

  @carens: The best way to share your experience would be to log the issue on the project's GitHub page. https://github.com/aspnet/JavaScriptServices/issues

  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.

• 

  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
  
  dev.one-of-my-apis.local 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.
  
  Dan

• 

  Where could I download the sample code?

• 

  Where could I download the sample code?

  https://github.com/EdCharbeneau/AngularDotnetNativeScript/tree/master/src

   

  Note: Running the mobile app requires custom firewall rules.

   

• 

  A brand new article covering this topic can be found at: https://www.red-gate.com/simple-talk/dotnet/net-development/working-angular-technology-stack-net/

• 

  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 = [
  ...
  'jquery',
  'moment/moment'
  ];
  (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?
  

• 

  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.

• 

  Here's the source from the second demo.

   

  https://github.com/EdCharbeneau/angular-vstoolbox-demo

• 

  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?