Приложение на Angular

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

В данной статье рассмотрим подключение Angular 8 в ASP.NET MVC 5. Более подробно про Angular 2/8 можно почитать в соответствующем руководстве - https://metanit.com/web/angular2/. В данном же случае рассмотрим только те аспекты, которые характерны именно для ASP NET MVC.

Для работы с Angular 2+ в ASP.NET MVC 5 предварительно необходимо установить TypeScript, а также Node.JS и NPM.

Создадим новый проект на ASP NET MVC 5. Пусть он называется AngularApp:

Далее добавим в корень проекта новый элемент npm Configuration File, который назовем package.json:

Определим в нем следующее содержимое:

{
  "name": "angularapp",
  "version": "1.0.0",
  "description": "First Angular 8 Project",
  "author": "Eugene Popov <metanit.com>",
  "scripts": {
    "build": "webpack"
  },
  "dependencies": {
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "core-js": "3.1.3",
    "rxjs": "6.5.2",
    "zone.js": "0.9.1"
  },
  "devDependencies": {
    "@types/node": "12.0.0",
    "typescript": "^3.5.0",
    "webpack": "4.32.0",
    "webpack-cli": "3.3.2",
    "webpack-dev-server": "3.4.1",
    "angular2-template-loader": "0.6.2",
    "awesome-typescript-loader": "5.2.1"
  }
}

Нажмем правой кнопкой мыши на package.json и в появившемся меню выберем пункт "Restore Packages":

После этого в проект будет добавлен каталог node_modules, который будет содержать все необходимые пакеты.

Далее добавим в корень проекта файл конфигурации TypeScript - элемент TypeScript JSON Configuration File, который назовем tsconfig.json:

Определим в нем следующее содержимое:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "node_modules/@types/"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

Теперь собственно определим файлы приложения на Angular. Для этого добавим в проект новую папку src. И затем в ней создадим каталог app. В папке src/app определим новый файл на языке TypeScript, который назовем app.component.ts:

import { Component } from '@angular/core';
     
@Component({
    selector: 'my-app',
    template: `<h1>Добро пожаловать {{name}}!</h1>
				<label>Введите имя:</label>
                <input [(ngModel)]="name" placeholder="name">`
})
export class AppComponent { 
    name= 'Tom';
}

Также добавим в папку app новый файл app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Далее уровнем выше - в папку src добавим файл main.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

И в эту же папку src добавим файл polyfills.ts:

import 'core-js';
import 'zone.js/dist/zone';

В конце добавим в корень проекта новый файл javascript, который назовем webpack.config.js и в котором определим следующее содержимое:

const path = require('path');
const webpack = require('webpack');
module.exports = {
    entry: {
        'polyfills': './src/polyfills.ts',
        'app': './src/main.ts'
      },
   output:{
       path: path.resolve(__dirname, './public'),     // путь к каталогу выходных файлов - папка public
       publicPath: '/public/',
       filename: "[name].js"       // название создаваемого файла
   },
   resolve: {
    extensions: ['.ts', '.js']
  },
   module:{
       rules:[   //загрузчик для ts
           {
               test: /\.ts$/, // определяем тип файлов
               use: [
                {
                    loader: 'awesome-typescript-loader',
                    options: { configFileName: path.resolve(__dirname, 'tsconfig.json') }
                  } ,
                   'angular2-template-loader'
               ]
            }
       ]
   },
   plugins: [
    new webpack.ContextReplacementPlugin(
        /angular(\|\/)core/,
        path.resolve(__dirname, 'src'), // каталог с исходными файлами
      {} // карта маршрутов
    )
  ]
}

Данный файл определяет конфгурацию сборщика webpack, который позволяет сгенерировать сборки на языке javascript из файлов TypeScript.

В итоге весь проект будет выглядеть так:

С помощью команды run build, которая с помощью сборщика webpack сгенерирует из файлов на языке TypeScript два файла app.js и polyfills.js. Однако сама по себе эта команда не заработает, тем более она использует node.js и к asp net mvc никак не соприкасается. В этом случае мы можем перед запуском приложения ASP.NET предварительно с помощью данной команды генерировать из файлов TS нужные нам файлы JS. Например, мы вручную можем запускать консоль и выполнять эту команду. Но можно автоматичзировать этот процесс. Для этого перейдем к свойствам проекта и далее перейдем на вкладку Build Events:

В поле Pre-build event command line введем команду npm run build и после этого сохраним проект. То есть когда будет выполняться построение проекта в Visual Studio автоматически запускается командная строка, в которой будет выполняться данная команда.

Теперь задействуем файлы приложения Angular в представлениях. Так как приложение запускается с метода Index контроллера Home, который использует представление Index.cshtml, то изменим это представление следующим образом:

@{
    ViewBag.Title = "Home Page";
}

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello Angular 5</title>
</head>
<body>
    <my-app>Загрузка...</my-app>
    <script src="~/public/polyfills.js"></script>
    <script src="~/public/app.js"></script>
</body>
</html>

И после запуска приложения сработает код, определенный в app.component.ts: