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

Posted

技术标签:

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

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

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

这是我得到的错误：

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

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

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

有什么想法吗？

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

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

            
              "$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 更改为服务器端配置 s-s-r 构建完美并作为 s-s-r 完美但不能正常工作，我想知道如何让这两个世界都工作

            
              "$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/**"
                        ]

【问题讨论】：

【参考方案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 文件中。这样，您将能够在本地运行应用程序以及在服务器端渲染两者。我希望这能解决你的问题。

【讨论】：

以上是关于在服务器端渲染设置后，角度 6 无法在本地工作的主要内容，如果未能解决你的问题，请参考以下文章

如何使用角度通用在服务器端渲染中加载 json

Angular 6 服务器端错误：找不到模块：错误：无法解析“./dist/server/main.bundle”

无法在角度 6 中检查 AuthGuard 中的 JWT 有效性？

server.timeout 在本地完美运行，但在生产中无法在节点 js 中运行

React/Redux 服务端渲染初始状态

具有角度通用的服务工作者和 sw 预缓存