在服务器端渲染设置后，角度 6 无法在本地工作

【问题标题】：angular6 not working locally after sever side render setup在服务器端渲染设置后，角度 6 无法在本地工作
【发布时间】：2018-11-08 05:18:28
【问题描述】：

在angular6中成功设置服务器端渲染后，它作为SSR构建和运行，然后应用程序停止作为基本应用程序工作，基本上我想以npm run start运行我的angular6应用程序，但是，当我运行时这个命令我得到了这个错误，似乎没有相关的文档。

应用程序构建并用作服务器端渲染，但不是常规应用程序。

这是我得到的错误：

ITWS08:A6-Test-3-SSR CC$ npm run start angular@6.0.0 开始 /eclipse/A6-Test-3-SSR 服务

无法确定“服务”目标的单个项目。 错误：无法确定“服务”目标的单个项目。 在 ServeCommand.getProjectNamesByTarget (/eclipse/A6-Test-3-SSR/node_modules/@angular/cli/models/architect-command.js:175:19) 在 MergeMapSubscriber._loadWorkspaceAndArchitect.pipe.operators_1.concatMap [作为项目] （/eclipse/A6-Test-3-SSR/node_modules/@angular/cli/models/architect-command.js:50:43） 在 MergeMapSubscriber._tryNext (/eclipse/A6-Test-3-SSR/node_modules/rxjs/internal/operators/mergeMap.js:122:27) 在 MergeMapSubscriber._next (/eclipse/A6-Test-3-SSR/node_modules/rxjs/internal/operators/mergeMap.js:112:18) 在 MergeMapSubscriber.Subscriber.next (/eclipse/A6-Test-3-SSR/node_modules/rxjs/internal/Subscriber.js:103:18) 在 TapSubscriber._next (/eclipse/A6-Test-3-SSR/node_modules/rxjs/internal/operators/tap.js:109:26) 在 TapSubscriber.Subscriber.next (/eclipse/A6-Test-3-SSR/node_modules/rxjs/internal/Subscriber.js:103:18) 在 MergeMapSubscriber.notifyNext (/eclipse/A6-Test-3-SSR/node_modules/rxjs/internal/operators/mergeMap.js:141:26) 在 InnerSubscriber._next (/eclipse/A6-Test-3-SSR/node_modules/rxjs/internal/InnerSubscriber.js:30:21) 在 InnerSubscriber.Subscriber.next (/eclipse/A6-Test-3->SSR/node_modules/rxjs/internal/Subscriber.js:103:18)

npm 错误！代码 ELIFECYCLE npm 错误！错误号 1 npm 错误！ angular@6.0.0 开始：ng serve npm 错误！退出状态 1 npm 错误！ npm 错误！在 angular@6.0.0 启动脚本中失败。 npm 错误！这可能不是 npm 的问题。可能还有额外的 上面的日志输出。

npm 错误！可以在以下位置找到此运行的完整日志： npm 错误！ /Users/CC/.npm/_logs/2018-05-29T13_46_21_934Z-debug.log ITWS08:A6-Test-3-SSR CC$

这些错误不会在构建中显示为服务器端渲染

有什么想法吗？

angular-cli.json 好像有问题？？

如果我在没有服务器端渲染配置的情况下替换 angular-cli.json，应用会正常运行但无法构建 SSR

            {
              "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
              "version": 1,
              "newProjectRoot": "projects",
              "projects": {
                "angular.io-example": {
                  "root": "",
                  "projectType": "application",
                  "prefix": "app",
                  "architect": {
                    "build": {
                      "builder": "@angular-devkit/build-angular:browser",
                      "options": {
                        "outputPath": "dist",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": [
                          {
                            "glob": "favicon.ico",
                            "input": "src",
                            "output": "/"
                          },
                          {
                            "glob": "**/*",
                            "input": "src/assets",
                            "output": "/assets"
                          }
                        ],
                        "styles": [
                          {"input": "node_modules/font-awesome/css/font-awesome.css"},
                          {"input": "src/assets/css/flag-icon.css"},
                          {"input": "src/assets/css/bootstrap.css"},
                          {"input": "src/assets/css/xmas.css"},
                          {"input": "src/assets/css/styles.css"},             
                          {"input": "src/assets/css/browser-specific.css"}
                        ],
                        "scripts": [
                          {"input": "node_modules/hammerjs/hammer.js"}
                        ]
                      },
                      "configurations": {
                        "production": {
                          "fileReplacements": [
                            {
                              "replace": "src/environments/environment.ts",
                              "with": "src/environments/environment.prod.ts"
                            }
                          ],
                          "optimization": true,
                          "outputHashing": "all",
                          "sourceMap": false,
                          "extractCss": true,
                          "namedChunks": false,
                          "aot": true,
                          "extractLicenses": true,
                          "vendorChunk": false,
                          "buildOptimizer": true
                        }
                      }
                    },
                    "serve": {
                      "builder": "@angular-devkit/build-angular:dev-server",
                      "options": {
                        "browserTarget": "angular.io-example:build"
                      },
                      "configurations": {
                        "production": {
                          "browserTarget": "angular.io-example:build:production"
                        }
                      }
                    },
                    "extract-i18n": {
                      "builder": "@angular-devkit/build-angular:extract-i18n",
                      "options": {
                        "browserTarget": "angular.io-example:build"
                      }
                    },
                    "test": {
                      "builder": "@angular-devkit/build-angular:karma",
                      "options": {
                        "main": "src/test.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.spec.json",
                        "karmaConfig": "src/karma.conf.js",
                        "styles": [
                          {
                            "input": "styles.css"
                          }
                        ],
                        "scripts": [],
                        "assets": [
                          {
                            "glob": "favicon.ico",
                            "input": "src/",
                            "output": "/"
                          },
                          {
                            "glob": "**/*",
                            "input": "src/assets",
                            "output": "/assets"
                          }
                        ]
                      }
                    },
                    "lint": {
                      "builder": "@angular-devkit/build-angular:tslint",
                      "options": {
                        "tsConfig": [
                          "src/tsconfig.app.json",
                          "src/tsconfig.spec.json"
                        ],
                        "exclude": [
                          "**/node_modules/**"
                        ]
                      }
                    }
                  }
                }
              }
            }

将 angular-cli.json 更改为服务器端配置 SSR 构建完美并作为 SSR 完美但不能正常工作，我想知道如何让这两个世界都工作

            {
              "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
              "version": 1,
              "newProjectRoot": "projects",
              "projects": {
                "angular.io-example": {
                  "root": "",
                  "projectType": "application",
                  "prefix": "app",
                  "architect": {
                    "build": {
                      "builder": "@angular-devkit/build-angular:browser",
                      "options": {
                        "outputPath": "dist/browser",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": [
                          {
                            "glob": "favicon.ico",
                            "input": "src",
                            "output": "/"
                          },
                          {
                            "glob": "**/*",
                            "input": "src/assets",
                            "output": "/assets"
                          }
                        ],
                        "styles": [
                          {"input": "node_modules/font-awesome/css/font-awesome.css"},
                          {"input": "src/assets/css/flag-icon.css"},
                          {"input": "src/assets/css/bootstrap.css"},
                          {"input": "src/assets/css/xmas.css"},
                          {"input": "src/assets/css/styles.css"},             
                          {"input": "src/assets/css/browser-specific.css"}
                        ],
                        "scripts": [
                          {"input": "node_modules/hammerjs/hammer.js"}
                        ]
                      },
                      "configurations": {
                        "production": {
                          "fileReplacements": [
                            {
                              "replace": "src/environments/environment.ts",
                              "with": "src/environments/environment.prod.ts"
                            }
                          ],
                          "optimization": true,
                          "outputHashing": "all",
                          "sourceMap": false,
                          "extractCss": true,
                          "namedChunks": false,
                          "aot": true,
                          "extractLicenses": true,
                          "vendorChunk": true,
                          "buildOptimizer": true
                        }
                      }
                    },
                    "server": {
                      "builder": "@angular-devkit/build-angular:server",
                      "options": {
                        "outputPath": "dist/server",
                        "main": "src/main.server.ts",
                        "tsConfig": "src/tsconfig.server.json"
                      }
                    },
                    "extract-i18n": {
                      "builder": "@angular-devkit/build-angular:extract-i18n",
                      "options": {
                        "browserTarget": "angular.server:build"
                      }
                    },
                    "test": {
                      "builder": "@angular-devkit/build-angular:karma",
                      "options": {
                        "main": "src/test.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.spec.json",
                        "karmaConfig": "src/karma.conf.js",
                        "styles": [
                          {
                            "input": "styles.css"
                          }
                        ],
                        "scripts": [],
                        "assets": [
                          {
                            "glob": "favicon.ico",
                            "input": "src/",
                            "output": "/"
                          },
                          {
                            "glob": "**/*",
                            "input": "src/assets",
                            "output": "/assets"
                          }
                        ]
                      }
                    },
                    "lint": {
                      "builder": "@angular-devkit/build-angular:tslint",
                      "options": {
                        "tsConfig": [
                          "src/tsconfig.app.json",
                          "src/tsconfig.spec.json"
                        ],
                        "exclude": [
                          "**/node_modules/**"
                        ]
                      }
                    }
                  }
                }
              }
            }

【问题讨论】：

    标签： angular typescript server server-side-rendering


    【解决方案1】：

    我有同样的错误。我的问题是 app 项目的名称和 lib 项目的名称相同。当我更改库的名称时，错误消失了，我也可以使用 ng serve 启动我的项目

    angular.json：

     "projects": {
    "project-name": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "pn",
      ...
    } 
    "project-name-lib": {
      "root": "projects/project-name-lib",
      "sourceRoot": "projects/project-name-lib/src",
      "projectType": "library",
      "prefix": "pn",
      ...
  }

    【讨论】：

      【解决方案2】：

      将"serve" 和"server" 配置保存在angular.json 文件中。这样，您将能够在本地运行应用程序以及在服务器端渲染两者。我希望这能解决你的问题。

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 2023-01-30
        • 1970-01-01
        • 1970-01-01
        • 2018-09-09
        • 1970-01-01
        • 2018-04-19
        • 2017-05-29
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode