将现有asp.net core 2.1 angular应用程序转换为angular 6和angular CLI 6

我创建了一个asp.net core 2.1 angular web应用程序，它是5.2 angular附带的。我想升级到angular 6和angular CLI 6。 以下是我所做的步骤：

在VS2017.net 2.1中创建项目

npm安装

ng更新—全部

ng更新@angular/cli

创建angular.json

在开发依赖项中添加了“@angular devkit/build angular”：“~0.6.0”

npm安装

ng build--prod（这个抛出的错误是“未知选项：--extractCss”

已删除--从package.json中提取CSS

从VS2017运行应用程序。应用程序已加载，但css未加载

当我尝试部署到azure web app时，应用程序未加载

不确定我还遗漏了哪些步骤

示例项目链接

更新angular.json以强制在构建时提取CSS，并且不要错过将引导添加为样式依赖项：

{
  "$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模式可以在这里找到：

您还需要检查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",

更新angular.json以强制提取CSS构建，并且不要错过将引导添加为样式依赖项：

{
  "$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模式可以在这里找到：

您还需要检查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",

---

亲自查看angular的官方更新指南我将使用CLI创建一个新的angular 6应用程序，并手动复制angular应用程序的各个部分。听起来可能很多，但值得。将API和前端放在单独的项目中。@AdrianBrand是否有asp.net core 2.1 angular 6模板我可以使用我不会使用Visual Studio模板，我会将我的.NET API和Angular CLI项目分开。亲自查看Angular的官方更新指南。我会用CLI创建一个新的Angular 6应用程序，并手动复制Angular应用程序的各个部分。听起来可能很多，但值得一试。将API和前端放在单独的项目中。@AdrianBrand是否有asp.ne我可以使用的t core 2.1 Angular 6模板我不会使用Visual Studio模板，我会将我的.NET API和Angular CLI项目分开。我尝试过，但似乎没有什么不同。这是我尝试升级的示例代码。在.Angular.json中，输出目录是：

“outDir”：“dist”

在angular.json中，输出路径是：

“outputPath”：“dist/WebApplication3”

尝试将其设置为

dist

我更新为“outputPath”：“dist”但是没有看到任何变化。您可以共享构建输出吗？angular.json的styles部分缺少引导，我更新了答案。我尝试了，但似乎没有什么不同。这是我尝试升级的示例代码。在.angular.json中，输出目录是：

“outDir”：“dist”

，在angular.json中，输出路径是：

“outputPath”：“dist/WebApplication3”

尝试将其设置为

dist

我将其更新为“outputPath”：“dist”，但未看到任何更改您可以共享生成输出吗？angular.json的样式部分缺少引导，我更新了答案