Adding Angular to an existing ASP.NET Web Forms project? - asp.net

I'm looking for guidance on adding Angular (specifially the latest version of 4.0) to an existing ASP.NET WebForms project. I'm using Visual Studio 2017 and the .NET Framework version is 4.6.2.
I recently explored the official template project for Angular with ASP.NET Core but unfortunately since the dependencies, npm/NuGet packages came already set up for me I don't know how to add the proper, latest and greatest packages and extensions to an existing project. Not to mention that I'm using a completely different version of ASP.NET.
Any help is appreciated, Thanks!
UPDATE: I thought I should add more details. I specifically want to end up with Angular and at least webpack, Hot-module-replacement-middleware or some equivalent, BrowserLink, Karma + Jasmine and I want Angular to be using the latest TypeScript. This should make my question more specific I think.

Consider using the Angular CLI to build your Angular application and some editor such as VS Code that is friendly to the Angular CLI.
Consider not adding it to your Web Forms project and instead keeping it separate with its own functionality.
It can still communicate with whatever backend (Web API) you have.

Related

Using Microsoft.AspNetCore.SpaServices equivalent with ASP.NET WebForms project

I'm currently using the Microsoft.AspNetCore.SpaServices library in an ASP.NET Core app to mix React and ASP.NET seamlessly, using Webpack and HMR. Is there an equivalent for the classic .NET Framework? I'd love to start introducing React in a legacy ASP.NET Webforms app without relying on Visual Studio Extensions to re-build the react app on save, and enabling HMR.
As far as I know there is not. However, according to this issue, you should be able to use SpaServices in an ASP.NET Core project targeting .NET Framework.

Angular 2 datagrid for asp.net core SPA application

I have SPA application using asp.net core and angular 5 (typescript) and i'm looking for universal datagrid. I found https://www.npmjs.com/package/angular2-datagrid but it is not maintained now. There are some more paid datagrids but i'm looking for open source. How do you create datagrids in Angular SPA applications
you should try https://www.ag-grid.com/
Supporting Open Source
For others who may find this helpful...
Clarity is a third party open source component library for angular created by VMware. The data grid is full featured. I have added it to the core 2.2 spa template pretty easily by following the getting started instructions on clarity. You may need to upgrade your cli and angular version to use the newest clarity version but I found it worth it.
https://clarity.design/documentation/datagrid/structure
https://clarity.design/

Angular template NOT core

I'm looking for an Angular template for Visual Studio 2017 but I do NOT want to use the Core libraries as that requires me to rebuild all my re-usable libraries etc., and I will NEVER host my website on a non Microsoft platform (likely to put it into Azure only).
It would be nice if sign up / sign in is included.
I've tried to "convert" a core project to classic ASP .Net website with a "hack" mentioned on SO but encountered MANY issues
Any suggestions would be appreciated
Maybe you find a suitable template in the sidewaffle extension (http://sidewaffle.com/)

Thymeleaf and AngularJS2

I created a sample app using latest Angular2 as my client-side MVC framework and Thymeleaf for the server-side templating engine. I used Eclipse IDE to build dynamic WebApp with Spring and Thymeleaf. I built an Angular project separately using Angular CLI tool and generated deployment Javascript files which were added to the eclipse project under js folder as shown here,
But this is not the way to go with a real complex project as we need simultaneous development of Angular2 and Spring/Thymeleaf and cannot really on deployment Javascript files.
What is the ideal way to develop Spring/thymeleaf and Angular2 project in Eclipse IDE? What are the tools available ? Has anyone encountered this sort of problem ?

How to use ASP.NET MVC 4 with preinstalled JQuery UI library

So having successfully used JQuery Mobile with my mobile application I was looking to use JQuery UI with my web application. My web application is an ASP.NET MVC 4 project created in Visual Studio 2012.
However, I realised that when I created the MVC 4 project, it actually already includes JQuery UI - it's just not being used currently.
I noticed that the Microsoft ASP.NET MVC website doesn't make any mention to the preinstalled JQuery and JQuery UI libraries in any of its tutorials or code samples, which I find odd. I also noticed that none of my MVC 4 books gave any reference to the preinstalled JQuery libraries.
So my question is, I have JQuery UI preinstalled, how do I start making use of the files? I mean I guess I'll reference them from my Views, but which files do I reference?
Is there any existing documentation that would help me make the most of the preinstalled JQuery libraries?
If you're using MVC4 everything should be preset for you in BundleConfig.cs (App_Start folder)
Just include the bundles that you want to use.
usually for Javascript you only need jquery-ui-{version}.js file, and the rest is css styling that you want to apply.
Note: make sure that you're using the latest jquery UI. if it is not the latest, I suggest to update your Jquery UI directly through package manager.

Resources