npm run serve:ssr : package.json does not exist #1207

anuragd7 · 2019-07-22T08:06:12Z

Bug Report

What is the expected behavior?

npm run build:ssr is building without errors. npm run serve:ssr is not running as expected

What is the current behavior?

npm run serve:ssr fails with the following errors

> x-y-z@0.0.0 serve:ssr /Users/NRMac/Projects/newSMT/xyz
> node dist/server

/Users/NRMac/Projects/newSMT/xyz/dist/server/main.js:173019
        throw new Error("package.json does not exist at " + package_json_path);
        ^

Error: package.json does not exist at /Users/NRMac/Projects/newSMT/xyz/dist/package.json
    at Object.PsoT.exports.find (/Users/NRMac/Projects/newSMT/xyz/dist/server/main.js:173019:15)
    at Object.wPNL (/Users/NRMac/Projects/newSMT/xyz/dist/server/main.js:308568:12)
    at __webpack_require__ (/Users/NRMac/Projects/newSMT/xyz/dist/server/main.js:20:30)
    at Object.XpdW (/Users/NRMac/Projects/newSMT/xyz/dist/server/main.js:196998:12)
    at __webpack_require__ (/Users/NRMac/Projects/newSMT/xyz/dist/server/main.js:20:30)
    at Object.g1pB (/Users/NRMac/Projects/newSMT/xyz/dist/server/main.js:229730:27)
    at __webpack_require__ (/Users/NRMac/Projects/newSMT/xyz/dist/server/main.js:20:30)
    at Object.Ou8q (/Users/NRMac/Projects/newSMT/xyz/dist/server/main.js:170377:14)
    at __webpack_require__ (/Users/NRMac/Projects/newSMT/xyz/dist/server/main.js:20:30)
    at Object.BYZf (/Users/NRMac/Projects/newSMT/xyz/dist/server/main.js:99702:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! set-my-test@0.0.0 serve:ssr: `node dist/server`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the set-my-test@0.0.0 serve:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/NRMac/.npm/_logs/2019-07-22T07_43_50_405Z-debug.log

What modules are related to this issue?

- [ ] aspnetcore-engine
- [ ] common
- [ ] express-engine
- [ ] hapi-engine
- [ ] module-map-ngfactory-loader

Minimal reproduction with instructions:

What is the use-case or motivation for changing an existing behavior?

Environment:

@nguniversal versions

express-engine:
module-map-ngfactory-loader:

Output from: ng --version.

Angular CLI: 8.1.2
Node: 10.16.0
OS: darwin x64
Angular: 8.1.2
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.801.2
@angular-devkit/build-angular              0.801.2
@angular-devkit/build-optimizer            0.801.2
@angular-devkit/build-webpack              0.801.2
@angular-devkit/core                       8.1.2
@angular-devkit/schematics                 8.1.2
@angular/fire                              5.2.1
@ngtools/webpack                           8.1.2
@nguniversal/express-engine                8.1.1
@nguniversal/module-map-ngfactory-loader   8.1.1
@schematics/angular                        8.1.2
@schematics/update                         0.801.2
rxjs                                       6.5.2
typescript                                 3.4.5
webpack                                    4.35.2

Is there anything else we should know?

Working on Angular 8.1 with Firestore
Tried modifying webpack.server.config.js, package.json and server.ts based on the issue here https://stackoverflow.com/questions/57030914/firebase-firestore-not-working-with-angular-universal-package-json-does-not-exi

webpack.server.config.js

// Work around for https://github.com/angular/angular-cli/issues/7200

const path = require("path");
const webpack = require("webpack");

const APP_NAME = "xyz"; // CHANGE ME

module.exports = {
  mode: "development",
  entry: {
    // This is our Express server for Dynamic universal
    server: "./server.ts"
  },
  resolve: { extensions: [".js", ".ts"] },
  externals: {
    "./dist/server/main": 'require("./server/main")'
    /* Firebase has some troubles being webpacked when in
       in the Node environment, let's skip it.
       Note: you may need to exclude other dependencies depending
       on your project. */
    //  /^firebase/
  },
  target: "node",
  optimization: {
    minimize: false
  },
  output: {
    // Puts the output at the root of the dist folder
    path: path.join(__dirname, `dist/${APP_NAME}`),
    library: "app",
    libraryTarget: "umd",
    filename: "[name].js"
  },
  module: {
    noParse: /polyfills-.*\.js/,
    rules: [
      { test: /\.ts$/, loader: "ts-loader" },
      {
        // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
        // Removing this will cause deprecation warnings to appear.
        test: /(\\|\/)@angular(\\|\/)core(\\|\/).+\.js$/,
        parser: { system: true }
      }
    ]
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?angular(\\|\/)core(.+)?/,
      path.join(__dirname, "src"), // location of your src
      {} // a map of your routes
    ),
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?express(\\|\/)(.+)?/,
      path.join(__dirname, "src"),
      {}
    )
  ]
};

server.ts

/**
 * *** NOTE ON IMPORTING FROM ANGULAR AND NGUNIVERSAL IN THIS FILE ***
 *
 * If your application uses third-party dependencies, you'll need to
 * either use Webpack or the Angular CLI's `bundleDependencies` feature
 * in order to adequately package them for use on the server without a
 * node_modules directory.
 *
 * However, due to the nature of the CLI's `bundleDependencies`, importing
 * Angular in this file will create a different instance of Angular than
 * the version in the compiled application code. This leads to unavoidable
 * conflicts. Therefore, please do not explicitly import from @angular or
 * @nguniversal in this file. You can export any needed resources
 * from your application's main.server.ts file, as seen below with the
 * import for `ngExpressEngine`.
 */

import "zone.js/dist/zone-node";
import "reflect-metadata";
import { enableProdMode } from "@angular/core";

import * as express from "express";
import { join } from "path";
import { readFileSync } from "fs";

// Polyfills required for Firebase
(global as any).WebSocket = require("ws");
(global as any).XMLHttpRequest = require("xhr2");

import { renderModuleFactory } from "@angular/platform-server";
import { REQUEST, RESPONSE } from "@nguniversal/express-engine/tokens";
import { ValueProvider } from "@angular/core";

// Express server
enableProdMode();
const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), "dist");
const APP_NAME = "xyz"; // CHANGE ME

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {
  AppServerModuleNgFactory,
  LAZY_MODULE_MAP,
  ngExpressEngine,
  provideModuleMap
} = require(`./dist/server/main`);

// index.html template
const template = readFileSync(
  join(DIST_FOLDER, "browser", "index.html")
).toString();

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
// app.engine('html', ngExpressEngine({
//   bootstrap: AppServerModuleNgFactory,
//   providers: [
//     provideModuleMap(LAZY_MODULE_MAP)
//   ]
// }));

app.engine("html", (_, options, callback) =>
  ngExpressEngine({
    bootstrap: AppServerModuleNgFactory,
    providers: [
      provideModuleMap(LAZY_MODULE_MAP),
      {
        provide: REQUEST,
        useValue: options.req
      },
      {
        provide: RESPONSE,
        useValue: options.req.res
      }
    ]
  })(_, options, callback)
);

app.set("view engine", "html");
app.set("views", join(DIST_FOLDER, "browser"));

// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });
// Serve static files from /browser
app.get(
  "*.*",
  express.static(DIST_FOLDER, {
    maxAge: "1y"
  })
);

// All regular routes use the Universal engine
// app.get("*", (req, res) => {
//   res.render("index", { req });
// });

// Serve static files from /browser
app.get(
  "*.*",
  express.static(join(DIST_FOLDER, "browser"), {
    maxAge: "1y"
  })
);

// All regular routes use the Universal engine
app.get("*", (req, res) => {
  res.render(join(DIST_FOLDER, "browser", "index.html"), { req });
});

// Start up the Node server
app.listen(PORT, () => {
  console.log(`Node Express server listening on http://localhost:${PORT}`);
});

Package.json

{
  "name": "x-of-y",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "compile:server": "webpack --config webpack.server.config.js --progress --colors",
    "serve:ssr": "node dist/server",
    "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
    "build:client-and-server-bundles": "ng build --prod && ng run xyz:server:production --bundleDependencies all"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.1.2",
    "@angular/common": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/platform-server": "~8.1.2",
    "@angular/router": "~8.1.2",
    "@nguniversal/express-engine": "^8.1.1",
    "@nguniversal/module-map-ngfactory-loader": "8.1.1",
    "animate.css": "^3.7.2",
    "core-js": "^2.5.4",
    "express": "^4.15.2",
    "rxjs": "~6.5.2",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.801.2",
    "@angular/cli": "~8.1.2",
    "@angular/compiler-cli": "~8.1.2",
    "@angular/fire": "^5.2.1",
    "@angular/language-service": "~8.1.2",
    "@fortawesome/fontawesome-free": "^5.9.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "chart.js": "^2.8.0",
    "codelyzer": "^5.0.1",
    "easy-pie-chart": "^2.1.7",
    "firebase": "^6.3.0",
    "hammerjs": "^2.0.8",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "ngx-quill": "^7.1.0",
    "protractor": "~5.4.0",
    "quill": "^1.3.6",
    "quill-emoji": "^0.1.7",
    "screenfull": "^4.2.0",
    "tinify": "^1.6.0-beta.2",
    "ts-loader": "^5.2.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.4.5",
    "webpack-cli": "^3.1.0"
  }
}

The text was updated successfully, but these errors were encountered:

bdairy · 2019-07-25T12:37:53Z

Did u get to solve this issue??

anuragd7 · 2019-07-26T04:42:02Z

Not yet, hoping for a response from the community.

kpsrinivas · 2019-07-27T07:33:19Z

The problem is "build:client-and-server-bundles": "ng build --prod && ng run your-project:server:production --bundleDependencies all" in package.json . When you change it to ng run your-project:server:production --bundleDependencies none it works. But if you try to package it, the externals are getting messed up.

vikerman · 2019-07-30T04:06:23Z

Thanks @kpsrinivas . We don't currently allow configuring what libraries should be made external. Can you tell me which library you are trying to use that is causing this issue?

kpsrinivas · 2019-07-30T04:11:03Z

Not the library. When I try to package my server as umd and import it for firebase functions.

kpsrinivas · 2019-07-30T04:13:34Z

This step https://github.com/angular/angularfire2/blob/master/docs/universal/cloud-functions.md fails
I know its not universal issue. But build fails.

vikerman · 2019-07-30T17:54:05Z

We have multiple people using angular fire who seem to have problem with --bundleDependencies all. The current workaround is to just remove/set --bundleDependencies none.

We are going to follow up with angularfire folks to fix this properly

darshanDevrai · 2019-08-26T18:34:55Z

Has anyone solved this issue yet?
@kpsrinivas @vikerman @bdairy @anuragd7

Mph1399 · 2019-09-11T02:48:37Z

Has anyone solved this issue yet?
@kpsrinivas @vikerman @bdairy @anuragd7
Looks like Vikerman's response is the best fix and seems to work.

Go to your package.json file, under the "scripts" section & look for "build:client-and-server-bundles".
At the end of that line it has "--bundleDependencies all"
set that to "--bundleDependencies none" or delete it(I set it to all and it works)
re-run npm run build:ssr

BeSpunky · 2019-09-11T14:56:53Z

This sounds like a work around rather than a solution.
Isn't --bundleDependencies all there for a reason?

zeeshanshanif · 2019-09-16T11:18:38Z

i have tried "--bundleDependencies none" but still getting error

vikerman · 2019-09-16T21:21:17Z

@zeeshanshanif - Anyway you can create a repro github repo?

@BeSpunky - Bundling does help in fast cold start times and so it is definitely the way we are heading towards. But there are some packages that don't bundle well - And we want to provide an escape hatch for those cases. In some cases it might just be temporary as we figure out how to bundle a particular dependency better.

unrealbato · 2019-11-10T14:38:20Z

any Updates? "--bundleDependencies none" work to avoid "package.json" issue but i faced another issue as i guess that the SSR doesn't wait for observable to fetch data from Firestore! i don't know how to properly fix this.

all i want is to fetch user object from Firestore & update meta tags for Facebook Crawls share debugger!!!!

any Help Would be appreciated. Thanks

BeSpunky · 2019-11-10T15:01:49Z

If you solved the bundling problem, your question is not related to this thread.
However, if I understand your problem correctly, this might help you:
https://stackoverflow.com/a/50065783/4371525

Gbuomprisco · 2019-12-31T18:54:21Z

Has anyone solved this issue yet?
@kpsrinivas @vikerman @bdairy @anuragd7
Looks like Vikerman's response is the best fix and seems to work.

Go to your package.json file, under the "scripts" section & look for "build:client-and-server-bundles".

At the end of that line it has "--bundleDependencies all"

set that to "--bundleDependencies none" or delete it(I set it to all and it works)

re-run npm run build:ssr

This worked with Angular 8, but with not with Angular 9 (see below)

We have multiple people using angular fire who seem to have problem with --bundleDependencies all. The current workaround is to just remove/set --bundleDependencies none.

We are going to follow up with angularfire folks to fix this properly

Is this supposed to work with Angular 9? The workaround used to work - but now the component's template and styles won't get bundled anymore

alan-agius4 · 2019-12-31T19:51:50Z

@Gbuomprisco can you please provide a reproduction of the problem that we can take a look at?

Gbuomprisco · 2020-01-02T17:53:26Z

Hi @alan-agius4, my issue seems to be the same as this #1327.

Unfortunately, I also run into angular/angular#34544 while running the postinstall command

alan-agius4 · 2020-01-03T13:56:40Z

Can someone please put up a minimal reproduction of the firebase with bundles dependencies issue?

Unfortunately, without a reproduction we’ll not be able to look at this issue. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

Gbuomprisco · 2020-01-03T15:26:57Z

I can't from my office, but I'll push one this evening.

Thanks a lot for the help, really appreciated!

Gbuomprisco · 2020-01-03T18:05:24Z

Added reproduction here: https://github.com/Gbuomprisco/ng-ssr-fire

If I use bundleDependencies false, I get the following error:

Error: No NgModule metadata found for 'AppServerModule'.
    at NgModuleResolver.resolve (/Users/giancarlo/Lab/ng-ssr-fire/node_modules/@angular/compiler/bundles/compiler.umd.js:22899:27)
    at CompileMetadataResolver.getNgModuleMetadata (/Users/giancarlo/Lab/ng-ssr-fire/node_modules/@angular/compiler/bundles/compiler.umd.js:22002:47)
    at JitCompiler._loadModules (/Users/giancarlo/Lab/ng-ssr-fire/node_modules/@angular/compiler/bundles/compiler.umd.js:28191:55)
    at JitCompiler._compileModuleAndComponents (/Users/giancarlo/Lab/ng-ssr-fire/node_modules/@angular/compiler/bundles/compiler.umd.js:28172:40)
    at JitCompiler.compileModuleAsync (/Users/giancarlo/Lab/ng-ssr-fire/node_modules/@angular/compiler/bundles/compiler.umd.js:28132:41)
    at CompilerImpl.compileModuleAsync (/Users/giancarlo/Lab/ng-ssr-fire/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js:339:35)
    at CommonEngine.<anonymous> (/Users/giancarlo/Lab/ng-ssr-fire/node_modules/@nguniversal/express-engine/bundles/express-engine.umd.js:95:69)
    at step (/Users/giancarlo/Lab/ng-ssr-fire/node_modules/tslib/tslib.js:136:27)
    at Object.next (/Users/giancarlo/Lab/ng-ssr-fire/node_modules/tslib/tslib.js:117:57)
    at /Users/giancarlo/Lab/ng-ssr-fire/node_modules/tslib/tslib.js:110:75

If I don't set bundleDependencies to false, I get this error:


/Users/giancarlo/Lab/ng-ssr-fire/dist/ng-ssr-fire/server/main.js:1
!function(e,a){for(var i in a)e[i]=a[i]}(exports,function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}return __webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==t

Error: package.json does not exist at /Users/giancarlo/Lab/ng-ssr-fire/dist/ng-ssr-fire/package.json
    at Object.PsoT.exports.find (/Users/giancarlo/Lab/ng-ssr-fire/dist/ng-ssr-fire/server/main.js:1:1976398)
    at Object.wPNL (/Users/giancarlo/Lab/ng-ssr-fire/dist/ng-ssr-fire/server/main.js:1:3479745)
    at __webpack_require__ (/Users/giancarlo/Lab/ng-ssr-fire/dist/ng-ssr-fire/server/main.js:1:295)
    at Object.XpdW (/Users/giancarlo/Lab/ng-ssr-fire/dist/ng-ssr-fire/server/main.js:1:2178193)
    at __webpack_require__ (/Users/giancarlo/Lab/ng-ssr-fire/dist/ng-ssr-fire/server/main.js:1:295)
    at Object.g1pB (/Users/giancarlo/Lab/ng-ssr-fire/dist/ng-ssr-fire/server/main.js:1:2904722)
    at __webpack_require__ (/Users/giancarlo/Lab/ng-ssr-fire/dist/ng-ssr-fire/server/main.js:1:295)
    at Object.Ou8q (/Users/giancarlo/Lab/ng-ssr-fire/dist/ng-ssr-fire/server/main.js:1:1935573)
    at __webpack_require__ (/Users/giancarlo/Lab/ng-ssr-fire/dist/ng-ssr-fire/server/main.js:1:295)
    at Object.BYZf (/Users/giancarlo/Lab/ng-ssr-fire/dist/ng-ssr-fire/server/main.js:1:1279835)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ng-ssr-fire@0.0.0 serve:ssr: `node dist/ng-ssr-fire/server/main.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the ng-ssr-fire@0.0.0 serve:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/giancarlo/.npm/_logs/2020-01-03T18_01_46_267Z-debug.log

I also tried running
$ ngcc --properties es2015 browser module main --create-ivy-entry-points --first-only
and
$ ngcc --properties es2015 browser module main --create-ivy-entry-points

It's weird I am not getting the same error. I'll try more configurations.

alan-agius4 · 2020-01-03T18:14:24Z

I'll take a look at the repo in the coming days. But ngcc --properties es2015 browser module main --create-ivy-entry-points --first-only will definitely not work with SSR.

See the docs: https://next.angular.io/guide/ivy#ivy-and-universalapp-shell

Gbuomprisco · 2020-01-03T18:23:13Z

Thanks a lot, I'll be updating the comment as I try more stuff

alan-agius4 · 2020-01-06T10:57:10Z

@Gbuomprisco, thanks for the reproduction. I was able to look at it. To resolve the package.json does not exist error. You'd need to add grpc as externalDependencies.

Ex:

        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/ng-ssr-fire/server",
            "main": "server.ts",
            "tsConfig": "tsconfig.server.json",
            "externalDependencies": [
              "grpc"
            ]
          },
          "configurations": {
            "production": {
              "outputHashing": "media",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "sourceMap": false,
              "optimization": true
            }
          }
        },

Gbuomprisco · 2020-01-07T18:47:15Z

Hey @alan-agius4, thank you for looking into this. Unfortunately, it looks like some issues remain.

With the repository I posted, I am getting this issue:


/Users/giancarlo/Lab/ng-ssr-fire/dist/ng-ssr-fire/server/main.js:1
!function(e,a){for(var i in a)e[i]=a[i]}(exports,function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}return __webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==t

Error: ENOENT: no such file or directory, open 'google/protobuf/api.proto'
    at Object.openSync (fs.js:447:3)
    at Object.readFileSync (fs.js:349:35)
    at fetch (/Users/giancarlo/Lab/ng-ssr-fire/dist/ng-ssr-fire/server/main.js:1:915476)
    at Root.load (/Users/giancarlo/Lab/ng-ssr-fire/dist/ng-ssr-fire/server/main.js:1:915882)
    at Root.loadSync (/Users/giancarlo/Lab/ng-ssr-fire/dist/ng-ssr-fire/server/main.js:1:916062)
    at Object.loadSync (/Users/giancarlo/Lab/ng-ssr-fire/dist/ng-ssr-fire/server/main.js:1:1934502)
    at Object.8ZNE (/Users/giancarlo/Lab/ng-ssr-fire/dist/ng-ssr-fire/server/main.js:1:1425413)
    at __webpack_require__ (/Users/giancarlo/Lab/ng-ssr-fire/dist/ng-ssr-fire/server/main.js:1:295)
    at Object.BYZf (/Users/giancarlo/Lab/ng-ssr-fire/dist/ng-ssr-fire/server/main.js:1:1450557)
    at __webpack_require__ (/Users/giancarlo/Lab/ng-ssr-fire/dist/ng-ssr-fire/server/main.js:1:295) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: 'google/protobuf/api.proto'
}

With my actual project, instead, I am getting this:

AngularFireAuth.ɵprov = ɵngcc0.ɵɵdefineInjectable({ token: AngularFireAuth, factory: function (t) { return AngularFireAuth.ɵfac(t); } });
                               ^

TypeError: ɵngcc0.ɵɵdefineInjectable is not a function
    at /Users/giancarlo/Lab/project/dist/server/main.js:97138:32
    at /Users/giancarlo/Lab/project/dist/server/main.js:97154:6
    at /Users/giancarlo/Lab/project/dist/server/main.js:97091:13
    at Object.../../node_modules/@angular/fire/__ivy_ngcc__/bundles/auth.umd.js (/Users/giancarlo/Lab/project/dist/server/main.js:97093:2)
    at __webpack_require__ (/Users/giancarlo/Lab/project/dist/server/main.js:20:30)
    at Object../src/app/app.module.ts (/Users/giancarlo/Lab/project/dist/server/main.js:222898:14)
    at __webpack_require__ (/Users/giancarlo/Lab/project/dist/server/main.js:20:30)
    at Object../src/app/app.server.module.ts (/Users/giancarlo/Lab/project/dist/server/main.js:223005:20)
    at __webpack_require__ (/Users/giancarlo/Lab/project/dist/server/main.js:20:30)
    at Object../src/main.server.ts (/Users/giancarlo/Lab/project/dist/server/main.js:231340:27)

bharatbiswal · 2020-01-08T07:34:43Z

@Gbuomprisco, thanks for the reproduction. I was able to look at it. To resolve the package.json does not exist error. You'd need to add grpc as externalDependencies.

Ex:

        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/ng-ssr-fire/server",
            "main": "server.ts",
            "tsConfig": "tsconfig.server.json",
            "externalDependencies": [
              "grpc"
            ]
          },
          "configurations": {
            "production": {
              "outputHashing": "media",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "sourceMap": false,
              "optimization": true
            }
          }
        },

I am getting following error:

Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(externalDependencies).

alan-agius4 · 2020-01-08T11:54:18Z

@bharatbiswal, you need to update to Angular and Angular-CLI 9.

alan-agius4 · 2020-01-08T11:54:57Z

@Gbuomprisco, I’ll take a look at the other errors later on today.

alan-agius4 · 2020-01-08T13:32:42Z

@Gbuomprisco the ɵngcc0.ɵɵdefineInjectable is not a function error is related to angular/angular#34653

For the other error try adding the below:

"externalDependencies": [
  "grpc",
  "@grpc/proto-loader"
]

kuncevic · 2020-01-11T23:13:53Z

Might be related angular/angularfire#2284

ritikrishu · 2020-01-17T16:43:50Z

"@grpc/proto-loader"

this does resolve the build error. but when the function executes, it gives a runtime error

ERROR Error: ENOENT: no such file or directory, open '/Users/ritikrishu/Documents/Personal/gumnam-blog/functions/dist/gumnam-blog/server/src/protos/google/firestore/v1/firestore.proto'
>      at Object.openSync (fs.js:440:3)
>      at Object.readFileSync (fs.js:342:35)
>      at fetch (/Users/ritikrishu/Documents/Personal/gumnam-blog/functions/node_modules/protobufjs/src/root.js:160:34)
>      at Root.load (/Users/ritikrishu/Documents/Personal/gumnam-blog/functions/node_modules/protobufjs/src/root.js:194:13)
>      at Root.loadSync (/Users/ritikrishu/Documents/Personal/gumnam-blog/functions/node_modules/protobufjs/src/root.js:235:17)
>      at Object.loadSync (/Users/ritikrishu/Documents/Personal/gumnam-blog/functions/node_modules/@grpc/proto-loader/build/src/index.js:221:27)
>      at loadProtos (/Users/ritikrishu/Documents/Personal/gumnam-blog/functions/dist/gumnam-blog/server/main.js:1:1597303)
>      at NodePlatform.loadConnection (/Users/ritikrishu/Documents/Personal/gumnam-blog/functions/dist/gumnam-blog/server/main.js:1:1597460)
>      at FirestoreClient.initializeRest (/Users/ritikrishu/Documents/Personal/gumnam-blog/functions/dist/gumnam-blog/server/main.js:1:1508557)
>      at /Users/ritikrishu/Documents/Personal/gumnam-blog/functions/dist/gumnam-blog/server/main.js:1:1505438 {

angular version 9^

alan-agius4 · 2020-01-17T17:21:16Z

@ranjitpatra you also need to exclude grpc from bundling.

See: #1207 (comment)

naingaungphyo · 2020-01-26T02:37:45Z

@kuncevic yeah, I got the same error for using angularfire. current workaround is by setting grpc as externalDependencies as @alan-agius4 said.

codemysoul · 2020-02-17T16:48:24Z

If you can, you could create a separate module for Browser, and import AngularFire modules there.

For example, create a app.browser.module.ts - and add all your AngularFire imports there.

Then just point your main.ts file to bootstrap from that module instead.

ritikrishu · 2020-02-25T16:08:14Z

@codemysoul there is no point of SSR, if you only include those in the browser bundle.

ahelmel · 2020-04-10T11:14:44Z

I have a similar issue.
I added grpc and @grpc/proto-loader as externalDependencies in angular.json.
But now on runtime when running serve:ssr I get the following error:

Error: ENOENT: no such file or directory, open '/dist/cv/server/src/protos/google/firestore/v1/firestore.proto'

I am using angular: 9.1.1, firebase: 7.14.0 and @angular/fire: 6.0.0.
Any ideas?

curiouscod3 · 2020-04-10T11:59:16Z

This is still happening in 9.1

adding grpc stuff in angular.json doesn't work!

> Error: ENOENT: no such file or directory, open 'google/protobuf/api.proto'
>     at Object.openSync (fs.js:457:3)
>     at Object.readFileSync (fs.js:359:35)

Angular CLI: 9.1.1
Node: 12.16.1
OS: darwin x64

Angular: 9.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.7
@angular-devkit/build-angular     0.901.1
@angular-devkit/build-optimizer   0.901.1
@angular-devkit/build-webpack     0.901.1
@angular-devkit/core              9.0.7
@angular-devkit/schematics        9.1.1
@angular/cdk                      9.2.0
@angular/fire                     6.0.0
@angular/flex-layout              9.0.0-beta.29
@angular/material                 9.2.0
@ngtools/webpack                  9.1.1
@nguniversal/builders             9.1.0
@nguniversal/common               9.1.0
@nguniversal/express-engine       9.1.0
@schematics/angular               9.1.1
@schematics/update                0.901.1
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

hiepxanh · 2020-04-11T01:19:09Z

add this @firebase/firestore to externalDependencies

// angular.json
// projects.web.architect
...
 "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            ...
            "externalDependencies": [
              "@firebase/firestore"
            ]
            ...
          }

I already create an PR to clarify that https://github.com/angular/angularfire/pull/2372/files?short_path=e76f33d#diff-e76f33db0439ee8e320dfa7ecf47f09b

hiepxanh · 2020-04-11T01:20:21Z

example repository follow that instruction above here: https://github.com/hiepxanh/angular-fire-universal
and official example using webpack here: https://github.com/angular/angularfire/tree/master/sample

herreraLeonar · 2020-05-03T13:53:10Z

I fixed error "Element is not defined" deleting "ng-inline-svg": "^8.5.1", in package.json, Angular 9

AnriTapel · 2020-07-09T19:48:43Z

Adding grpc, @grpc/proto-loader, @firebase/firestore to externalDependencies helped me, so thanks to all of you! Been strugglin' with this issue for three weeks!

alan-agius4 · 2022-10-14T21:02:25Z

Thanks for reporting this issue. Luckily, it has already been fixed in one of the recent releases. Please update to the most recent version to resolve the problem.

angular-automatic-lock-bot · 2022-11-14T08:03:32Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

vikerman mentioned this issue Jul 30, 2019

TypeError: __webpack_require__(...) is not a function #1195

Closed

vikerman mentioned this issue Jul 30, 2019

Provide a way to specify externals in the server build #1213

Closed

vikerman added the need: repro steps We cannot reproduce the issue with the information given label Sep 25, 2019

alan-agius4 self-assigned this Jan 3, 2020

alan-agius4 added need: investigation Requires some digging to determine if action is needed type: bug/fix and removed need: repro steps We cannot reproduce the issue with the information given labels Jan 3, 2020

northern mentioned this issue Jan 10, 2020

Unable to bundle bcrypt parcel-bundler/parcel#3977

Closed

hiepxanh mentioned this issue Feb 7, 2020

Angular Ivy 9.0 stable and angularfire RC1 using Firestore have trouble with Universal angular/angularfire#2320

Closed

alan-agius4 mentioned this issue Feb 17, 2020

package.json does not exist with firebase. #1513

Closed

hiepxanh mentioned this issue Apr 11, 2020

(Universal) Update getting-started.md angular/angularfire#2372

Closed

alan-agius4 closed this as completed Oct 14, 2022

angular-automatic-lock-bot bot locked and limited conversation to collaborators Nov 14, 2022

npm run serve:ssr : package.json does not exist #1207

npm run serve:ssr : package.json does not exist #1207

Comments

anuragd7 commented Jul 22, 2019

Bug Report

What is the expected behavior?

What is the current behavior?

What modules are related to this issue?

Minimal reproduction with instructions:

What is the use-case or motivation for changing an existing behavior?

Environment:

Is there anything else we should know?

bdairy commented Jul 25, 2019

anuragd7 commented Jul 26, 2019

kpsrinivas commented Jul 27, 2019 • edited Loading

vikerman commented Jul 30, 2019

kpsrinivas commented Jul 30, 2019

kpsrinivas commented Jul 30, 2019 • edited Loading

vikerman commented Jul 30, 2019 • edited Loading

darshanDevrai commented Aug 26, 2019

Mph1399 commented Sep 11, 2019

BeSpunky commented Sep 11, 2019

zeeshanshanif commented Sep 16, 2019

vikerman commented Sep 16, 2019

unrealbato commented Nov 10, 2019

BeSpunky commented Nov 10, 2019

Gbuomprisco commented Dec 31, 2019 • edited Loading

alan-agius4 commented Dec 31, 2019

Gbuomprisco commented Jan 2, 2020

alan-agius4 commented Jan 3, 2020 • edited Loading

Gbuomprisco commented Jan 3, 2020

Gbuomprisco commented Jan 3, 2020 • edited Loading

alan-agius4 commented Jan 3, 2020

Gbuomprisco commented Jan 3, 2020

alan-agius4 commented Jan 6, 2020

Gbuomprisco commented Jan 7, 2020

bharatbiswal commented Jan 8, 2020

alan-agius4 commented Jan 8, 2020

alan-agius4 commented Jan 8, 2020

alan-agius4 commented Jan 8, 2020 • edited Loading

kuncevic commented Jan 11, 2020

ritikrishu commented Jan 17, 2020

alan-agius4 commented Jan 17, 2020

naingaungphyo commented Jan 26, 2020

codemysoul commented Feb 17, 2020

ritikrishu commented Feb 25, 2020

ahelmel commented Apr 10, 2020 • edited Loading

curiouscod3 commented Apr 10, 2020 • edited Loading

hiepxanh commented Apr 11, 2020

hiepxanh commented Apr 11, 2020

herreraLeonar commented May 3, 2020

AnriTapel commented Jul 9, 2020

alan-agius4 commented Oct 14, 2022

angular-automatic-lock-bot bot commented Nov 14, 2022

kpsrinivas commented Jul 27, 2019 •

edited

Loading

kpsrinivas commented Jul 30, 2019 •

edited

Loading

vikerman commented Jul 30, 2019 •

edited

Loading

Gbuomprisco commented Dec 31, 2019 •

edited

Loading

alan-agius4 commented Jan 3, 2020 •

edited

Loading

Gbuomprisco commented Jan 3, 2020 •

edited

Loading

alan-agius4 commented Jan 8, 2020 •

edited

Loading

ahelmel commented Apr 10, 2020 •

edited

Loading

curiouscod3 commented Apr 10, 2020 •

edited

Loading