Using Angular2 in ASP.NET Core projects

Angular2 is in Beta and ASP.NET Core is in RC1. Neither are quite ready, but some of you brave souls are already implementing one or both of them. There are some caveats to using them together. Come see me build an Angular2 app in a ASP.NET Core project. Should be one hour long.

[Destin]

Hi, for gulp issue: the name of the folder is node_modules (not node_components) . You can see at 16:45

[irvlennert]

Hi Shawn, I have gone right from your course on Pluralsight into a full Angular 2 app (actually re-writing, in part, an existing web site that was written in ASP.Net web forms) as a demo of the technology. Also using ASP.NET Core as the back-end. I still got a tone out of this video! thanks! I could not do this project if I had not done your Pluralsight course. It was great!

[techiebud]

Thanks Shawn for this great webcast. I like this style of presentation as it was kind of refreshing. In a strange way the technical glitches added to the enjoyment as it shows that even the experts can be challenged to get the new software to work correctly.

FYI: I also struggle with some of my extensions getting in the way of my Chrome debugging. I use the Chrome Web Store app Disable Extensions Temporarily by busterc. This has proven to be a big help.

[gbegerow]

Great webcast Shawn. Even if I am personally more into Aurelia instead of Anglular2, I learned a lot. Btw. the annotations are called decorators. Unlike annotations in c# they create a wrapping function around their target which can theoretically completely rewrite the target. Usually you only set some properties, but you can do more. So decorators are an active element while annotations are passive.

[vsg]

Great webcast. I liked how you integrated Angular 2 with ASP.NET Core

[tevoj]

Hi Shawn! I'm a huge fan of yours. :)))!
For me you're the best dev.
Hail from Brazil o/.

[leojavier]

1:19:45 The star (*) is for structural directives. Its a type of directive that can modify the DOM

[odytrice]

I have not been following the development Angular 2 and I found this webcast very helpful. Thanks Shawn.

Quick question, How did angular know that fb in the constructor is of type Form Builder? at 1:12:18. Considering that typescript erases all the types in the generated JavaScript, I'm wondering how that works. did the typescript compiler add $inject behind the scenes? Just curious

[lukehoKim]

Hi Shawn I like your courses so much!!!

[edgaryovanniriveranolasco]

HI Shawn, the reason why it might not move the files with gulp is due to the src is not node_componets but node_modules

[mvegeta]

It's a very nice video, but it would be even better if you can show us how the controller of mvc can interact with angular objects, or do we have to use web api ?

[rueleonheart]

@swildermuth Do you also encounter VS hanging when copying npm packages to wwwroot. For mine, I needed to hide the actual folder to prevent it. Also, VS2015, can't seem to resolve some rxjs operators like map. Hope everything get's streamlined soon. It's very hard to use ASP.NET Core and Angular stack in VS Code also code has better support with angular and typescript.

[kiranpawar]

Hi Shawn, really nice video. Thanks
Can you please provide ( for share/Download) this solution project for reference ?

[weilunyi]

Hi, how to generate main.js and main.js.map for main.ts at 33:00 ?

[johnkennerley]

I fought the gulp thing for a while as well. En-route found out you cant put spaces in gulp task names.
Carlos spotted it should be node_modules not node_components.
I ended up with this ...
gulp.task('npm_node_modules_to_wwwroot',
[
"npm_wwwroot_lib_es6-shim_FROM_npm_node_modules",
"npm_wwwroot_lib_angular2_bundles_FROM_npm_node_modules",
"npm_wwwroot_lib_systemjs_dist_FROM_systemjs_dist",

]
);
gulp.task('npm_wwwroot_lib_es6-shim_FROM_npm_node_modules', function () {


});
gulp.task('npm_wwwroot_lib_angular2_bundles_FROM_npm_node_modules', function () {


});
gulp.task('npm_wwwroot_lib_systemjs_dist_FROM_systemjs_dist', function () {


});
gulp.task('npm_wwwroot_lib_rxjs_bundles_FROM_rxjs_bundles', function () {


});

[aumpalosa]

where does asp.net fits in all of this !
I see that you are using Visual Studio just like any other free editor ! then what is the use of it with angular 2 ?

[mvegeta]

I had to laugh many times when it didn't work in a good way naturally thanks for the video