Angular 6 Universal с функциями облачной базы
Я новичок в Angular Universal с облачными функциями Firebase.
Я попытался сделать угловую универсальную и развернуть в firebase с использованием облачных функций. И все (сервер Node.js, служба Firebase) работают правильно, но когда я развернул (хостинг и функции) на FireBase, я получил эту ошибку в облачных функциях FireBase.
ERROR { Error: Uncaught (in promise): TypeError: Cannot read property 'ngInjectableDef' of undefined
TypeError: Cannot read property 'ngInjectableDef' of undefined
at resolveNgModuleDep (/user_code/node_modules/@angular/core/bundles/core.umd.js:8160:34)
at _createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:8229:36)
at _createProviderInstance (/user_code/node_modules/@angular/core/bundles/core.umd.js:8193:30)
at resolveNgModuleDep (/user_code/node_modules/@angular/core/bundles/core.umd.js:8156:25)
at NgModuleRef_.get (/user_code/node_modules/@angular/core/bundles/core.umd.js:8864:20)
at resolveDep (/user_code/node_modules/@angular/core/bundles/core.umd.js:9229:49)
at createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:9109:36)
at createDirectiveInstance (/user_code/node_modules/@angular/core/bundles/core.umd.js:8986:24)
at createViewNodes (/user_code/node_modules/@angular/core/bundles/core.umd.js:10206:40)
at createRootView (/user_code/node_modules/@angular/core/bundles/core.umd.js:10120:9)
at resolvePromise (/user_code/node_modules/zone.js/dist/zone-node.js:814:31)
at resolvePromise (/user_code/node_modules/zone.js/dist/zone-node.js:771:17)
at /user_code/node_modules/zone.js/dist/zone-node.js:873:17
at ZoneDelegate.invokeTask (/user_code/node_modules/zone.js/dist/zone-node.js:421:31)
at Object.onInvokeTask (/user_code/node_modules/@angular/core/bundles/core.umd.js:3804:37)
at ZoneDelegate.invokeTask (/user_code/node_modules/zone.js/dist/zone-node.js:420:36)
at Zone.runTask (/user_code/node_modules/zone.js/dist/zone-node.js:188:47)
at drainMicroTaskQueue (/user_code/node_modules/zone.js/dist/zone-node.js:595:35)
at ZoneTask.invokeTask (/user_code/node_modules/zone.js/dist/zone-node.js:500:21)
at ZoneTask.invoke (/user_code/node_modules/zone.js/dist/zone-node.js:485:48)
rejection:
TypeError: Cannot read property 'ngInjectableDef' of undefined
at resolveNgModuleDep (/user_code/node_modules/@angular/core/bundles/core.umd.js:8160:34)
at _createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:8229:36)
at _createProviderInstance (/user_code/node_modules/@angular/core/bundles/core.umd.js:8193:30)
at resolveNgModuleDep (/user_code/node_modules/@angular/core/bundles/core.umd.js:8156:25)
at NgModuleRef_.get (/user_code/node_modules/@angular/core/bundles/core.umd.js:8864:20)
at resolveDep (/user_code/node_modules/@angular/core/bundles/core.umd.js:9229:49)
at createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:9109:36)
at createDirectiveInstance (/user_code/node_modules/@angular/core/bundles/core.umd.js:8986:24)
at createViewNodes (/user_code/node_modules/@angular/core/bundles/core.umd.js:10206:40)
at createRootView (/user_code/node_modules/@angular/core/bundles/core.umd.js:10120:9),
promise:
ZoneAwarePromise {
__zone_symbol__state: 0,
__zone_symbol__value:
TypeError: Cannot read property 'ngInjectableDef' of undefined
at resolveNgModuleDep (/user_code/node_modules/@angular/core/bundles/core.umd.js:8160:34)
at _createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:8229:36)
at _createProviderInstance (/user_code/node_modules/@angular/core/bundles/core.umd.js:8193:30)
at resolveNgModuleDep (/user_code/node_modules/@angular/core/bundles/core.umd.js:8156:25)
at NgModuleRef_.get (/user_code/node_modules/@angular/core/bundles/core.umd.js:8864:20)
at resolveDep (/user_code/node_modules/@angular/core/bundles/core.umd.js:9229:49)
at createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:9109:36)
at createDirectiveInstance (/user_code/node_modules/@angular/core/bundles/core.umd.js:8986:24)
at createViewNodes (/user_code/node_modules/@angular/core/bundles/core.umd.js:10206:40)
at createRootView (/user_code/node_modules/@angular/core/bundles/core.umd.js:10120:9) },
zone:
Zone {
_properties: { isAngularZone: true },
_parent:
Zone {
_properties: {},
_parent: null,
_name: '<root>',
_zoneDelegate: [Object] },
_name: 'angular',
_zoneDelegate:
ZoneDelegate {
_taskCounts: [Object],
zone: [Circular],
_parentDelegate: [Object],
_forkZS: null,
_forkDlgt: null,
_forkCurrZone: [Object],
_interceptZS: null,
_interceptDlgt: null,
_interceptCurrZone: [Object],
_invokeZS: [Object],
_invokeDlgt: [Object],
_invokeCurrZone: [Circular],
_handleErrorZS: [Object],
_handleErrorDlgt: [Object],
_handleErrorCurrZone: [Circular],
_scheduleTaskZS: [Object],
_scheduleTaskDlgt: [Object],
_scheduleTaskCurrZone: [Circular],
_invokeTaskZS: [Object],
_invoke
Я пытался переустановить node_modules но все же получил эту ошибку в облачных функциях. Как я мог исправить эту ошибку? Пожалуйста помоги.
Это мое package.json
{
"name": "myproject",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"webpack:prerender": "webpack --config webpack.prerender.config.js",
"build:prerender": "node dist/browser/prerender.js",
"serve:prerender": "http-server dist/browser -o",
"build:all": "ng build --prod && ng run myproject:server && npm run webpack:prerender && npm run build:prerender"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.3",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/platform-server": "^6.0.3",
"@angular/router": "^6.0.3",
"@nguniversal/express-engine": "^6.0.0",
"@nguniversal/module-map-ngfactory-loader": "^6.0.0",
"angularfire2": "^5.0.0-rc.11",
"core-js": "^2.5.4",
"firebase": "^5.3.0",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.8",
"@angular/cli": "~6.0.8",
"@angular/compiler-cli": "^6.0.3",
"@angular/language-service": "^6.0.3",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"fs-extra": "^7.0.0",
"http-server": "^0.11.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-loader": "^4.4.2",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~2.7.2",
"webpack-cli": "^3.1.0",
"ws": "^6.0.0",
"xmlhttprequest": "^1.8.0"
}
}
server.ts
// These are important and needed before anything else
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
// DOM libs required for Firebase
(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;
import { enableProdMode } from '@angular/core';
import * as express from 'express';
import { ngExpressEngine } from '@nguniversal/express-engine';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import { join } from 'path';
const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');
const APP_NAME = 'browser';
const {
AppServerModuleNgFactory,
LAZY_MODULE_MAP
} = require(`./dist/server/main`);
enableProdMode();
const app = express();
// Set the engine
app.engine(
'html',
ngExpressEngine({
bootstrap: AppServerModuleNgFactory,
providers: [provideModuleMap(LAZY_MODULE_MAP)]
})
);
app.set('view engine', 'html');
app.get('/**/*', (req, res) => {
res.render(join(DIST_FOLDER, APP_NAME, 'index'), {
req,
res
});
});
app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, APP_NAME));
// Static Assets
app.get('*.*', express.static(join(DIST_FOLDER, APP_NAME)));
// Point all routes to Universal
app.get('*', (req, res) => {
res.render('index', { req });
});
// Start Express Server
app.listen(PORT, () => {
console.log(`Node Express server listening on http://localhost:${PORT}`);
});
webpack.prerender.config.js
const path = require('path');
const webpack = require('webpack');
const APP_NAME = 'browser';
module.exports = {
entry: { prerender: './server.ts' },
resolve: { extensions: ['.js', '.ts'] },
mode: 'development',
target: 'node',
externals: [/(node_modules|main\..*\.js)/],
output: {
path: path.join(__dirname, `dist/${APP_NAME}`),
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'),
{}
)
]
}
Это functions/index.js
require('zone.js/dist/zone-node');
const functions = require('firebase-functions');
const express = require('express');
const path = require('path');
const { enableProdMode } = require('@angular/core');
const { renderModuleFactory } = require('@angular/platform-server');
const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
enableProdMode();
const index = require('fs')
.readFileSync(path.resolve(__dirname, './dist/browser/index.html'), 'utf8')
.toString();
let app = express();
app.get('**', function(req, res) {
renderModuleFactory(AppServerModuleNgFactory, {
url: req.path,
document: index,
extraProviders: [
provideModuleMap(LAZY_MODULE_MAP)
]
}).then(html => res.status(200).send(html));
});
exports.universal = functions.https.onRequest(app);