我开发了一个项目,分别使用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?非常感谢您的指导。
1条答案
按热度按时间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。
将项目复制到模板也可能是一种解决方案。