Gradual migration of .net mvc application to Angular 2 - Part 1
I have just been investigation the options for gradually migrating an existing .NET MVC application to Angular 2, as apposed to a complete rewrite.
I managed to get Angular 2 running within the app by building an Angular 2 app in a sub folder in the solution, building with Webpack, and then adding the generated polyfill.js, vendor.js and app.js files to the existing apps _Layout.cshtml template file.
This worked fine, and I was able to also add a <my-app></myapp> component tag in the same template file, and Angular 2 bootstrapped fine and instantiated the component.
The problem was that Angular 2 requires a single root level component to bootstrap the app, so the key to a slow migration of the app is to bootstrap the root angular component at the individual page view level, rather than at the top level _Layout.cshtml. This means adding the script links for polyfill.js, vendor.js and app.js as well at the <myapp></myapp> root component at the individual view level.
This way each page within the app can be moved to Angular 2 components one at a time, with all the existing MVC routing still in place. At a point when all pages have been migrated the overall MVC app architecture and routing can then be replaced with Angular 2 SPA architecture and routing. That is the plan anyway - we will see how it works out in practice.
Edit: Ok, so it was not quite that easy - see part 2.
I managed to get Angular 2 running within the app by building an Angular 2 app in a sub folder in the solution, building with Webpack, and then adding the generated polyfill.js, vendor.js and app.js files to the existing apps _Layout.cshtml template file.
This worked fine, and I was able to also add a <my-app></myapp> component tag in the same template file, and Angular 2 bootstrapped fine and instantiated the component.
The problem was that Angular 2 requires a single root level component to bootstrap the app, so the key to a slow migration of the app is to bootstrap the root angular component at the individual page view level, rather than at the top level _Layout.cshtml. This means adding the script links for polyfill.js, vendor.js and app.js as well at the <myapp></myapp> root component at the individual view level.
This way each page within the app can be moved to Angular 2 components one at a time, with all the existing MVC routing still in place. At a point when all pages have been migrated the overall MVC app architecture and routing can then be replaced with Angular 2 SPA architecture and routing. That is the plan anyway - we will see how it works out in practice.
Edit: Ok, so it was not quite that easy - see part 2.
Comments
Post a Comment