标签: angular-universal

我正在学习angular Universal。在这一步：

ng add @nguniversal/express-engine --clientProject angular.io-example

它应该添加一些文件，即：main.server.ts，但它没有做任何事情。我也用 sudo 尝试了相同的命令。问题是什么？

我在 azure devops 上有一个带有 .net core 和 angular 的应用程序。现在，我想实现 Angular Universal SSR。

然后，我在我的项目上做了：

ng 添加@nguniversal/express-engine --clientProject angular.io-example

我的 package.json 是：

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "npm run build:client-and-server-bundles && npm run compile:server",
    "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "bundle-report": "ng build --extract-css --stats-json && webpack-bundle-analyzer dist/stats.json",
    "compile:server": "webpack --config webpack.server.config.js --progress --colors",
    "serve:ssr": "node dist/server",
    "build:client-and-server-bundles": "ng build --extract-css --prod && ng run Catevering:server:production"
  }

然后，我可以在 …

我在主页上遵循 angular 通用：https : //angular.io/guide/universal

没有通用，我用命令运行我的 angular 项目

ng serve --ssl true --ssl-key /node_modules/browser-sync/lib/server/certs/server.key --ssl-cert /node_modules/browser-sync/lib/server/certs/server.crt --主机 0.0.0.0

现在，我将通用添加到我的项目中，但不知道如何设置它使用“https”运行。
请帮帮我。

这是我的 server.ts

导入 'zone.js/dist/zone-node'; 从“@angular/core”导入{enableProdMode}；
// Express Engine
import {ngExpressEngine} from '@nguniversal/express-engine';
// 为延迟加载导入模块映射 import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';

import * as express from 'express';
从“路径”导入 {join}；

// 在 Prod 模式下更快的服务器渲染（从不需要开发模式）
enableProdMode();

// Express 服务器
const app = express();

const PORT = process.env.PORT || 4000；
const DIST_FOLDER = join(process.cwd(), 'dist/browser');

// * 笔记 ：：
const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');

// …

我想在我的 Angular 项目（Angular 8）上使用Angular Universal. 当我运行以下命令时，它将在dist名为 server 和 browser 的文件夹中创建 2 个文件夹以及另一个名为 server.js 的文件

npm run build:ssr

然后运行以下命令

npm run serve:ssr

我收到以下错误：

Zone.__load_patch('ZoneAwarePromise', function (global, Zone, api) { ^ ReferenceError: 区域未定义

笔记：

第一次运行命令（npm runserve:ssr）时出现以下错误

var DragEvent = window.DragEvent;
^
ReferenceError: window is not defined

通过在 dist 文件夹中的 server.js 文件的开头添加以下代码来修复此问题

const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync(path.join(__dirname, '.','browser', 
'index.html')).toString();
const win = domino.createWindow(template);
global['window'] = win; …

我在我的项目中添加了 Angular Universal（升级到 Angular 8）。这是一个相对较大的工程。解决所有窗口、jquery 和 localstorage 问题后，我已经成功运行该应用程序。但问题是，服务器运行在 localhost:4000 上。当我在浏览器中输入 localhost:4000 时，没有任何反应。但是如果我输入 localhost:4000/index.html，它就会开始正常加载并返回到基本 localhost:4000。然后每条有角度的路线都可以正常工作。但如果我尝试刷新任何页面，它不会加载任何内容。

我的服务器.ts

import 'zone.js/dist/zone-node';
// ssr DOM
const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync(path.join('dist/browser', 'index.html')).toString();
const win = domino.createWindow(template);
global['window'] = win;
Object.defineProperty(win.document.body.style, 'transform', {
  value: () => {
    return {
      enumerable: true,
      configurable: true,
    };
  },
});
// mock documnet
global['document'] = win.document;
// othres mock
global['CSS'] = null;
// global['XMLHttpRequest'] = require('xmlhttprequest').XMLHttpRequest;
global['Prism'] = null;


import …