问题
I followed this tutorial for creating server side rendered app. After that I run npm install firebase @angular/fire --save and import the modules in the AppModule like this
import { AngularFireModule } from "@angular/fire";
import { AngularFirestoreModule } from "@angular/fire/firestore";
import { AngularFireStorageModule } from "@angular/fire/storage";
AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule,
AngularFireStorageModule,
The error occurs when I try to serve the app using npm run build:ssr && npm run serve:ssr. The error I get is
C:\Users\user\Documents\prueba\PruebaApp\dist\server\main.js:159431
throw new Error("package.json does not exist at " + package_json_path);
^
Error: package.json does not exist at C:\Users\user\Documents\prueba\PruebaApp\dist\package.json
at Object.PsoT.exports.find (C:\Users\user\Documents\prueba\PruebaApp\dist\server\main.js:159431:15)
at Object.wPNL (C:\Users\user\Documents\prueba\PruebaApp\dist\server\main.js:188373:12)
at __webpack_require__ (C:\Users\user\Documents\prueba\PruebaApp\dist\server\main.js:20:30)
at Object.XpdW (C:\Users\user\Documents\prueba\PruebaApp\dist\server\main.js:166719:12)
at __webpack_require__ (C:\Users\user\Documents\prueba\PruebaApp\dist\server\main.js:20:30)
at Object.g1pB (C:\Users\user\Documents\prueba\PruebaApp\dist\server\main.js:175163:27)
at __webpack_require__ (C:\Users\user\Documents\prueba\PruebaApp\dist\server\main.js:20:30)
at Object.Ou8q (C:\Users\user\Documents\prueba\PruebaApp\dist\server\main.js:156910:14)
at __webpack_require__ (C:\Users\user\Documents\prueba\PruebaApp\dist\server\main.js:20:30)
at Object.BYZf (C:\Users\user\Documents\prueba\PruebaApp\dist\server\main.js:21357:12)
If I remove the AngularFirestoreModule the project build and work properly.
Im using Angular 8.1.1 , firebase 6.3.0 and angular/fire 5.2.1
回答1:
This is solution if You want to ssr project from firebase functions.
Proper answer is You need to build your server bundle with --bundleDependencies none or just delete --bundleDependencies all:
Correct row: package.json
"build:client-and-server-bundles": "ng build --prod && ng run Medical-Practice:server:production --bundleDependencies none"
after that if You want to upload ssr to functions you need in ./functions/package.json include all dependencies from main angular project ./package.json
Example: ./functions/package.json
"@angular/animations": "~8.2.0",
"@angular/common": "~8.2.0",
"@angular/compiler": "~8.2.0",
"@angular/core": "~8.2.0",
"@angular/fire": "^5.2.1",
"@angular/forms": "~8.2.0",
"@angular/platform-browser": "~8.2.0",
"@angular/platform-browser-dynamic": "~8.2.0",
"@angular/platform-server": "~8.2.0",
"@angular/router": "~8.2.0",
"@nguniversal/express-engine": "^8.1.1",
"@nguniversal/module-map-ngfactory-loader": "8.1.1",
"express": "^4.15.2",
"firebase": "^6.3.4",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
As we know somehow firebase don't want to work on SSR when dependencies are bundled in a bundle files. Upper solutions works because deploying package.json file to firebase functions and after deploy functions server run npm install command so on regular server there will be a bit different solution.
For example if you want to upload angular ssr with firebase to App Engine im not sure but i thing after deploy it runs npm run start and application starts so you need to change: "start": "npm run serve:ssr" line to: "start": "npm install && npm run serve:ssr". And dont forget to upload package.json together with application.
Important
Just in case i didn't check that on App Engine but may be this will be solution.
回答2:
Have the same bug here, looking at the angularfire docs i've found this guide:
https://github.com/angular/angularfire2/blob/master/docs/universal/getting-started.md
it's not working properly so i've found a solution changing the build process to this:
webpack.server.config.js
const path = require('path');
const webpack = require('webpack');
const APP_NAME = 'YOUR APP NAME HERE'; // CHANGE ME
module.exports = {
entry: { server: './server.ts' },
resolve: { extensions: ['.js', '.ts'] },
mode: 'development',
target: 'node',
externals: [
/* 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/
],
output: {
// Export a UMD of the webpacked server.ts & deps, for
// rendering in Cloud Functions
path: path.join(__dirname, `dist/${APP_NAME}`),
library: 'app',
libraryTarget: 'umd',
filename: '[name].js'
},
module: {
rules: [
{ test: /\.ts$/, loader: 'ts-loader' }
]
},
plugins: [
new webpack.ContextReplacementPlugin(
/(.+)?angular(\\|\/)core(.+)?/,
path.join(__dirname, 'src'), // location of your src
{} // a map of your routes
),
new webpack.ContextReplacementPlugin(
/(.+)?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');
enableProdMode();
// Express server
const app = express();
const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');
const APP_NAME = 'YOUR APP NAME HERE'; // 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.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(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 });
});
// If we're not in the Cloud Functions environment, spin up a Node server
if (!process.env.FUNCTION_NAME) {
app.listen(PORT, () => {
console.log(`Node server listening on http://localhost:${PORT}`);
});
}
package.json
"build": "ng build && npm run build:ssr",
"build:ssr": "ng run cuervo-app:server && npm run webpack:ssr",
"webpack:ssr": "webpack --config webpack.server.config.js",
"serve:ssr": "node dist/cuervo-app/server.js"
Be careful about you app's reference variables!
Hope it helps you too! it was hard to find this solution, i don't know if it is the best one, but official docs didn't work.
Bye!
来源：https://stackoverflow.com/questions/57030914/firebase-firestore-not-working-with-angular-universal-package-json-does-not-exi