stackoom
  简体   繁体   中英

Angular npm run serve:ssr fails

 原文  2020-05-20 12:20:59  9   2    angular/ server-side-rendering/ angular-universal/ universal

Question

when I run npm run serve:ssr, the terminal goes wild with lots of minified characters I think then fails with this error:

Error: ENOENT: no such file or directory, open 'google/protobuf/api.proto'
at Object.openSync (fs.js:458:3)
at Object.readFileSync (fs.js:360:35)
at fetch (C:\site-angular-tempora\site-vitrine-tempora\dist\site-vitrine-tempora\server\main.js:1:1481457)
at Root.load (C:\site-angular-tempora\site-vitrine-tempora\dist\site-vitrine-tempora\server\main.js:1:1481863)
at Root.loadSync (C:\site-angular-tempora\site-vitrine-tempora\dist\site-vitrine-tempora\server\main.js:1:1482043)
at Object.loadSync (C:\site-angular-tempora\site-vitrine-tempora\dist\site-vitrine-tempora\server\main.js:1:2045651)
at Object.8ZNE (C:\site-angular-tempora\site-vitrine-tempora\dist\site-vitrine-tempora\server\main.js:1:1496436)
at __webpack_require__ (C:\site-angular-tempora\site-vitrine-tempora\dist\site-vitrine-tempora\server\main.js:1:317)
at Object.BYZf (C:\site-angular-tempora\site-vitrine-tempora\dist\site-vitrine-tempora\server\main.js:1:1574620)
at __webpack_require__ (C:\site-angular-tempora\site-vitrine-tempora\dist\site-vitrine-tempora\server\main.js:1:317) {
 errno: -4058,
 syscall: 'open',
 code: 'ENOENT',
 path: 'google/protobuf/api.proto'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! site-vitrine-tempora@0.0.0 serve:ssr: `node dist/site-vitrine-tempora/server/main.js`
npm ERR! Exit status 1

The log error:

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'serve:ssr'
1 verbose cli ]
2 info using npm@6.14.4
3 info using node@v12.16.3
4 verbose run-script [ 'preserve:ssr', 'serve:ssr', 'postserve:ssr' ]
5 info lifecycle site-vitrine-tempora@0.0.0~preserve:ssr: site-vitrine-tempora@0.0.0
6 info lifecycle site-vitrine-tempora@0.0.0~serve:ssr: site-vitrine-tempora@0.0.0
7 verbose lifecycle site-vitrine-tempora@0.0.0~serve:ssr: unsafe-perm in lifecycle true
8 verbose lifecycle site-vitrine-tempora@0.0.0~serve:ssr: PATH: C:\Program Files\nodejs           \node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\site-angular-tempora\site-vitrine-  tempora\node_modules\.bin;C:\Program Files (x86)\Common Files\Intel\Shared Libraries\redist\intel64\compiler;C:\Python27\;C:\Python27\Scripts;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\NVIDIA Corporation\NVIDIA NvDLISR;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\ProgramData\chocolatey\bin;C:\Program Files\PuTTY\;C:\Program Files\Git\cmd;C:\Program Files\nodejs\;C:\Users\Pascal\AppData\Local\Microsoft\WindowsApps;;C:\Users\Pascal\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\Pascal\AppData\Roaming\npm
 9 verbose lifecycle site-vitrine-tempora@0.0.0~serve:ssr: CWD: C:\site-angular-tempora\site-vitrine-tempora
 10 silly lifecycle site-vitrine-tempora@0.0.0~serve:ssr: Args: [ '/d /s /c', 'node dist/site-vitrine-tempora/server/main.js' ]
 11 silly lifecycle site-vitrine-tempora@0.0.0~serve:ssr: Returned: code: 1  signal: null
 12 info lifecycle site-vitrine-tempora@0.0.0~serve:ssr: Failed to exec serve:ssr script
 13 verbose stack Error: site-vitrine-tempora@0.0.0 serve:ssr: `node dist/site-vitrine-tempora/server/main.js`
 13 verbose stack Exit status 1
 13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
 13 verbose stack     at EventEmitter.emit (events.js:310:20)
 13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
 13 verbose stack     at ChildProcess.emit (events.js:310:20)
 13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
 13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
 14 verbose pkgid site-vitrine-tempora@0.0.0
 15 verbose cwd C:\site-angular-tempora\site-vitrine-tempora
 16 verbose Windows_NT 10.0.18363
 17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "serve:ssr"
 18 verbose node v12.16.3
 19 verbose npm  v6.14.4
 20 error code ELIFECYCLE
 21 error errno 1
 22 error site-vitrine-tempora@0.0.0 serve:ssr: `node dist/site-vitrine-tempora/server/main.js`
 22 error Exit status 1
 23 error Failed at the site-vitrine-tempora@0.0.0 serve:ssr script.
 23 error This is probably not a problem with npm. There is likely additional logging output above.
 24 verbose exit [ 1, true ]

Package.json: 

 {
   "name": "site-vitrine-tempora",
   "version": "0.0.0",
  "scripts": {
  "ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"dev:ssr": "ng run site-vitrine-tempora:serve-ssr",
"serve:ssr": "node dist/site-vitrine-tempora/server/main.js",
"build:ssr": "ng build --prod && ng run site-vitrine-tempora:server:production",
"prerender": "ng run site-vitrine-tempora:prerender",
"postinstall": "node patch-iconv.js && node patch-ng-devkit.js"
   },
    "private": true,
    "dependencies": {
"@angular/animations": "~9.1.7",
"@angular/cdk": "^9.2.4",
"@angular/common": "~9.1.7",
"@angular/compiler": "~9.1.7",
"@angular/core": "~9.1.7",
"@angular/fire": "^6.0.0",
"@angular/forms": "~9.1.7",
"@angular/localize": "^9.1.7",
"@angular/material": "^9.2.4",
"@angular/platform-browser": "~9.1.7",
"@angular/platform-browser-dynamic": "~9.1.7",
"@angular/platform-server": "^9.1.7",
"@angular/router": "~9.1.7",
"@fortawesome/angular-fontawesome": "^0.6.1",
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@ng-bootstrap/ng-bootstrap": "^6.1.0",
"@nguniversal/express-engine": "^9.1.1",
"angular-froala-wysiwyg": "^3.1.1-1",
"bootstrap": "^4.5.0",
"express": "^4.17.1",
"firebase": "^7.14.4",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
   },
    "devDependencies": {
"@angular-builders/custom-webpack": "^9.1.0",
"@angular-devkit/architect": "~0.900",
"@angular-devkit/build-angular": "~0.901.6",
"@angular/cli": "~9.1.6",
"@angular/compiler-cli": "~9.1.7",
"@angular/language-service": "~9.1.7",
"@nguniversal/builders": "^9.1.1",
"@types/express": "^4.17.6",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.12.41",
"brotli-webpack-plugin": "^1.1.0",
"codelyzer": "^5.1.2",
"compression-webpack-plugin": "^4.0.0",
"firebase-tools": "^8.0.0",
"fuzzy": "^0.1.3",
"inquirer": "^6.2.2",
"inquirer-autocomplete-prompt": "^1.0.1",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~5.18.0",
"typescript": "~3.7.5"
   }
  }

Angular.json: 

 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
     "site-vitrine-tempora": {
     "projectType": "application",
     "schematics": {
        "@schematics/angular:component": {
           "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
     "prefix": "app",
     "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
             "customWebpackConfig": {
               "path": "./custom-webpack.config.js"
            },
             "outputPath": "dist/site-vitrine-tempora/browser",
            "index": "src/index.html",
           "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
           "aot": true,
           "assets": [
              "src/favicon.ico",
              "src/assets"
        ],
        "styles": [
          "src/styles.scss",
          "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
          "./node_modules/froala-editor/css/froala_editor.pkgd.min.css",
          "./node_modules/froala-editor/css/froala_style.min.css"
        ],
        "scripts": []
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "6kb",
              "maximumError": "10kb"
            }
          ]
        }
      }
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "site-vitrine-tempora:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "site-vitrine-tempora:build:production"
        }
      }
    },
    "extract-i18n": {
      "builder": "@angular-devkit/build-angular:extract-i18n",
      "options": {
        "browserTarget": "site-vitrine-tempora:build"
      }
    },
    "test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "main": "src/test.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.spec.json",
        "karmaConfig": "karma.conf.js",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "src/styles.scss"
        ],
        "scripts": []
      }
    },
    "lint": {
      "builder": "@angular-devkit/build-angular:tslint",
      "options": {
        "tsConfig": [
          "tsconfig.app.json",
          "tsconfig.spec.json",
          "e2e/tsconfig.json"
        ],
        "exclude": [
          "**/node_modules/**"
        ]
      }
    },
    "e2e": {
      "builder": "@angular-devkit/build-angular:protractor",
      "options": {
        "protractorConfig": "e2e/protractor.conf.js",
        "devServerTarget": "site-vitrine-tempora:serve"
      },
      "configurations": {
        "production": {
          "devServerTarget": "site-vitrine-tempora:serve:production"
        }
      }
    },
    "deploy": {
      "builder": "@angular/fire:deploy",
      "options": {}
    },
    "server": {
      "builder": "@angular-devkit/build-angular:server",
      "options": {
        "outputPath": "dist/site-vitrine-tempora/server",
        "main": "server.ts",
        "tsConfig": "tsconfig.server.json"
      },
      "configurations": {
        "production": {
          "outputHashing": "media",
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "sourceMap": false,
          "optimization": true
        }
      }
    },
    "serve-ssr": {
      "builder": "@nguniversal/builders:ssr-dev-server",
      "options": {
        "browserTarget": "site-vitrine-tempora:build",
        "serverTarget": "site-vitrine-tempora:server"
      },
      "configurations": {
        "production": {
          "browserTarget": "site-vitrine-tempora:build:production",
          "serverTarget": "site-vitrine-tempora:server:production"
        }
      }
    },
    "prerender": {
      "builder": "@nguniversal/builders:prerender",
      "options": {
        "browserTarget": "site-vitrine-tempora:build:production",
        "serverTarget": "site-vitrine-tempora:server:production",
        "routes": [
          "/"
        ]
      },
      "configurations": {
        "production": {}
      }
    }
  }
}
    },
   "defaultProject": "site-vitrine-tempora"
 }

I have been trying to solve this issue for a few days now and I have tried a lot of things but nothing works. I have checked Github as well but it always come down to this issue. I have removed some dependencies as I thought thery were the ones bugging the scripts, but it did not solve anything.

It is a shame I can't make that work as the Universal Tutorial on the Angular website looks so easy.

Any help appreciated

Cheers

EDIT

I did try to add Firebase/firesstore as external dependencies in the angular.json, but now, I have another error

  ReferenceError: window is not defined
at Object.bzdy (C:\site-angular-tempora\site-vitrine-tempora\dist\site-     vitrine-tempora\server\main.js:1:2975230)
at __webpack_require__ (C:\site-angular-tempora\site-vitrine-tempora\dist\site-vitrine-tempora\server\main.js:1:317)
at Object.zWQT (C:\site-angular-tempora\site-vitrine-tempora\dist\site-vitrine-tempora\server\main.js:1:5642533)
at __webpack_require__ (C:\site-angular-tempora\site-vitrine-tempora\dist\site-vitrine-tempora\server\main.js:1:317)
at Object.vY5A (C:\site-angular-tempora\site-vitrine-tempora\dist\site-vitrine-tempora\server\main.js:1:5421272)
at __webpack_require__ (C:\site-angular-tempora\site-vitrine-tempora\dist\site-vitrine-tempora\server\main.js:1:317)
at Object.ZAI4 (C:\site-angular-tempora\site-vitrine-tempora\dist\site-vitrine-tempora\server\main.js:1:2954266)
at __webpack_require__ (C:\site-angular-tempora\site-vitrine-tempora\dist\site-vitrine-tempora\server\main.js:1:317)
at Object.24aS (C:\site-angular-tempora\site-vitrine-tempora\dist\site-vitrine-tempora\server\main.js:1:1013630)
at __webpack_require__ (C:\site-angular-tempora\site-vitrine-tempora\dist\site-vitrine-tempora\server\main.js:1:317

2 answers

solution1
 0  2020-05-20 12:37:59

Add below snippet to your angular.json

"server": {
  "builder": "@angular-devkit/build-angular:server",
    "options": {
      "outputPath": "dist/angprod/server",
      "main": "server.ts",
      "tsConfig": "tsconfig.server.json",
      "externalDependencies": ["@firebase/firestore"]
  }

Refer to the link for more details: https://github.com/angular/angularfire/issues/2424#issuecomment-619239036

Note: Add outputPath as per your project.

solution2
 0  2020-05-22 07:51:44

I found the issues. I used a custom webpack for brotli compression and I used a wyziwyg text editor. Looks like both needed to be rendered in the browser. I removed both and now npm run serve:ssr works without adding stuff to server.ts or using PlatformID.

To find out where was the issues, you have to change optimisations under server to false in angular.json.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Angular Universal Slow TTFB - npm run serve:ssr Angular Universal npm run serve:ssr returns “document is not defined” Angular universal npm run serve:ssr throw error : package.json does not exist Run angular with SSR and serve pages with https npm run build:ssr does not work in angular 8 ng serve fails to run after npm install Angular universal unexpected token { on npm run start:ssr Angular 2 beta “npm run tsc” Command fails Bitbucket Angular npm run build fails How to run npm or angular 2 ng serve command from Bash Script?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM