TypeError: common.ɵsetRootDomAdapter is not a function . Facing problem after serving ssr
TypeError: common.ɵsetRootDomAdapter is not a function . Facing problem after serving ssr
我想在 ssr 上服务我的项目，在安装所有依赖项并使用 npm 运行 build:ssr 构建项目后，它在 npm 运行 serve:ssr 上失败，出现的错误是：
common.ɵsetRootDomAdapter(new DominoAdapter());
^
TypeError: common.ɵsetRootDomAdapter 不是函数
这是我的配置：
Angular CLI: 8.3.28
Node: 12.18.2
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
--------------------------------------------------------------------
@angular-devkit/architect 0.803.26
@angular-devkit/build-angular 0.803.26
@angular-devkit/build-optimizer 0.803.26
@angular-devkit/build-webpack 0.803.26
@angular-devkit/core 8.3.26
@angular-devkit/schematics 8.3.28
@angular/cdk 8.2.3
@angular/cli 8.3.28
@angular/flex-layout 10.0.0-beta.32
@angular/material 8.2.3
@angular/material-moment-adapter 9.2.2
@angular/platform-server 10.1.3
@ngtools/webpack 8.3.26
@nguniversal/express-engine 8.2.6
@nguniversal/module-map-ngfactory-loader 8.2.6
@schematics/angular 8.3.28
@schematics/update 0.803.28
rxjs 6.4.0
typescript 3.5.3
webpack 4.39.2
"dependencies": {
"@agm/core": "^1.1.0",
"@angular/animations": "~8.2.14",
"@angular/cdk": "^8.2.3",
"@angular/common": "~8.2.14",
"@angular/compiler": "~8.2.14",
"@angular/core": "~8.2.14",
"@angular/flex-layout": "^10.0.0-beta.32",
"@angular/forms": "~8.2.14",
"@angular/material": "^8.2.3",
"@angular/material-moment-adapter": "^9.2.2",
"@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/platform-server": "^10.1.3",
"@angular/router": "~8.2.14",
"@fortawesome/angular-fontawesome": "^0.7.0",
"@fortawesome/fontawesome-free": "^5.13.0",
"@fortawesome/fontawesome-svg-core": "^1.2.30",
"@fortawesome/free-brands-svg-icons": "^5.14.0",
"@fortawesome/free-solid-svg-icons": "^5.14.0",
"@fullcalendar/angular": "^4.4.5-beta",
"@fullcalendar/core": "^4.4.2",
"@fullcalendar/daygrid": "^4.4.2",
"@fullcalendar/interaction": "^4.4.0",
"@fullcalendar/list": "^4.4.0",
"@fullcalendar/timegrid": "^4.4.0",
"@ng-bootstrap/ng-bootstrap": "^4.2.2",
"@ngu/carousel": "^1.5.5",
"@nguniversal/express-engine": "^8.2.6",
"@nguniversal/module-map-ngfactory-loader": "^8.2.6",
"@ngx-translate/core": "^12.1.2",
"@ngx-translate/http-loader": "^4.0.0",
"@nicky-lenaers/ngx-scroll-to": "^9.0.0",
"@types/googlemaps": "^3.39.13",
"@types/history": "^4.7.3",
"@types/jquery": "^3.3.35",
"actioncable": "^5.2.4",
"angular-calendar": "^0.28.16",
"angular-font-awesome": "^3.1.2",
"angularx-social-login": "^2.2.1",
"animate.css": "^4.1.0",
"bootstrap": "^3.4.1",
"date-fns": "^2.15.0",
"express": "^4.17.1",
"file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"html2canvas": "^1.0.0-rc.5",
"imagesloaded": "^4.1.4",
"jquery": "^3.5.1",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.15",
"masonry-layout": "^4.2.2",
"moment": "^2.24.0",
"nativescript-angular": "^10.0.0",
"ng-animate": "^0.3.4",
"ng-masonry-grid": "^1.3.0",
"ng-pick-datetime": "^7.0.0",
"ng2-trim-directive": "^2.3.4",
"ng5-slider": "^1.2.4",
"ngx-color-picker": "^9.1.0",
"ngx-dropzone": "^2.2.2",
"ngx-float-button": "^1.0.0",
"ngx-gallery": "^5.10.0",
"ngx-google-places-autocomplete": "^2.0.4",
"ngx-infinite-scroll": "^9.0.0",
"ngx-owl-carousel-o": "^2.1.1",
"ngx-print": "^1.2.0-beta.4",
"ngx-spinner": "^8.1.0",
"nodemon": "^2.0.4",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
server.ts
import 'zone.js/dist/zone-node';
import * as express from 'express';
import {join} from 'path';
const domino = require('domino');
const fs = require('fs');
const path = require('path');
const DIST_FOLDER = join(process.cwd(), 'dist/browser');
const template = fs.readFileSync(path.join(DIST_FOLDER, 'index.html')).toString();
const win = domino.createWindow(template);
global['window'] = win;
global['Node'] = win.Node;
global['navigator'] = win.navigator;
global['Event'] = win.Event;
global['KeyboardEvent'] = win.Event;
global['MouseEvent'] = win.Event;
global['Event']['prototype'] = win.Event.prototype;
global['document'] = win.document;
// Express server
const app = express();
const PORT = process.env.PORT || 4000;
// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap} = require('./dist/server/main');
// 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', DIST_FOLDER);
// 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('../dist/browser/index', { req });
});
// Start up the Node server
app.listen(PORT, () => {
console.log(`Node Express server listening on http://localhost:${PORT}`);
});
将 package.json 和 [=17 中的版本 "@angular/platform-server": "^10.1.3" 更改为 "@angular/platform-server": "^8.2.14" =] 命令 npm 安装。在那之后 npm 运行 build:ssr 和 npm 运行 serve:ssr.
我想在 ssr 上服务我的项目，在安装所有依赖项并使用 npm 运行 build:ssr 构建项目后，它在 npm 运行 serve:ssr 上失败，出现的错误是： common.ɵsetRootDomAdapter(new DominoAdapter()); ^ TypeError: common.ɵsetRootDomAdapter 不是函数
这是我的配置：
Angular CLI: 8.3.28
Node: 12.18.2
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
--------------------------------------------------------------------
@angular-devkit/architect 0.803.26
@angular-devkit/build-angular 0.803.26
@angular-devkit/build-optimizer 0.803.26
@angular-devkit/build-webpack 0.803.26
@angular-devkit/core 8.3.26
@angular-devkit/schematics 8.3.28
@angular/cdk 8.2.3
@angular/cli 8.3.28
@angular/flex-layout 10.0.0-beta.32
@angular/material 8.2.3
@angular/material-moment-adapter 9.2.2
@angular/platform-server 10.1.3
@ngtools/webpack 8.3.26
@nguniversal/express-engine 8.2.6
@nguniversal/module-map-ngfactory-loader 8.2.6
@schematics/angular 8.3.28
@schematics/update 0.803.28
rxjs 6.4.0
typescript 3.5.3
webpack 4.39.2
"dependencies": {
"@agm/core": "^1.1.0",
"@angular/animations": "~8.2.14",
"@angular/cdk": "^8.2.3",
"@angular/common": "~8.2.14",
"@angular/compiler": "~8.2.14",
"@angular/core": "~8.2.14",
"@angular/flex-layout": "^10.0.0-beta.32",
"@angular/forms": "~8.2.14",
"@angular/material": "^8.2.3",
"@angular/material-moment-adapter": "^9.2.2",
"@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/platform-server": "^10.1.3",
"@angular/router": "~8.2.14",
"@fortawesome/angular-fontawesome": "^0.7.0",
"@fortawesome/fontawesome-free": "^5.13.0",
"@fortawesome/fontawesome-svg-core": "^1.2.30",
"@fortawesome/free-brands-svg-icons": "^5.14.0",
"@fortawesome/free-solid-svg-icons": "^5.14.0",
"@fullcalendar/angular": "^4.4.5-beta",
"@fullcalendar/core": "^4.4.2",
"@fullcalendar/daygrid": "^4.4.2",
"@fullcalendar/interaction": "^4.4.0",
"@fullcalendar/list": "^4.4.0",
"@fullcalendar/timegrid": "^4.4.0",
"@ng-bootstrap/ng-bootstrap": "^4.2.2",
"@ngu/carousel": "^1.5.5",
"@nguniversal/express-engine": "^8.2.6",
"@nguniversal/module-map-ngfactory-loader": "^8.2.6",
"@ngx-translate/core": "^12.1.2",
"@ngx-translate/http-loader": "^4.0.0",
"@nicky-lenaers/ngx-scroll-to": "^9.0.0",
"@types/googlemaps": "^3.39.13",
"@types/history": "^4.7.3",
"@types/jquery": "^3.3.35",
"actioncable": "^5.2.4",
"angular-calendar": "^0.28.16",
"angular-font-awesome": "^3.1.2",
"angularx-social-login": "^2.2.1",
"animate.css": "^4.1.0",
"bootstrap": "^3.4.1",
"date-fns": "^2.15.0",
"express": "^4.17.1",
"file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"html2canvas": "^1.0.0-rc.5",
"imagesloaded": "^4.1.4",
"jquery": "^3.5.1",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.15",
"masonry-layout": "^4.2.2",
"moment": "^2.24.0",
"nativescript-angular": "^10.0.0",
"ng-animate": "^0.3.4",
"ng-masonry-grid": "^1.3.0",
"ng-pick-datetime": "^7.0.0",
"ng2-trim-directive": "^2.3.4",
"ng5-slider": "^1.2.4",
"ngx-color-picker": "^9.1.0",
"ngx-dropzone": "^2.2.2",
"ngx-float-button": "^1.0.0",
"ngx-gallery": "^5.10.0",
"ngx-google-places-autocomplete": "^2.0.4",
"ngx-infinite-scroll": "^9.0.0",
"ngx-owl-carousel-o": "^2.1.1",
"ngx-print": "^1.2.0-beta.4",
"ngx-spinner": "^8.1.0",
"nodemon": "^2.0.4",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
server.ts
import 'zone.js/dist/zone-node';
import * as express from 'express';
import {join} from 'path';
const domino = require('domino');
const fs = require('fs');
const path = require('path');
const DIST_FOLDER = join(process.cwd(), 'dist/browser');
const template = fs.readFileSync(path.join(DIST_FOLDER, 'index.html')).toString();
const win = domino.createWindow(template);
global['window'] = win;
global['Node'] = win.Node;
global['navigator'] = win.navigator;
global['Event'] = win.Event;
global['KeyboardEvent'] = win.Event;
global['MouseEvent'] = win.Event;
global['Event']['prototype'] = win.Event.prototype;
global['document'] = win.document;
// Express server
const app = express();
const PORT = process.env.PORT || 4000;
// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap} = require('./dist/server/main');
// 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', DIST_FOLDER);
// 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('../dist/browser/index', { req });
});
// Start up the Node server
app.listen(PORT, () => {
console.log(`Node Express server listening on http://localhost:${PORT}`);
});
将 package.json 和 [=17 中的版本 "@angular/platform-server": "^10.1.3" 更改为 "@angular/platform-server": "^8.2.14" =] 命令 npm 安装。在那之后 npm 运行 build:ssr 和 npm 运行 serve:ssr.