Question

页面在Angular Universal服务器端渲染器中加载两次

当我第一次加载该网站时，此页面随即出现，然后出现动画加载...，然后再次显示内容页面。

显示页面内容后的

我使用了角度6，有些页面没有这个问题

 package.json
    {
  "name": "angular-io-example",
  "version": "1.0.0",
  "private": true,
  "description": "Example project from an angular.io guide.",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "lint": "tslint ./src/**/*.ts -t verbose",
    "e2e": "ng e2e",
    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
    "serve:ssr": "node dist/server.js",
    "build:client-and-server-bundles": "ng build --prod && ng run angular.io-example:server",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "@angular/upgrade": "^6.0.0",
    "@nguniversal/express-engine": "^6.0.0",
    "@nguniversal/module-map-ngfactory-loader": "^6.0.0",
    "@supply-chain-ventures.com/angular-pdfmake": "0.0.4",
    "@types/pdfkit": "^0.7.36",
    "angular-in-memory-web-api": "^0.6.0",
    "chart.js": "^2.7.2",
    "core-js": "^2.5.4",
    "fs": "0.0.1-security",
    "html-pdf": "^2.2.0",
    "html2canvas": "^1.0.0-alpha.12",
    "jspdf": "^1.4.1",
    "pdfkit": "^0.8.3",
    "pdfmake": "^0.1.38",
    "rxjs": "^6.3.3",
    "zone.js": "^0.8.24"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.0",
    "@angular/cli": "^6.0.0",
    "@angular/compiler-cli": "^6.0.0",
    "@angular/platform-server": "^6.0.0",
    "@types/chart.js": "^2.7.37",
    "@types/jasmine": "~2.8.0",
    "@types/jasminewd2": "^2.0.3",
    "@types/node": "^6.0.45",
    "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": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "lodash": "^4.16.2",
    "phantomjs-prebuilt": "^2.1.7",
    "protractor": "~5.3.0",
    "ts-loader": "^4.2.0",
    "ts-node": "^5.0.1",
    "tslint": "^5.9.1",
    "typescript": "2.7.2",
    "webpack-cli": "^2.0.14"
  },
  "repository": {}
}

server.ts

import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { REQUEST, RESPONSE } from '@nguniversal/express-engine/tokens';
import { enableProdMode } from '@angular/core';

import * as express from 'express';
import { join } from 'path';

enableProdMode();

const app = express();

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

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

import { ngExpressEngine } from '@nguniversal/express-engine';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

app.get('/api/*', (req, res) => {
  res.status(404).send('data requests are not supported');
});

app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

app.get('*', (req, res) => {
  res.render('index', { req });
});

app.listen(PORT, () => {
  console.log(`Node server listening on http://localhost:${PORT}`);
});

角度通用页面加载两次

0 个答案: