<commit_before>﻿---
title: "Integrate Angular 2+ and Webpack in a ASP.NET MVC 5 application."
categories: typescript angular webpack mvc
---
### TL;DR

Source code [https://github.com/trungk18/mvc5-angular-webpack][1]

1. Structure the project.
2. Configure `webpack`.
3. Configure npm script.
4. Configure build.bat.
5. Reference compiled JavaScript file in the Razor view (.cshtml).

-----

![module 1](https://github.com/trungk18/trungk18.github.io/raw/master/img/mvc5angular/build-process.png)

ASP.NET MVC 5 is widely used web development framework, it’s stable, matured and most importantly its is used in production on large scale. In this post, I will summarize the steps needed to integrate Angular 2 and Webpack build process in a MVC 5 application.

 **1. Structure the project** 

We separated our project into two folders: **Client and Server**. Those will be located in **MVC-Webpack** folder and this folder will be committed to the repository

```
mvc5-angular-webpack/
├── Server/
│   ├── WebApplication/
│   │     ├── Controllers/
│   │     ├── Scripts/
│   │     ├── Web.config
│   │     ├── Many more folder and file...
│   │        
│   └── Web-Core.sln
│   
├── Client/
    ├── modules
    │     ├── angularModule-1/
    │     │      ├── main.ts
    │     │      ├── app.modules.ts
    │     │      ├── app.component.ts
    │     │      ├── Many more file...
    │     │
    │     ├── angularModule-2/
    │     │      ├── main.ts
    │     │      ├── app.modules.ts<commit_msg>Update mvc article<commit_after>﻿---
title: "Integrate Angular 2+ and Webpack in a ASP.NET MVC 5 application."
categories: typescript angular webpack mvc
---
### TL;DR

Source code [https://github.com/trungk18/mvc5-angular-webpack][1]

1. Structure the project.
2. Configure `webpack`.
3. Configure npm script.
4. Configure build.bat.
5. Reference compiled JavaScript file in the Razor view (.cshtml).

-----

![module 1](https://github.com/trungk18/trungk18.github.io/raw/master/img/mvc5angular/build-process.png)

ASP.NET MVC 5 is widely used web development framework, it’s stable, matured and most importantly its is used in production on large scale. In this post, I will summarize the steps needed to integrate Angular 2 and Webpack build process in a MVC 5 application.

 **1. Structure the project** 

We separated our project into two folders: **Client and Server**. Those will be located in **mvc5-angular-webpack** folder and this folder will be committed to the repository

```
mvc5-angular-webpack/
├── Server/
│   ├── WebApplication/
│   │     ├── Controllers/
│   │     ├── Scripts/
│   │     ├── Web.config
│   │     ├── Many more folder and file...
│   │        
│   └── Web-Core.sln
│   
├── Client/
    ├── modules
    │     ├── angularModule-1/
    │     │      ├── main.ts
    │     │      ├── app.modules.ts
    │     │      ├── app.component.ts
    │     │      ├── Many more file...
    │     │
    │     ├── angularModule-2/
    │     │      ├── main.ts
    │     │      ├── app.modules.ts
{'fraction_non_alphanumeric': 0.13901791639017916, 'fraction_numerical': 0.01625746516257465, 'mean_word_length': 2.4575688073394497, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5210839', 'n_tokens_mistral': 994, 'n_tokens_neox': 1037, 'n_words': 387}