如何在 VS 代码中发布 Angular 和 dotnet Web api 项目答案

【问题标题】：How to publish an Angular and dotnet Web api project in VS code如何在 VS 代码中发布 Angular 和 dotnet Web api 项目
【发布时间】：2018-01-11 08:39:07
【问题描述】：

遵循这些教程：tutorial1 - tutorial2 我现在有一个运行良好的 hello world 项目。问题是我不知道如何发布整个项目，所以我可以将文件上传到我的虚拟主机提供商。

这是我在 VS 代码中的项目（app.component.html 包含内容）：

dotnet publish --outdir C:\temp 发布到文件夹，但缺少 html 文件（也不在 src 文件夹中）：

ng build 将 Angular 项目构建到 wwwroot。在这个文件夹中有一个 index.html 文件，但是它是空的：

当我通常使用 F5 从 VS 代码运行项目时，似乎 dotnet core Kestrel Web 服务器不会在任何地方托管文件，而是直接在项目中使用文件。那么您如何发布这样的项目，以便我可以将文件上传到我的虚拟主机？就像我在 VS 代码中按 F5 时一样。

谢谢！

【问题讨论】：

stackoverflow.com/questions/48176085/…
谢谢，但这确实没有帮助。这两个项目没有捆绑在一起。
首先您需要构建您的项目例如：npm build。构建后，文件将存储在特定文件夹中，如“dist”作为您的配置，您可以将该构建文件托管在服务器中
是的，我可以使用 'ng build' 构建 Angular 项目。这会构建一些 js 包和映射文件，以及一个空的 index.html 文件。 app.component.html 文件（来自我提到的教程）已经消失，这是前端逻辑所在的地方。那么 web api 后端文件呢？它们应该与角度构建相结合......
我猜这是新的 Angular CLI 版本。 Dotnet publish 将处理您的 c# 和 angular 代码。发布时，html 文件必须在 wwwroot 文件夹中，而不是在 dist 文件夹中。

标签： angular visual-studio-code publish

【解决方案1】：

您可以在 Visual Studio 2017 中使用 de Angular 模板。你必须改变你的 index.cshtml 像

<!-- comment this line
<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>
    -->
<!--just only-->
<app>Loading...</app>

更改您的 package.json 以使用 angular 5

"devDependencies": {
    "@angular/animations": "5.1.2",
    "@angular/common": "5.1.2",
    "@angular/compiler": "5.1.2",
    "@angular/compiler-cli": "^5.1.2",
    "@angular/core": "5.1.2",
    "@angular/forms": "5.1.2",
    "@angular/http": "5.1.2",
    "@angular/platform-browser": "5.1.2",
    "@angular/platform-browser-dynamic": "5.1.2",
    "@angular/platform-server": "5.1.2",
    "@angular/router": "5.1.2",
    "@ngtools/webpack": "1.9.2",
    "@types/chai": "4.0.10",
    "@types/jasmine": "2.8.2",
    "@types/quill": "1.3.5",
    "@types/webpack-env": "1.13.3",
    "angular2-router-loader": "0.3.5",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "3.4.1",
    "chai": "4.1.2",
    "core-js": "^2.5.3",
    "css": "2.2.1",
    "css-loader": "0.28.7",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.12",
    "expose-loader": "0.7.4",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.6",
    "html-loader": "0.5.1",
    "isomorphic-fetch": "2.2.1",
    "jasmine-core": "2.8.0",
    "json-loader": "0.5.7",
    "karma": "2.0.0",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.1",
    "karma-webpack": "2.0.9",
    "preboot": "6.0.0-beta.1",
    "quill": "1.3.4",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.5.6",
    "style-loader": "0.19.1",
    "to-string-loader": "1.1.5",
    "typescript": "^2.6.2",
    "url-loader": "0.6.2",
    "webpack": "^3.10.0",
    "webpack-hot-middleware": "2.21.0",
    "webpack-merge": "4.1.1",
    "zone.js": "0.8.18"
  },
  "dependencies": {
    "bootstrap-css-only": "4.0.0-beta.2", //<--if you want to use bootstrap.css but not all bootstrap
    "ng2-dnd": "^5.0.2"
  }

我觉得就是这样

【讨论】：

我使用的是 VS 代码，而不是 VS 2017。我看不到更改我的依赖项将如何工作？当我从 VS 代码构建和运行项目时，一切都运行良好，我想要的是这些构建文件。
sorry, :(。你必须使用 dotnet build 来构建应用程序。我没有经验，查看链接docs.microsoft.com/en-us/dotnet/core/tools/…