.NET Core 2.0 – Ready for library developers (with Sterling DB)

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].
Resources
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.
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.
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?