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

Question

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

1. 在VS2017 .net 2.1 Angular中创建项目
2. npm安装
3. ng更新--all
4. ng更新@ angular / cli
5. 创建angular.json
6. 为开发依赖项添加了“ @ angular-devkit / build-angular”：“〜0.6.0”
7. npm安装
8. ng build --prod（此错误提示“未知选项：-extractCss”
9. 从package.json中删除了--extractCss
10. 从VS2017运行应用程序。应用程序已加载但CSS未加载
11. 当我尝试部署到Azure Web应用程序时，应用程序无法加载。

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

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

Answer 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",