typescript 如何构建和发布asp.net基于核心的服务器端和基于Angular 的客户端项目?

dtcbnfnu  于 2023-02-25  发布在  TypeScript
关注(0)|答案(1)|浏览(114)

我开发了一个项目,分别使用asp.netcore 5和angular 15技术作为后端和前端。项目的ASP.NET core MVC部分在名为serverApi的单独文件夹中创建,项目的angular部分在名为clientSpa的另一个文件夹中生成。SPA部分的pakcage.json为:

{
  "name": "client-spa",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.0.0",
    "@angular/cdk": "^15.0.0",
    "@angular/common": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/forms": "^15.0.0",
    "@angular/material": "^15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "@auth0/angular-jwt": "^5.1.2",
    "jalali-moment": "^3.3.11",
    "jalali-ts": "^2.0.5",
    "material-icons": "^1.13.1",
    "ng-persian-datepicker": "^6.1.2",
    "ngx-mat-select-search": "^7.0.0",
    "ngx-print": "^1.3.1",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.0",
    "@angular/cli": "~15.0.0",
    "@angular/compiler-cli": "^15.0.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.8.2"
  }
}

和服务器Api.csproj:

<Project Sdk="Microsoft.NET.Sdk.Web">

    <PropertyGroup>
        <TargetFramework>net5.0</TargetFramework>
    </PropertyGroup>

    <ItemGroup>
      <PackageReference Include="AutoMapper" Version="8.1.1" />
      <PackageReference Include="AutoMapper.Extensions.Microsoft.DependencyInjection" Version="6.1.1" />
      <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="5.0.17" />
      <PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="5.0.17" />
      <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="5.0.17" />
      <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="5.0.17">
        <PrivateAssets>all</PrivateAssets>
        <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
      </PackageReference>
      <PackageReference Include="Microsoft.EntityFrameworkCore.Proxies" Version="5.0.17" />
      <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="5.0.17" />
      <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="5.0.17">
        <PrivateAssets>all</PrivateAssets>
        <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
      </PackageReference>
      <PackageReference Include="Newtonsoft.Json" Version="13.0.2" />
      <PackageReference Include="Swashbuckle.AspNetCore" Version="6.4.0" />
    </ItemGroup>

    <ItemGroup>
      <Folder Include="Resources\Images" />
    </ItemGroup>

</Project>

需要注意的是,当我使用Visual Studio创建serverApi项目时,我添加了现有网站(clientSpa),以便每当我打开项目的Solution时,都可以看到Angular项目的内容。然而,项目的两个部分都在单独的文件夹中。鉴于上述描述,我如何构建项目以发布到具有IP的服务器上:X.Y.Z.W?非常感谢您的指导。

bsxbgnwa

bsxbgnwa1#

希望这对你有帮助。
我试着在visual studio中用angular-api模板进行模拟。

我先创建一个API,然后添加一个现有的Angular 网站。要使他们一起建立你需要修改3个文件:
serverApi.csproj
launchsettings.json
angular.json(客户端水疗项目)
对于Serverapi.csproj和launchsettings.json,您可以从模板中复制整个项目。对于angular.json,您也可以从模板中复制,但需要将模板项目名称替换为您的名称。
使api工作的关键文件是proxy.conf.js,您应该需要使其与您自己的api一起工作

我测试了以上两个独立的项目一起构建和部署到IIS。
将项目复制到模板也可能是一种解决方案。

相关问题