یکپارچه سازی Angular CLI و ASP.NET Core در VS 2017

اندازه‌ی قلم متن

تخمین مدت زمان مطالعه‌ی مطلب: سیزده دقیقه

در این مطلب مثالی را در مورد نحوه‌ی تنظیمات یک پروژه‌ی خالی ASP.NET Core، جهت استفاده‌ی از یک پروژه‌ی Angular CLI قرار گرفته‌ی در پوشه‌ی آن‌را بررسی خواهیم کرد.

پیشنیازها

- مطالعه‌ی سری کار با Angular CLI خصوصا قسمت نصب و قسمت ساخت برنامه‌های آن، پیش از مطالعه‌ی این مطلب ضروری است.
- همچنین فرض بر این است که سری ASP.NET Core را نیز یکبار مرور کرده‌اید و با نحوه‌ی برپایی یک برنامه‌ی MVC آن و ارائه‌ی فایل‌های استاتیک توسط یک پروژه‌ی ASP.NET Core آشنایی دارید.

ایجاد یک پروژه‌ی جدید ASP.NET Core در VS 2017

در ابتدا یک پروژه‌ی خالی ASP.NET Core را در VS 2017 ایجاد خواهیم کرد. برای این منظور:
- ابتدا از طریق منوی File -> New -> Project (Ctrl+Shift+N) گزینه‌ی ایجاد یک ASP.NET Core Web application را انتخاب کنید.
- در صفحه‌ی بعدی آن هم گزینه‌ی «empty template» را انتخاب نمائید.

تنظیمات یک برنامه‌ی ASP.NET Core خالی برای اجرای یک برنامه‌ی Angular CLI

برای اجرای یک برنامه‌ی مبتنی بر Angular CLI، نیاز است بر روی فایل csproj برنامه‌ی ASP.NET Core کلیک راست کرده و گزینه‌ی Edit آن‌را انتخاب کنید.
سپس محتوای این فایل را به نحو ذیل تکمیل نمائید:

الف) درخواست عدم کامپایل فایل‌های TypeScript

  <PropertyGroup>
    <TargetFramework>netcoreapp1.1</TargetFramework>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
  </PropertyGroup>

چون نحوه‌ی کامپایل پروژه‌های Angular CLI صرفا مبتنی بر کامپایل مستقیم فایل‌های TypeScript آن نیست و در اینجا از یک گردش کاری توکار مبتنی بر webpack، به صورت خودکار استفاده می‌کند، کامپایل فایل‌های TypeScript توسط ویژوال استودیو، مفید نبوده و صرفا سبب دریافت گزارش‌های خطای بیشماری به همراه کند کردن پروسه‌ی Build آن خواهد شد. بنابراین با افزودن تنظیم TypeScriptCompileBlocked به true، از VS 2017 خواهیم خواست تا در این زمینه دخالت نکند.

ب) مشخص کردن پوشه‌هایی که باید الحاق و یا حذف شوند

  <ItemGroup>
    <Folder Include="Controllers\" />
    <Folder Include="wwwroot\" />
  </ItemGroup>
 
  <ItemGroup>
    <Compile Remove="node_modules\**" />
    <Content Remove="node_modules\**" />
    <EmbeddedResource Remove="node_modules\**" />
    <None Remove="node_modules\**" />
  </ItemGroup>
 
  <ItemGroup>
    <Compile Remove="src\**" />
    <Content Remove="src\**" />
    <EmbeddedResource Remove="src\**" />    
  </ItemGroup>

در اینجا پوشه‌های کنترلرها و wwwroot به پروژه الحاق شده‌اند. پوشه‌ی wwwroot جایی است که فایل‌هایی خروجی را Angular CLI ارائه خواهد کرد.
سپس دو پوشه‌ی node_modules و src واقع در ریشه‌ی پروژه را نیز به طور کامل از سیستم ساخت و توزیع VS 2017 حذف کرده‌ایم. پوشه‌ی node_modules وابستگی‌های Angular را به همراه دارد و src همان پوشه‌ی برنامه‌ی Angular ما خواهد بود.

ج) افزودن وابستگی‌های سمت سرور مورد نیاز

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore" Version="1.1.1" />
    <PackageReference Include="Microsoft.AspNetCore.Mvc" Version="1.1.2" />
    <PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="1.1.1" />
  </ItemGroup>
 
  <ItemGroup>
    <DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="1.0.0" />
  </ItemGroup>
 
  <ItemGroup>
    <!-- extends watching group to include *.js files -->
    <Watch Include="**\*.js" Exclude="node_modules\**\*;**\*.js.map;obj\**\*;bin\**\*" />
  </ItemGroup>

برای اجرای یک برنامه‌ی تک صفحه‌ای وب Angular، صرفا به وابستگی MVC و StaticFiles آن نیاز است.
در اینجا Watcher.Tools هم به همراه تنظیمات آن اضافه شده‌اند که در ادامه‌ی بحث به آن اشاره خواهد شد.

افزودن یک کنترلر Web API جدید

با توجه به اینکه دیگر در اینجا قرار نیست با فایل‌های cshtml و razor کار کنیم، کنترلرهای ما نیز از نوع Web API خواهند بود. البته در ASP.NET Core، کنترلرهای معمولی آن، توانایی ارائه‌ی Web API و همچنین فایل‌های Razor را دارند و از این لحاظ تفاوتی بین این دو نیست و یکپارچگی کاملی صورت گرفته‌است.

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
 
namespace ASPNETCoreIntegrationWithAngularCLI.Controllers
{
  [Route("api/[controller]")]
  public class ValuesController : Controller
  {
    // GET: api/values
    [HttpGet]
    [ResponseCache(NoStore = true, Location = ResponseCacheLocation.None)]
    public IEnumerable<string> Get()
    {
      return new string[] { "Hello", "DNT" };
    }
  }
}

در اینجا کدهای یک کنترلر نمونه را جهت بازگشت یک خروجی JSON ساده مشاهده می‌کنید که در ادامه، در برنامه‌ی Angular CLI تهیه شده از آن استفاده خواهیم کرد.

تنظیمات فایل آغازین یک برنامه‌ی ASP.NET Core جهت ارائه‌ی برنامه‌های Angular

در ادامه به فایل Startup.cs برنامه‌ی خالی جاری، مراجعه کرده و آن‌را به نحو ذیل تغییر دهید:

using System;
using System.IO;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
 
namespace ASPNETCoreIntegrationWithAngularCLI
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
        }
 
        public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
        {
            loggerFactory.AddConsole();
 
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
 
            app.Use(async (context, next) => {
                await next();
                if (context.Response.StatusCode == 404 &&
                    !Path.HasExtension(context.Request.Path.Value) &&
                    !context.Request.Path.Value.StartsWith("/api/", StringComparison.OrdinalIgnoreCase))
                {
                    context.Request.Path = "/index.html";
                    await next();
                }
            });
 
            app.UseMvcWithDefaultRoute();
            app.UseDefaultFiles();
            app.UseStaticFiles();
        }
    }
}

در اینجا برای ارائه‌ی کنترلر Web API، نیاز به ثبت سرویس‌های MVC است. همچنین ارائه‌ی فایل‌های پیش فرض و فایل‌های استاتیک (همان پوشه‌ی wwwroot برنامه) نیز فعال شده‌اند.
در قسمت app.Use آن، تنظیمات URL Rewriting مورد نیاز جهت کار با مسیریابی برنامه‌های Angular را مشاهده می‌کنید. برای نمونه اگر کاربری در ابتدای کار آدرس /products را درخواست کند، این درخواست به سمت سرور ارسال می‌شود و چون چنین صفحه‌ای در سمت سرور وجود ندارد، خطای 404 بازگشت داده می‌شود و کار به پردازش برنامه‌ی Angular نخواهد رسید. اینجا است که تنظیم میان‌افزار فوق، کار مدیریت خروجی‌های 404 را بر عهده گرفته و کاربر را به فایل index.html برنامه‌ی تک صفحه‌ای وب، هدایت می‌کند. به علاوه در اینجا اگر درخواست وارد شده، دارای پسوند باشد (یک فایل باشد) و یا با api/ شروع شود (اشاره کننده‌ی به کنترلرهای Web API برنامه)، از این پردازش و هدایت به صفحه‌ی index.html معاف خواهد شد.

ایجاد ساختار اولیه‌ی برنامه‌ی Angular CLI در داخل پروژه‌ی جاری

اکنون از طریق خط فرمان به پوشه‌ی ریشه‌ی برنامه‌ی ASP.NET Core‌، جائیکه فایل Startup.cs قرار دارد، وارد شده و دستور ذیل را اجرا کنید:

 >ng new ClientApp --routing --skip-install --skip-git --skip-commit

به این ترتیب پوشه‌ی جدید ClientApp، در داخل پوشه‌ی برنامه اضافه خواهد شد که در آن تنظیمات اولیه‌ی مسیریابی Angular نیز انجام شده‌است؛ از دریافت وابستگی‌های npm آن صرفنظر شده و همچنین کار تنظیمات git آن نیز صورت نگرفته‌است (تا از تنظیمات git پروژه‌ی اصلی استفاده شود).
پس از تولید ساختار برنامه‌ی Angular CLI، به پوشه‌ی آن وارد شده و تمام فایل‌های آن را Cut کنید. سپس به پوشه‌ی ریشه‌ی برنامه‌ی ASP.NET Core جاری، وارد شده و این فایل‌ها را در آنجا paste نمائید. به این ترتیب به حداکثر سازگاری ساختار پروژه‌های Angular CLI و VS 2017 خواهیم رسید. زیرا اکثر فایل‌های تنظیمات آن‌را می‌شناسد و قابلیت پردازش آن‌ها را دارد.
پس از این cut/paste، پوشه‌ی خالی ClientApp را نیز حذف کنید.

تنظیم محل خروجی نهایی Angular CLI به پوشه‌ی wwwroot

برای اینکه سیستم Build پروژه‌ی Angular CLI جاری، خروجی خود را در پوشه‌ی wwwroot قرار دهد، تنها کافی است فایل .angular-cli.json را گشوده و outDir آن‌را به wwwroot تنظیم کنیم:

"apps": [
    {
      "root": "src",
      "outDir": "wwwroot",

به این ترتیب پس از هر بار build آن، فایل‌های index.html و تمام فایل‌های js نهایی، در پوشه‌ی wwwroot که در فایل Startup.cs‌، کار عمومی کردن آن انجام شد، تولید می‌شوند.

فراخوانی کنترلر Web API برنامه در برنامه‌ی Angular CLI

در ادامه صرفا جهت آزمایش برنامه، فایل src\app\app.component.ts را گشوده و به نحو ذیل تکمیل کنید:

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http'; 
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private _httpService: Http) { }
 
  apiValues: string[] = [];
 
  ngOnInit() {
    this._httpService.get('/api/values').subscribe(values => {
      this.apiValues = values.json() as string[];
    });
  }
}

در اینجا خروجی JSON کنترلر Web API برنامه دریافت شده و به آرایه‌ی apiValues انتساب داده می‌شود.

سپس این آرایه را در فایل قالب این کامپوننت (src\app\app.component.html) استفاده خواهیم کرد:

<h1>Application says:</h1>
<ul *ngFor="let value of apiValues">
  <li>{{value}}</li>
</ul>
<router-outlet></router-outlet>

در اینجا یک حلقه ایجاد شده و عناصر آرایه‌ی apiValues به صورت یک لیست نمایش داده می‌شوند.

نصب وابستگی‌های برنامه‌ی Angular CLI

در ابتدای ایجاد پوشه‌ی ClientApp، از پرچم skip-install استفاده شد، تا صرفا ساختار پروژه، جهت cut/paste آن با سرعت هر چه تمام‌تر، ایجاد شود. اکنون برای نصب وابستگی‌های آن یا می‌توان در solution explorer به گره dependencies مراجعه کرده و npm را انتخاب کرد. در ادامه با کلیک راست بر روی آن، گزینه‌ی restore packages ظاهر می‌شود. و یا می‌توان به روش متداول این نوع پروژه‌ها، از طریق خط فرمان به پوشه‌ی ریشه‌ی پروژه وارد شد و دستور npm install را صادر کرد. بهتر است اینکار را از طریق خط فرمان انجام دهید تا مطمئن شوید که از آخرین نگارش‌های این ابزار که بر روی سیستم نصب شده‌است، استفاده می‌کنید.

روش اول اجرای برنامه‌های مبتنی بر ASP.NET Core و Angular CLI

تا اینجا اگر برنامه را از طریق VS 2017 اجرا کنید، خروجی را مشاهده نخواهید کرد. چون هنوز فایل index.html آن تولید نشده‌است.
بنابراین روش اول اجرای این نوع برنامه‌ها، شامل مراحل ذیل است:
الف) ساخت پروژه‌ی Angular CLI در حالت watch

 > ng build --watch

برای اجرای آن از طریق خط فرمان، به پوشه‌ی ریشه‌ی پروژه وارد شده و دستور فوق را وارد کنید. به این ترتیب کار build پروژه انجام شده و همچنین فایل‌های نهایی آن در پوشه‌ی wwwroot قرار می‌گیرند. به علاوه چون از پرچم watch استفاده شده‌است، با هر تغییری در پوشه‌ی src برنامه، این فایل‌ها به صورت خودکار به روز رسانی می‌شوند. بنابراین این پنجره‌ی خط فرمان را باید باز نگه داشت تا watcher آن بتواند کارش را به صورت مداوم انجام دهد.

ب) اجرای برنامه از طریق ویژوال استودیو
اکنون که کار ایجاد محتوای پوشه‌ی wwwroot برنامه انجام شده‌است، می‌توان برنامه را از طریق VS 2017 به روش متداولی اجرا کرد:

یک نکته: می‌توان قسمت الف را تبدیل به یک Post Build Event هم کرد. برای این منظور باید فایل csproj را به نحو ذیل تکمیل کرد:

<Target Name="AngularBuild" AfterTargets="Build">
    <Exec Command="ng build" />
</Target>

به این ترتیب با هربار Build پروژه در VS 2017، کار تولید مجدد محتوای پوشه‌ی wwwroot نیز انجام خواهد شد.
تنها مشکل روش Post Build Event، کند بودن آن است. زمانیکه از روش ng build --watch به صورت مستقل استفاده می‌شود، برای بار اول اجرا، اندکی زمان خواهد برد؛ اما اعمال تغییرات بعدی به آن بسیار سریع هستند. چون صرفا نیاز دارد این تغییرات اندک و تدریجی را کامپایل کند و نه کامپایل کل پروژه را از ابتدا.

روش دوم اجرای برنامه‌های مبتنی بر ASP.NET Core و Angular CLI

روش دومی که در اینجا بررسی خواهد شد، مستقل است از قسمت «ب» روش اول که توضیح داده شد. برنامه‌های NET Core. نیز به همراه CLI خاص خودشان هستند و نیازی نیست تا حتما از VS 2017 برای اجرای آن‌ها استفاده کرد. به همین جهت وابستگی Microsoft.DotNet.Watcher.Tools را نیز در ابتدای کار به وابستگی‌های برنامه اضافه کردیم.

الف) در ادامه، VS 2017 را به طور کامل ببندید؛ چون نیازی به آن نیست. سپس دستور ذیل را در خط فرمان، در ریشه‌ی پروژه‌، صادر کنید:

> dotnet watch run

این دستور پروژه‌ی ASP.NET Core را کامپایل کرده و بر روی پورت 5000 ارائه می‌دهد:

>dotnet watch run
[90mwatch : [39mStarted
Hosting environment: Production
Now listening on: http://localhost:5000
Application started. Press Ctrl+C to shut down.

به علاوه پارامتر watch آن سبب خواهد شد تا هر تغییری که در کدهای پروژه‌ی ASP.NET Core صورت گیرند، بلافاصله کامپایل شده و قابل استفاده شوند.

ب) در اینجا چون برنامه بر روی پورت 5000 ارائه شده‌است، بهتر است دستور ng serve -o را صادر کرد تا بتوان به نحو ساده‌تری از سرور وب ASP.NET Core استفاده نمود. در این حالت برنامه‌ی Angular CLI بر روی پورت 4200 ارائه شده و بلافاصله در مرورگر نیز نمایش داده می‌شود.
مشکل! سرور وب ما بر روی پورت 5000 است و سرور آزمایشی Angular CLI بر روی پورت 4200. اکنون برنامه‌ی Angular ما، یک چنین درخواست‌هایی را به سمت سرور، جهت دریافت اطلاعات ارسال می‌کند: localhost:4200/api
برای رفع این مشکل می‌توان فایلی را به نام proxy.config.json با محتویات ذیل ایجاد کرد:

{
  "/api": {
    "target": "http://localhost:5000",
    "secure": false
  }
}

سپس دستور ng server صادر شده، اندکی متفاوت خواهد شد:

 >ng serve --proxy-config proxy.config.json -o

در اینجا به ng serve اعلام کرده‌ایم که تمامی درخواست‌های ارسالی به مسیر api/ (و یا همان localhost:4200/api جاری) را به سرور وب ASP.NET Core، بر روی پورت 5000 ارسال کن و نتیجه را در همینجا بازگشت بده. به این ترتیب مشکل عدم دسترسی به سرور وب، جهت تامین اطلاعات برطرف خواهد شد.
مزیت این روش، به روز رسانی خودکار مرورگر با انجام هر تغییری در کدهای قسمت Angular برنامه است.

نکته 1: بدیهی است می‌توان قسمت «ب» روش دوم را با قسمت «الف» روش اول نیز جایگزین کرد (ساخت پروژه‌ی Angular CLI در حالت watch). اینبار گشودن مرورگر بر روی پورت 5000 (و یا آدرس http://localhost:5000) را باید به صورت دستی انجام دهید. همچنین هربار تغییر در کدهای Angular، سبب refresh خودکار مرورگر نیز نمی‌شود که آن‌را نیز باید خودتان به صورت دستی انجام دهید (کلیک بر روی دکمه‌ی refresh پس از هر بار پایان کار ng build).
نکته 2: می‌توان قسمت «الف» روش دوم را حذف کرد (حذف dotnet run در حالت watch). یعنی می‌خواهیم هنوز هم ویژوال استودیو کار آغاز IIS Express را انجام دهد. به علاوه می‌خواهیم برنامه را توسط ng serve مشاهده کنیم (با همان پارامترهای قسمت «ب» روش دوم). در این حالت تنها موردی را که باید تغییر دهید، پورتی است که برای IIS Express تنظیم شده‌است. عدد این پورت را می‌توان در فایل Properties\launchSettings.json مشاهده کرد و سپس به تنظیمات فایل proxy.config.json اعمال نمود.

کدهای کامل این مطلب را از اینجا می‌توانید دریافت کنید: ASPNETCoreIntegrationWithAngularCLI.zip
به همراه این کدها تعدادی فایل bat نیز وجود دارند که جهت ساده سازی عملیات یاد شده‌ی در این مطلب، می‌توان از آن‌ها استفاده کرد:
- فایل restore.bat کار بازیابی و نصب وابستگی‌های پروژه‌ی دات نتی و همچنین Angular CLI را انجام می‌دهد.
- دو فایل ng-build-dev.bat و ng-build-prod.bat بیانگر قسمت «الف» روش اول هستند. فایل dev مخصوص حالت توسعه است و فایل prod مخصوص ارائه‌ی نهایی.
- دو فایل dotnet_run.bat و ng-serve-proxy.bat خلاصه کننده‌ی قسمت‌های «الف» و «ب» روش دوم هستند.

‫۷ سال و ۴ ماه قبل، دوشنبه ۱۸ اردیبهشت ۱۳۹۶، ساعت ۲۳:۳۵

۸۵۰۲

۲۰

Angular ASP.NET Core Angular CLI

مطالب مشابه

مطالب کار با SignalR Core از طریق یک کلاینت Angular

مطالب فرم‌های مبتنی بر قالب‌ها در Angular - قسمت پنجم - ارسال اطلاعات به سرور

مطالب سفارشی سازی صفحه‌ی اول برنامه‌های Angular CLI توسط ASP.NET Core

مطالب روش دیباگ برنامه‌های مبتنی بر Angular CLI در VSCode

مطالب Angular CLI - قسمت اول - نصب و راه اندازی

مطالب روش یکی کردن پروژه‌های React و ASP.NET Core

مطالب Angular Material 6x - قسمت چهارم - نمایش پویای اطلاعات تماس‌ها

مطالب ارتقاء به Angular 6: بررسی تغییرات Angular CLI

نظرات مطالب یکپارچه سازی Angular CLI و ASP.NET Core در VS 2017

#

وحید نصیری

‫۷ سال و ۴ ماه قبل، دوشنبه ۲۵ اردیبهشت ۱۳۹۶، ساعت ۱۴:۳۸

روش دیگری بجای استفاده از فایل‌های bat

در انتهای بحث یک سری فایل bat معرفی شدند که کار اجرای دستورات مرتبط را ساده‌تر می‌کنند. روش دوم اجرای این نوع دستورات، استفاده از همان فایل package.json است. قسمت scripts آن‌را به صورت ذیل تکمیل کنید:

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "_0-prerestore": "npm install",
    "_0-restore": "dotnet restore",
    "_1-ng-build-dev": "ng build --watch",
    "_1-ng-build-prod": "ng build --prod --watch",
    "_2-dotnet-run": "dotnet watch run",
    "_2-ng-serve-proxy": "ng serve --proxy-config proxy.config.json -o"
  },

سپس افزونه‌ی NPM Task Runner را نیز نصب کنید.
اکنون اگر بر روی فایل package.json، در ویژوال استودیو کلیک راست کنید، گزینه‌ی Task Runner Explorer اضافه شده‌است. با انتخاب آن امکانات ذیل ظاهر می‌شوند:

در اینجا با کلیک راست بر روی هر گزینه، امکان اجرای آن وجود خواهد داشت.

#

مهدی پایروند

‫۷ سال و ۴ ماه قبل، شنبه ۶ خرداد ۱۳۹۶، ساعت ۲۰:۲۴

مراحل نصب angular-cli بروی پروژه موجود در mvc 5 چطور هست؟

#

وحید نصیری

‫۷ سال و ۴ ماه قبل، شنبه ۶ خرداد ۱۳۹۶، ساعت ۲۲:۳۵

مرحله	معادل آن در پروژه‌های قدیمی MVC 5
ایجاد یک پروژه‌ی جدید ASP.NET Core در VS 2017	یک پروژه‌ی جدید Web API را ایجاد کنید.
تنظیمات یک برنامه‌ی ASP.NET Core خالی برای اجرای یک برنامه‌ی Angular CLI	به این موارد نیازی نخواهید داشت. چون پروژه‌های MVC 5 برخلاف ASP.NET Core، پوشه‌هایی را که دستی به آن اضافه نکنید، به صورت خودکار به پروژه اضافه نمی‌کند. بنابراین فایل‌های Angular-CLI را به Solution Explorer وارد نکنید و بهترین روش کار کردن با آن‌ها از طریق VSCode است. در اینجا برای back-end (کار با Web API) از VS کامل استفاده کنید و برای front-end از VSCode.
افزودن یک کنترلر Web API جدید	کلیات آن با MVC 5 یکی است.
تنظیمات فایل آغازین یک برنامه‌ی ASP.NET Core جهت ارائه‌ی برنامه‌های Angular	معادل قسمت URL Rewrite آن، از نکته‌ی web.config مطلب «مسیریابی در Angular - قسمت اول - معرفی»، قسمت «تفاوت بین آدرس‌های HTML 5 و Hash-based» استفاده کنید.
ایجاد ساختار اولیه‌ی برنامه‌ی Angular CLI در داخل پروژه‌ی جاری	یکی هست.
تنظیم محل خروجی نهایی Angular CLI به پوشه‌ی wwwroot	یکی هست. فقط شاید علاقمند باشید مسیر "" (پوشه‌ی ریشه) را بجای wwwroot تنظیم کنید.
فراخوانی کنترلر Web API برنامه در برنامه‌ی Angular CLI	یکی هست.
نصب وابستگی‌های برنامه‌ی Angular CLI	یکی هست.
روش اول اجرای برنامه‌های مبتنی بر ASP.NET Core و Angular CLI	یکی هست.
روش دوم اجرای برنامه‌های مبتنی بر ASP.NET Core و Angular CLI	در اینجا نیازی به آن نیست ولی در کل مطالعه‌ی نکات آن مفید است.
فایل‌های bat ارائه شده و یا روش NPM Task Runner در نظرات	یکی هستند.

#

مهدی پایروند

‫۷ سال و ۴ ماه قبل، یکشنبه ۷ خرداد ۱۳۹۶، ساعت ۱۲:۲۹

روندی که برای اجرای کامندهای CLI باید صادر کرد رو بیشتر منظورم هست همونطور که میدونید وقتی کامند ایجاد رو میزنیم خود CLI پوشه src رو میسازه و بیرون از اون یه سری فایل دیگه، با توجه به ساختار پروژه‌ها در VS کامل و در نظر نگرفتن فایلهای بیرون از پوشه پروژه توسط VS این کار چطور باید انجام بشه؟
آیا کامند رو روی یک فولدر تمپ برای استخراج پوشه src میزنیم و محتویات اون رو به سلوشن منتقل میکنیم(در مواردی که سرچ کردم اینو پیشنهاد کرده بودند) و یا روش درست و استانداردی برای ون وجود داره؟
- #
  
  وحید نصیری
  
  ‫۷ سال و ۴ ماه قبل، یکشنبه ۷ خرداد ۱۳۹۶، ساعت ۱۳:۱۹
  
  - در قسمت «ایجاد ساختار اولیه‌ی برنامه‌ی Angular CLI در داخل پروژه‌ی جاری» در متن جاری توضیح داده شده‌است.
  + فقط پروژه‌های قدیمی و بدون پشتیبانی MVC 5 هستند که فایل‌های جدید اضافه نشده‌ی به فایل csproj را به solution در IDE اضافه نمی‌کنند. چنین مشکلی با پروژه‌های جدید ASP.NET Core وجود ندارد و دقیقا مانند VSCode رفتار می‌کنند. یعنی هر فایلی که توسط Angular CLI اضافه شد، به صورت خودکار در IDE نمایش داده می‌شود (بدون نیاز به ذکر ارجاعی به آن‌ها در فایل csproj). بنابراین یا از VSCode استفاده کنید، یا هربار در پروژه‌های با ساختار قدیمی MVC 5 باید این فایل‌های جدید تولید شده را به فایل csproj به صورت دستی اضافه کنید (اگر می‌خواهید آن‌ها را داخل VS ویرایش کنید).
  
  - این مطلب را هم مدنظر داشته باشید:
  «چه زمانی باید به فکر ارتقاء به ASP.NET Core بود؟»
  
  If you’re starting a new project and plan on using MVC and/or Web API, then it’s almost certain you should use ASP.NET Core.
  - #
    
    مهدی پایروند
    
    ‫۷ سال و ۴ ماه قبل، یکشنبه ۷ خرداد ۱۳۹۶، ساعت ۱۴:۱۰
    
    ممنون از جوابتون و وقتی که میذارید ولی من دقیقا جوابمو نگرفتم اینطور که شما میگید در شرایط پروژه من:
    - استفاده از Visual studio Full
    - پروژه از نوع MVC 5.0
    - استفاده از سورس کنترل
    باید با کامند بیرون از محیط Angular-CL رو روی پوشه پروژه MVC ای که دارم نصب کنم و بیخیال فایل هایی بشم که کنار فایل .sln ساخته میشه بشم.
    - #
      
      وحید نصیری
      
      ‫۷ سال و ۴ ماه قبل، یکشنبه ۷ خرداد ۱۳۹۶، ساعت ۱۴:۱۷
      
      برای تکرار مجدد: ساختار مدیریت پروژه‌های قدیمی MVC 5 در VS مانند پروژه‌های VSCode یا ASP.NET Core (در همان VS با همان نگارش) نیستند. یعنی هرفایلی که در فایل csproj ارجاعی نداشته باشد، در IDE نمایش داده نمی‌شود (اما در پروژه‌های VSCode و یا پروژه‌های جدید ASP.NET Core، به محض اضافه شدن یک فایل جدید به پوشه‌ی پروژه، این فایل در IDE هم نمایان می‌شود). بنابراین روی دکمه‌ی show all files در solution explorer کلیک کنید و فایل‌های جدید را include کنید (مانند قبل و تمام پروژه‌های دیگری از این دست).
      
      یک نکته: علت اینکه پروژه‌های ASP.NET Core به این صورت پویا عمل می‌کنند، وجود NET Core CLI. هست. این CLI هم شبیه به Angular-CLI یک ابزار خط فرمان است که کار ایجاد یک پروژه‌ی جدید تا ساخت و توزیع برنامه را مدیریت می‌کند و در حقیقت VS فقط این فرامین خط فرمان را در پشت صحنه اجرا می‌کند. بنابراین بهتر است از ساختار پروژه‌ای استفاده کنید که اساسا برای ابزارهای CLI طراحی شده‌است.

#

ناظم

‫۷ سال و ۳ ماه قبل، دوشنبه ۲۲ خرداد ۱۳۹۶، ساعت ۱۶:۴۱

سلام؛ من تمام مراحل بالا رو مو به مو انجام دادم ولی موقع اجرا با خطای زیر مواجه میشم
- #
  
  وحید نصیری
  
  ‫۷ سال و ۳ ماه قبل، دوشنبه ۲۲ خرداد ۱۳۹۶، ساعت ۱۷:۲۴
  فایل zip پیوستی انتهای بحث را دریافت کنید. در فایل src\app\app.module.ts آن، تعریف ذیل برای معرفی HttpModule وجود دارد و بدون آن، استثنای No provider for Http را دریافت خواهید کرد:
  
  import { HttpModule } from '@angular/http'; @NgModule({ imports: [ HttpModule ]
#

علی یگانه مقدم

‫۷ سال قبل، چهارشنبه ۸ شهریور ۱۳۹۶، ساعت ۱۷:۴۱
نکته جدیدتر:
با استفاده از خط فرمان زیر میتوان یک پروژه ترکیبی از Angular و ASP.Net Core را راه اندازی کرد:

dotnet new angular
- #
  
  همایونی حسین
  
  ‫۶ سال و ۲ ماه قبل، یکشنبه ۲۴ تیر ۱۳۹۷، ساعت ۰۰:۱۹
  سلام
  در صورت ساختن پروژه ترکیبی با کد زیر:
  
  dotnet new angular
  
  فایل angular.json کجا قرار میگیرد؟
#

محمد دلیری

‫۶ سال و ۱۱ ماه قبل، دوشنبه ۲۴ مهر ۱۳۹۶، ساعت ۱۵:۲۵

برای توسعه پروژه در کل بهتر است پروژه‌ها رو یکی کنیم یا جدا از هم توسعه بدیم؟
و اگر جدا کنیم باید قسمت backend خاصیت EnableCors را فعال کنیم ؟ تنظیمات اضافه‌تر دیگری هم لازم دارد؟
- #
  
  وحید نصیری
  
  ‫۶ سال و ۱۱ ماه قبل، دوشنبه ۲۴ مهر ۱۳۹۶، ساعت ۱۵:۵۸
  
  - این مورد انتخاب شخصی است بیشتر. اگر می‌خواهید یکی را با VSCode کار کنید و دیگری را با VS کامل، شاید جدا باشند بهتر باشد. یا اینکه هر دو را هم می‌توان با VSCode کار کرد (اگر NET Core. کار می‌کنید).
  - بستگی به توزیع نهایی برنامه دارد. آیا قرار است برنامه‌ی Angular بر روی یک پورت دیگر و یا یک دومین دیگر به صورت مجزایی ارائه شود؟ بله. در این‌حالت باید CORS فعال شود (یک مثال فعالسازی آن). در غیراینصورت اگر فایل‌های نهایی Angular در پوشه‌ی wwwroot برنامه‌ی وب کپی می‌شوند، نیازی به تغییر اضافه‌تری نیست.
#

محمد دلیری

‫۶ سال و ۱۱ ماه قبل، دوشنبه ۲۴ مهر ۱۳۹۶، ساعت ۱۷:۵۷
همون جور که توضیح داده بودید dotnet watch run رو اجرا کردیم و پروژه روی پورت 5000 اجرا شد و بعد وقتی این دستور رو میزنیم ng serve --proxy-config proxy.config.json -o

این خطا رو میده

Port 5000 is already in use. Use '--port' to specify a different port.

مگه میشه دوتا برنامه رو روی یک پورت اجرا کرد؟
- #
  
  وحید نصیری
  
  ‫۶ سال و ۱۱ ماه قبل، دوشنبه ۲۴ مهر ۱۳۹۶، ساعت ۱۸:۰۸
  
  خیر. دستور استفاده از فایل proxy.config.json هنوز هم در آدرس http://localhost:4200 اجرا می‌شود (یعنی پورت آن هنوز هم 4200 است)، اما target درخواست‌ها را به صورت خودکار بر اساس تنظیمات فایل json یاد شده تنظیم و بازنویسی می‌کند (نه پورت وب سرور آزمایشی آن‌را).
#

وحید نصیری

‫۶ سال و ۹ ماه قبل، شنبه ۱۸ آذر ۱۳۹۶، ساعت ۱۲:۵۲
یک نکته‌ی تکمیلی
Microsoft.DotNet.Web.Spa.ProjectTemplates در آخرین نگارش آن، پشتیبانی از Angular CLI را هم افزوده‌است. برای کار با آن و ایجاد یک پروژه‌ی جدید بر مبنای آن دستورات ذیل را صادر کنید:

> dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0-preview1-final > dotnet new angular

سپس اگر به فایل‌های Startup.cs و csproj آن دقت کنید، نحوه‌ی استفاده‌ی از بسته‌ی نیوگت Microsoft.AspNetCore.SpaServices.Extensions را جهت معرفی مسیر ClientApp/dist و راه اندازی خودکار UseAngularCliServer مشاهده خواهید کرد.

توضیحات بیشتر:
About The Updated SPA Templates From ASP.NET Core
Migrating from the old ASP.NET Core Angular Spa template to the newer one
- #
  
  م شاکری
  
  ‫۶ سال و ۷ ماه قبل، پنجشنبه ۳ اسفند ۱۳۹۶، ساعت ۲۲:۴۵
  در این حالت حالت توسعه برخی مواقع حین build پروژه ممکن است با خطای:
  
  System.TimeoutException: The Angular CLI process did not start listening for requests within the timeout period of 50 seconds.
  
  مواجه شوید که علتش طولانی شدن پروسه‌ی build هست.برای رفع این مشکل در نگارش جدید بسته‌ی نیوگت Microsoft.AspNetCore.SpaServices.Extensions میتوان این زمان پیش فرض را حین توسعه تغییر داد.
  
  app.UseSpa(spa => { spa.Options.SourcePath = "ClientApp"; if (env.IsDevelopment()) { spa.Options.StartupTimeout = new TimeSpan(0, 0, 80); spa.UseAngularCliServer(npmScript: "start"); } });
#

وحید نصیری

‫۶ سال و ۶ ماه قبل، شنبه ۱۲ اسفند ۱۳۹۶، ساعت ۱۶:۴۶
ارتقاء به NET Core 2.1. : حذف Microsoft.DotNet.Watcher.Tools
پس از ارتقاء به NET Core 2.1. دیگر نیازی به ذکر تنظیم زیر در فایل csproj نیست:

<ItemGroup> <DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="(all versions)" /> </ItemGroup>

و تبدیل به دستورات سطوح بالا شده‌اند. یعنی بدون نیاز به نصب وابستگی خاصی، کار می‌کنند (و اگر در پروژه‌های پیشین ذکر شده‌اند، آن‌ها را حذف کنید) . اطلاعات بیشتر
#

پدرام آقازاده

‫۳ سال و ۹ ماه قبل، سه‌شنبه ۱۱ آذر ۱۳۹۹، ساعت ۰۰:۱۳

درود؛ من سال‌ها انگیولار جی اس با ASP.NET MVC استفاده کردم. به این ترتیب که در هر ویو ای که میخواستم کل بخشی از صفحه یا کل صفحه به صورت SPA باشه، به راحتی فایل اصلی AngularJS و فایل جاوا اسکریپت کنترلر یا دایرکتیو و ... رو در همون Razor View لود میکردم. یا مثلا اگر در صفحات متعددی قصد استفاده از انگیولار داشتم، فایل اصلی انگولار در Layout لود میشد و فقط فایل‌های دایرکتیو‌ها و ... در ویو بارگذاری میشد.
اما از انگیولار ۲ به بعد واقعاً سردرگم شدم. چون دیگه با یه فایل اصلی انگیولار و یه اسکریپت ساده طرف نیستم. و اسکریپت نهایی با وب پک و توسط CLI از ماژول‌ها مختلف ساخته میشه و خودش به یه فایل index.html ضمیمه میشه، حس میکنم شرایط سخت‌تر شده به جای ساده تر. چون من خوب نمیخوام از index.html استفاده کنم.
- #
  
  وحید نصیری
  
  ‫۳ سال و ۹ ماه قبل، سه‌شنبه ۱۱ آذر ۱۳۹۹، ساعت ۰۱:۱۳
  
  «سفارشی سازی صفحه‌ی اول برنامه‌های Angular CLI توسط ASP.NET Core»