将现有的 asp.net core 2.1 Angular 应用程序转换为 Angular 6 和 Angular CLI 6答案

【问题标题】：Convert existing asp.net core 2.1 angular app to Angular 6 and Angular CLI 6将现有的 asp.net core 2.1 Angular 应用程序转换为 Angular 6 和 Angular CLI 6
【发布时间】：2019-03-08 06:38:52
【问题描述】：

我创建了一个 5.2 Angular 附带的 asp.net core 2.1 Angular Web 应用程序。我想升级到 Angular 6 和 Angular CLI 6。这些是我做的步骤：

在 VS2017 .net 2.1 Angular 中创建项目
npm 安装
ng 更新 --all
ng 更新@angular/cli
创建 angular.json
将“@angular-devkit/build-angular”：“~0.6.0”添加到开发依赖项中
npm 安装
ng build --prod（这个抛出的错误说“未知选项：--extractCss”
从 package.json 中移除 --extractCss
从 VS2017 运行应用程序。应用程序已加载，但 css 未加载
当我尝试部署到 azure Web 应用时，应用程序无法加载。

不确定我还缺少哪些其他步骤

示例项目链接https://github.com/tkumark/WebApplication3

【问题讨论】：

查看angular官方更新指南update.angular.io
我个人会使用 CLI 创建一个新的 Angular 6 应用程序，然后手动复制 Angular 应用程序的各个部分。听起来可能很多，但值得。将您的 API 和前端放在不同的项目中。
@AdrianBrand 有没有我可以使用的 asp.net core 2.1 Angular 6 模板
我不会使用 Visual Studio 模板，我会将我的 .NET API 和我的 Angular CLI 项目分开。
stackoverflow.com/questions/52440735/… ?

标签： angular asp.net-core asp.net-core-2.1

【解决方案1】：

更新您的 angular.json 以在构建时强制 extractCss 并且不要错过添加 bootstrap 作为样式依赖项：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "your-app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "extractCss": true,
            "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],

同时检查配置部分：

"configurations": {
            "production": {
...
              "extractCss": true
            "debug": {
...

angular.json 架构可以在这里找到：https://github.com/angular/angular-cli/wiki/angular-workspace

您还需要检查 SPA 静态文件根路径是否与 angular.json 的输出路径匹配：

Startup.cs

// In production, the Angular files will be served from this directory
services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "ClientApp/dist";
});

angular.json

"outputPath": "dist",

【讨论】：

我试过了，但似乎没什么区别这是我正在尝试升级的示例代码。 github.com/tkumark/WebApplication3
在 .angular.json 中输出目录是："outDir": "dist" 在 angular.json 中输出路径是："outputPath": "dist/WebApplication3" 尝试将其设置为dist
我将其更新为 "outputPath": "dist" 但没有看到任何变化
你能分享一下构建输出吗？
angular.json 的样式部分中缺少 bootstrap，我更新了答案