Данное руководство устарело. Актуальное руководство: Руководство по 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: