Overview

Đặng Trường Chính (DTC), team leader of Rangers team, recently wrote a good summary about how to structure an Angular application with multiple layouts and integrate it with Asp.Net MVC using CLI. We are happy to share it here.

Angular application composes HTML templates with Angularized markup, writes component classes to manage those templates, adds application logic in services, and finally boxes components and services into modules.

After launching the app by bootstrapping the root module, Angular takes over to present your application content in a browser and responds to user interactions according to the instructions you’ve provided.

Module architecture

According to Angular’s documentation, every Angular app has at least one NgModule class, the root module, conventionally named AppModule. While the root module may be the only module in a small application, most apps have many more feature modules, each a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities.

An NgModule, whether a root or feature, is a class with an @NgModule decorator.

The application establishes the following module architecture based on guidelines in the documentation for NgModule. and and supports multiple layouts

Compilation - Using Angular CLI

According to Angular’s AOT compiler documentation, an Angular application consists largely of components and their HTML templates. Before the browser can render the application, the components and templates must be converted to executable JavaScript by an Angular compiler (Ahead-of-Time (AOT), which compiles your app at build time)

You can refer to Why compile with AOT for more information about it.

Integrate app built files and ASP.NET MVC

When you run the ng build --prod command, it will create bundle files (inline, polyfills, scripts, styles, vendor, main) and feature module bundle files (lazy loading)

Copying built files to ASP.NET MVC root published folder. In cshtml file, we just load them as follow: