I'm new to Angular 2 and getting used to the Angular Development Paradigm with all the vast ecosystem and supporting tools it needs - bundling , minifying, treeshaking..etc
I've narrowed down to using Angular CLI/ VS Code as it seems to allow me develop quick prototypes and seems to handle a lot of manual work to configure those tools/ plug ins i need to deploy production files in the /dist folder.
My goal is to integrate the Front End Development with my existing ASP.NET MVC App with WebAPI Services to handle any requests from the Angular App
The ASP.NET App with MVC 5 has a couple of "SILO" shell-like structures for the Angular 2 App ( Silo's based on Miguel Castro's blog) which lives in parallel with the regular MVC App. Eg URL:
/{Controller}/{Action}/{Id} => Represent regular generated webpages by MVC
/NG2Test/ => Handled Initially by MVC to generate the shell which contains for Angular to pick up based on the "index.html" page used by AngularCLI
In other words, The 1st click to /NG2Test will have ASP.NET MVC generate the shell with Angular directives . Then from then on, based on the types of routes in the URL , it will be either MVC Route or Angular Route which determines who should handle the action.
Currently, due to lack of a formal procedure to deploy , I've created a dist folder in my MVC Project which contains the generated AngularCLI's deployed files from (ng build --prod).
So when deployment is as follows:
- in VSCODE>Terminal, run "ng build --prod" my Angular App, and copy dist folder to VS2015 /dist folder
- in VS2015, edit my shell ( example *.cshtml in my view ) to include the bundle.css link and 3 scripts from the AngularCLI bundle my
MVC App
@{
ViewBag.Title = "NGTest Silo";
}
<link href="~/dist/styles.d41d8cd98f00b204e980.bundle.css" rel="stylesheet" />
<h2>@ViewBag.Title.</h2>
<h3>@ViewBag.Message</h3>
<p>Use this area to provide additional information. with base href = ~/dist</p>
<app-root>Loading...</app-root>
<script type="text/javascript" src="~/dist/inline.f37adff22689ecade3b3.bundle.js"></script>
<script type="text/javascript" src="~/dist/vendor.28092c14ec178517088c.bundle.js"></script>
<script type="text/javascript" src="~/dist/main.9049e38faa01f3bfab56.bundle.js"></script>
- Build normally the ASP.NET MVC and publish it.
My questions:
- Is there a recommended Development Set up for my scenario ( given I still have to maintain my regular MVC App using VS2015 AND adding new development front end in Angular in the mix -using VS Code and Angular CLI)
- How do you handle Deployment of Angular Apps so that the final output files are optimized ( I read a lot of set up includes SYSTEM.JS but from my initial reading WEBPACK does more towards generating the optimized files - which I think AngularCLI is doing, right?)
- How to automate the editting of my SILO in the cshtml to include those generated js and css files from AngularCLI ?
- How can I have a lazy loaded scripts in this set up? The generated bundles of js seems big. I can imagine if one SILO can have its own set of distinct files to be loaded when that section is loaded on demand?
Any pointers is really appreciated which will make it easier to deploy an optimized Angular app .
