This repo aims to help to integrate Angular with legacy MPA applications, allowing to the frontend developer to make an ease transition to a new SPA code base in the future, reusing the crafted Angular modules created before.
Basically, you have to declare the vendors in your main layout. Here, we will take an legacy ASPNet MVC structure as example (based in this article)
First, you need to place this code alongside your code base. You can create a folder called Angular, or App or place it in another directory that fits into your project.
Configure the dist folder in gulpfile.js file to outputs the generated code in your desired folder.
const config = {
outputPath: '../bundles'
};And configure it in your bundle register.
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
// Angular app bundle
bundles.Add(new ScriptBundle("~/Script/Bundles")
.Include(
"~/bundles/runtime.*",
"~/bundles/polyfills.*",
"~/bundles/styles.*",
"~/bundles/vendor.*");
// Home Module bundle
bundles.Add(new ScriptBundle("~/Script/Home")
.Include(
"~/bundles/home.*"); // The main file from Home feature
}
}Declare the Angular scripts in the main Layout file.
<!-- ~/Views/Shared/_Layout.cshtml -->
<body>
@RenderBody()
@Scripts.Render("~/Script/Bundles")
@RenderSection("scripts", false)
</body>Finally, in the desired Index.cshtml from your View, you have to declare the main component source and define it in your markup,
and it will bootstrap the requested module in the screen.
@{
ViewBag.Title = "Index";
}
<app-root></app-root>
@section scripts {
@Scripts.Render("~/Script/Home")
}This project is based in some gulp tasks to achieve a design that brings an easy form to integrate with MPA applications. These tasks runs alongside the Angular CLI ecosystem, that builds and generates all the sources. Of course, some features like Karma Testing and E2E have to be dropped of to achieve this structure (these features cant run in MPA applications in that way)
The command below will create a new module in features folder, with scss as the main style processor by default.
gulp ng:create --name homeThe command below will watch a specific module and rebuilds it if necessary.
gulp ng:watch --name homeThe command below will build the project in prod mode.
gulp ng:build --prod