要解决这个问题,您可以尝试以下步骤:
npm install @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader
angular.json
文件,并确保在 architect
-> build
-> options
下设置了 "outputPath"
,如下所示:"outputPath": "dist/your-app-name"
angular.json
文件中找到 architect
-> server
-> options
,并确保设置了 "outputPath"
,如下所示:"outputPath": "dist/your-app-name-server"
server.ts
文件,并在文件开头添加以下代码:const domino = require('domino');
const fs = require('fs');
const path = require('path');
const templateA = fs.readFileSync(path.join('dist/your-app-name/browser', 'index.html')).toString();
const win = domino.createWindow(templateA);
global['window'] = win;
global['document'] = win.document;
global['DOMTokenList'] = win.DOMTokenList;
global['Node'] = win.Node;
global['Text'] = win.Text;
global['HTMLElement'] = win.HTMLElement;
global['navigator'] = win.navigator;
server.ts
文件,并找到 app.get('*')
的代码块,将其替换为以下代码:app.get('*', (req, res) => {
res.render('index', { req, res });
});
package.json
文件中找到 "scripts"
字段,修改 serve:ssr
命令,将其修改为以下代码:"serve:ssr": "node dist/your-app-name/server/main.js"
npm run serve:ssr
这些步骤应该可以解决 "document is not defined" 的问题,并正确运行 Angular Universal。