Актуализация: Тъй като Angular пускаше нова версия от време на време, създадох „Добавете най-новия проект Angular CLI(7.x) към проекта ASP.Net Core 2.1“, за да спомена как да добавите Angular Cli проект към ASP.NET Core проект.
Наскоро изпробвах шаблона ASP.NET Core SPA от VS2017, който е базиран на Angular. Харесва ми начина, по който VS2017 най-накрая може да използва Angular и WebPack за разработка на SPA. Шаблонът обаче беше насочен към Angular 4. Въпреки че новият преглед на ASP.NET Core 2.1 също въведе нов шаблон, базиран на Angular 5, просто не искам да инсталирам ASP.NET Core 2.1 Preview, защото изисква инсталиране на VS 2017 15.6 Преглед. „ASP.NET Core 2.1.0-preview1 вече е наличен“ обясни подробностите, ако искате да знаете повече.
Тъй като Angular представи нова команда Angular Cli, това помогна много на разработчиците да изградят SPA приложение, базирано на най-новия Angular. Той също така предоставя функция за генериране на код и компилиране, което спомага за подобряване на производителността. От друга страна, ASP.NET Core също има бърз темп на пускане. За да използвам тези два инструмента и да не разчитам на екипа на Visual Studio да пусне най-новия шаблон за най-новата поддръжка на Angular, мисля дали има начин да използвам Angular CLI, за да създам оголен ASP.NET Core проект, който може да се редактират и отстраняват грешки от VS2017. В същото време подходът може да бъде повторно използван, когато излезе нова версия на Angular. Ще обясня какво направих, за да постигна тази цел.
Понастоящем VS2017 поддържа създаване на уеб SPA проект, базиран на Angular 4.x, и леко е променил оформлението, за да използва Bootstrap. Когато разработчиците използват Angular CLI, това също помага да се създаде структура на Angular проект. Следващите стъпки ще ви покажат как да обедините тези две неща заедно, за да генерирате Angular CLI проект, работещ под ASP.NET Core 2.0 проект.
- Създайте ASP.Net проект, като щракнете върху Добавяне на нов проект-›Web-›ASP.NET Core Web Application. Изберете следните опции в диалоговия прозорец „Ново уеб приложение ASP.NET Core“:
- .NET Core
- ASP.NET Core 2.0
- Уеб приложение (модел-изглед-контролер)
- Щракнете върху „OK“
- Например, ние именуваме уеб проекта като ASPCoreAngular5, който се намира в c:\projects\ASPCoreAngular5Sln папка за решение.
- След като сте създали своя проект ASP.NET Core, трябва да изключите автоматичния компилатор на шрифтове по подразбиране от вашия проектен файл VS2017. Това, което трябва да направите, е да разтоварите проекта и да отворите проекта в XML редактор и да добавите следните редове във вашия проектен файл.
<PropertyGroup> <TargetFramework>netcoreapp2.0</TargetFramework> <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked> <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion> </PropertyGroup>
- Уверете се, че имате най-новия node.js, включително NPM.
- Стартирайте command.exe като администратор и отидете в папката за решение ASPCoreAngular5, за нашия примерен случай това ще бъде „c:\projects\ASPCoreAngular5Sln“.
- Уверете се, че имате инсталиран Angular Cli. Ако не го направите, изпълнете следната команда, която ще инсталира Angular CLI глобално:
npm install -g @angular/cli@latest
- Въведете следната команда, за да създадете Angular Cli със същата папка като решението ASP.NET Core. Целта за това е package.json и .angular-cli.json да са разположени на същото ниво като папката на проекта ASP.NET Core, което е едно ниво под папката на решението. Използвах също — source-dir ClientApp, което прави папката източник на Angular App ClientApp.
- маршрутизиране: създаване на модул за маршрутизиране.
- skip-git: пропуснете създаването на git
- директория: посочете папката като ClientApp. TS кодът от страна на клиента ще се намира в папката ClientApp, която е в папката на проекта ASPCoreAngular5.
ng new ASPCoreAngular5 —-routing --skip-git --source-dir ClientApp
- След като проектът е създаден, можете да стартирате ng serve, за да тествате приложението. Като ng сървър се създават файлове в паметта за използване на браузъра. Трябва да изградите проекта angular, ако искате да видите действителните JS файлове.
- Когато Angular CLI изгради проект, той ще генерира всички файлове към този, дефиниран във файла .angular-cli.json. Отворете файла .angular-cli.json и променете изхода на „../wwwroot/dist“. Това ще генерира вградени файлове в папка wwwroot.
- корен: дефинирайте главната папка, за нашия случай „ClientApp“ ще бъде коренът на TypeScripts.
- outDir: това е изходна папка. Ще генерираме изходни файлове в папка wwwroot/dist, която ще бъде препратка от index.cshtml.
- стилове: css стилът, който искате да включите. Ако използвате bootstrap, трябва да включите bootstrap css тук.
- скриптове: JavaScript библиотеките, които искате да включите. Използвахме bootstrap и jQuery, така че трябва да ги обединим. Можете да ги пропуснете, ако искате да включите техния CDN към index.cshtml.
“apps”: [
{
“root”: “ClientApp”,
“outDir”: “./wwwroot/dist”,
“assets”: [
“assets”,
“favicon.ico”
],
“index”: “index.html”,
“main”: “main.ts”,
“polyfills”: “polyfills.ts”,
“test”: “test.ts”,
“tsconfig”: “tsconfig.app.json”,
“testTsconfig”: “tsconfig.spec.json”,
“prefix”: “app”,
“styles”: [
“styles.css”,
“../node_modules/bootstrap/scss/bootstrap.scss”
],
“scripts”: [
“../node_modules/jquery/dist/jquery.min.js”,
“../node_modules/bootstrap/dist/js/bootstrap.bundle.js”
],
- Върнете се в командния ред и се уверете, че сте в папката на проекта (за нашия случай това ще бъде “c:\projects\ASPCoreAngular5Sln\ASPCoreAngular5”). Въведете следната команда, за да създадете вашите ъглови решения. Файловете ще бъдат генерирани в папка wwwroot/dist. Всички библиотеки и css ще бъдат групирани в js файлове.
Ng build
- След това трябва да променим ASP.NET Core View, за да добавим генерираните JS към него. Отворете вашия Views/home/index.cshtml и заменете със следния код. ‹app-root› ще бъде ъгловата входна точка.
@{
ViewData[“Title”] = “Home Page”;
}
<app-root></app-root>
- Отворете _layout.cshtml, премахнете оригиналните референции на Javascript и заменете кода със следното:
- ‹base href=”~/”›: кажете как е основният URL адрес.
- Скриптове: препратка към скриптовите файлове, генерирани от Angular Cli.
<!DOCTYPE html> <html> <head> <meta charset=”utf-8" /> <meta name=”viewport” content=”width=device-width, initial-scale=1.0" /> <title>@ViewData[“Title”] — ASPCoreAngular5_2</title> <base href=”~/” /> </head> <body> @RenderBody() <script src=”~/dist/inline.bundle.js” asp-append-version=”true”></script> <script src=”~/dist/polyfills.bundle.js” asp-append-version=”true”></script> <script src=”~/dist/styles.bundle.js” asp-append-version=”true”></script> <script src=”~/dist/vendor.bundle.js” asp-append-version=”true”></script> <script src=”~/dist/main.bundle.js” asp-append-version=”true”></script> @RenderSection(“Scripts”, required: false) </body> </html>
- Досега трябваше да можете да стартирате вашия ASP.NET Core SPA проект чрез натискане на F5. ако обаче искате да използвате Angular CLI сървър за целите на отстраняването на грешки, трябва да кажете на вашето ASP.NET Core приложение да използва Angular CLI сървър за изграждане на вашите файлове вместо Visual Studio. Ползата от използването на Angular CLI сървър е, че не е необходимо да рестартирате своя проект за отстраняване на грешки от Visual Studio. Всеки път, когато запишете вашия TypeScript код, Angular CLI сървърът ще го компилира и Visual Studio debugger може да вземе всички промени. За да направите това, трябва да добавите пакета Microsoft.AspNetCore.SpaServices.Extensions, който може да бъде инсталиран от управлението на пакети nuget.
- След като сте инсталирали разширението, отворете startup.cs и добавете следната подчертана част в метода configure(), за да поддържате Angular CLI Server и SPA URL маршрутизиране:
- SourcePath: генерирахме кода на Angular в папката „ClientApp“ и методът spa.UseAngularCliServer() ще бъде извикан само в режим на разработка.
- MapSpaFallbackRoute: кажете на ASP.NET Core да маршрутизира SPA маршрута.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseBrowserLink();
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler(“/Home/Error”);
}
app.UseSpa(spa =>
{
spa.Options.SourcePath = “ClientApp”;
if (env.IsDevelopment())
{
spa.UseAngularCliServer(npmScript: “start”);
}
});
app.UseStaticFiles();
app.UseMvc(routes =>
{
routes.MapRoute(
name: “default”,
template: “{controller=Home}/{action=Index}/{id?}”);
routes.MapSpaFallbackRoute(
name: “spa-fallback”,
defaults: new { controller = “Home”, action = “Index” });
});
}
- Можете да натиснете F5 сега, за да стартирате приложението си в браузъра. Ние работим в режим на разработка, всеки път, когато промените своя TypeScript код от Visual Studio, бекендът Angular Server ще компилира отново кода и ще опресни вашия браузър.
- Ако искате да генерирате кода всеки път, когато компилирате проекта ASP.NET Core за внедряване, можете да добавите NPM задачи в процеса на предварително изграждане под „Task Runner Explorer“. Ще разполагате с Angular CLI, за да компилирате кода си, когато създавате своя проект ASP.NET Core.
Сега трябва да имате работещ ASP.NET Core проект с най-новите кодове, генерирани от Angular 5 CLI. Можете да създадете ASP.NET Core Web API и да използвате Angular CLI, за да генерирате вашите компоненти.
