Angular 服务器端渲染问题 [区域已加载]

【问题标题】：Angular server side rendering issue [Zone already loaded]Angular 服务器端渲染问题 [区域已加载]
【发布时间】：2018-10-14 15:15:12
【问题描述】：

我能够为服务器端渲染构建应用程序，但是当我运行 server.ts 文件时出现此错误。 命令： 

"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 build --prod --app 1 --output-hashing=false",
"webpack:server": "node --max_old_space_size=5110 ./node_modules/webpack/bin/webpack.js --config webpack.server.config.js --progress --colors",

我试图在整个项目中找到 zone.js，但只在 polyfills.js 和 server.ts 文件中找到它。我试图评论并在 server.ts 文件区域导入行并再次构建它，但它不起作用。我还尝试在 polyfills.js 中对其进行注释并重新构建它，但它不起作用。

我找不到问题是什么原因造成的？任何帮助，将不胜感激。您可以在下面找到一些配置文件。如果您需要任何其他文件，请发表评论。

只有在我尝试实现服务器端渲染时才会出现此问题。否则没有它，它工作正常。

.angular-cli.json

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
        "version": "1.0.0",
        "name": "demo"
    },
    "apps": [
        {
            "root": "src",
            "outDir": "dist/browser",
            "assets": [
                "assets"
            ],
            "index": "index.html",
            "main": "main.ts",
            "polyfills": "polyfills.ts",
            "test": "test.ts",
            "tsconfig": "tsconfig.app.json",
            "testTsconfig": "tsconfig.spec.json",
            "prefix": "app",
            "styles": [
                "../node_modules/font-awesome/scss/font-awesome.scss",
                "../node_modules/simple-line-icons/css/simple-line-icons.css",
                "scss/style.scss",
                "../node_modules/primeng/resources/themes/omega/theme.scss",
                "../node_modules/primeng/resources/primeng.min.css",
                "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css",
                "../node_modules/npm-font-open-sans/open-sans.scss"
            ],
            "scripts": [
            ],
            "environmentSource": "environments/environment.ts",
            "environments": {
                "dev": "environments/environment.ts",
                "prod": "environments/environment.prod.ts"
            }
        },
        {
            "platform": "server",
            "root": "src",
            "outDir": "dist/server",
            "assets": [
            "assets",
                "assets"
            ],
            "index": "index.html",
            "main": "main.server.ts",
            "test": "test.ts",
            "tsconfig": "tsconfig.server.json",
            "testTsconfig": "tsconfig.spec.json",
            "prefix": "app",
            "styles": [
                "../node_modules/font-awesome/scss/font-awesome.scss",
                "../node_modules/simple-line-icons/css/simple-line-icons.css",
                "scss/style.scss",
                "../node_modules/primeng/resources/themes/omega/theme.scss",
                "../node_modules/primeng/resources/primeng.min.css",
                "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css",
                "../node_modules/npm-font-open-sans/open-sans.scss"
            ],
            "scripts": [],
            "environmentSource": "environments/environment.ts",
            "environments": {
                "dev": "environments/environment.ts",
                "prod": "environments/environment.prod.ts"
            }
        }
    ],
    "e2e": {
        "protractor": {
            "config": "./protractor.conf.js"
        }
    },
    "lint": [
        {
            "project": "src/tsconfig.app.json"
        },
        {
            "project": "src/tsconfig.spec.json"
        },
        {
            "project": "e2e/tsconfig.e2e.json"
        }
    ],
    "test": {
        "karma": {
            "config": "./karma.conf.js"
        }
    },
    "defaults": {
        "styleExt": "scss",
        "prefixInterfaces": false
    }
}

webpack.server.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {  server: './server.ts' },
  resolve: { extensions: ['.js', '.ts'] },
  target: 'node',
  // this makes sure we include node_modules and other 3rd party libraries
  externals: [/(node_modules|main\..*\.js)/],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader' },
      { test: /\.(ts|js)$/, loader: 'regexp-replace-loader', query: { match: { pattern: '\\[(Mouse|Keyboard)Event\\]', flags: 'g' }, replaceWith: '[]', } }
    ]
  },
  plugins: [
    // Temporary Fix for issue: https://github.com/angular/angular/issues/11580
    // for "WARNING Critical dependency: the request of a dependency is an expression"
    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'),
      {}
    )
  ]
}

server.ts

//import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import { renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';

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

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

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

// Our index.html we'll use as our template
const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');

const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');

app.engine('html', (_, options, callback) => {
  renderModuleFactory(AppServerModuleNgFactory, {
    // Our index.html
    document: template,
    url: options.req.url,
    // DI so that we can get lazy-loading to work differently (since we need it to just instantly render it)
    extraProviders: [
      provideModuleMap(LAZY_MODULE_MAP)
    ]
  }).then(html => {
    callback(null, html);
  });
});

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

// Server static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });
});

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

Package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "desc",
  "author": "",
  "homepage": "http://www.test.com/",
  "copyright": "Copyright 2017",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port=3333 --live-reload false",
    "build": "ng build --prod --aot=true",
    "test": "ng test",
    "lint": "ng lint",
    "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 build --prod --app 1 --output-hashing=false",
    "webpack:server": "node --max_old_space_size=5110 ./node_modules/webpack/bin/webpack.js --config webpack.server.config.js --progress --colors",
    "compile": "node_modules\\.bin\\webpack.cmd"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/core": "^0.6.0",
    "@angular/animations": "5.2.0", // old: 5.2.3
    "@angular/common": "5.2.0",  // old: 5.2.3
    "@angular/compiler": "5.2.0", // old: 5.2.3
    "@angular/core": "5.2.0", // old: 5.2.3
    "@angular/forms": "5.2.0", // old: 5.2.3
    "@angular/http": "5.2.0", // old: 5.2.3
    "@angular/platform-browser": "5.2.0", // old: 5.2.3
    "@angular/platform-browser-dynamic": "5.2.0", // old: 5.2.3
    "@angular/platform-server": "5.2.0", // old: 5.2.3
    "@angular/router": "5.2.0", // old: 5.2.3
    "@angular/upgrade": "5.2.0", // old: 5.2.3
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0",
    "@swimlane/ngx-charts": "^7.1.1",
    "amazon-cognito-identity-js": "^2.0.2",
    "aws-sdk": "^2.212.1",
    "bootstrap": "4.0.0",
    "core-js": "2.5.3",
    "d3": "^5.0.0",
    "font-awesome": "^4.7.0",
    "moment": "2.20.1",
    "ng2-toastr": "^4.1.2",
    "ngx-bootstrap": "2.0.2",
    "ngx-loading": "^1.0.14",
    "ngx-treeview": "^2.0.5",
    "npm-font-open-sans": "^1.1.0",
    "primeng": "^5.2.0-rc.2",
    "regexp-replace-loader": "^1.0.1",
    "rxjs": "5.5.6",
    "simple-line-icons": "^2.4.1",
    "string-replace-loader": "^2.1.1",
    "ts-helpers": "1.1.2",
    "ts-loader": "^4.2.0",
    "webpack": "^4.6.0",
    "webpack-dev-server": "^3.1.1",
    "zone.js": "0.8.12" // old: 0.8.20
  },
  "devDependencies": {
    "@angular/cli": "1.6.3", // old: 1.6.6
    "@angular/compiler-cli": "5.2.0", // old: 5.2.3
    "@types/jasmine": "2.8.6",
    "@types/node": "^10.0.3",
    "codelyzer": "4.1.0",
    "jasmine-core": "2.9.1",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "2.0.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.4.1",
    "karma-jasmine": "1.1.1",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "5.3.0",
    "ts-node": "4.1.0",
    "tslint": "5.9.1",
    "typescript": "^2.6.0-rc", // old: 2.6.6
    "webpack-cli": "^2.1.2"
  },
  "engines": {
    "node": ">= 6.9.0",
    "npm": ">= 3.0.0"
  }
}

【问题讨论】：

  • 我认为这不是您的代码或配置的问题。相反，它是一个错误。尝试升级或降级您的 Angular。例如你保持你的代码不变，只需将你的 Angular 降级到 5.2.0（因为我得到了这个版本的东西）。如果可行，则确认这是一个错误。在这种情况下，您可以从 5.2.0 版本慢慢升级，并检查它破坏的确切版本。
  • 我做了 5.2.0 但没用。还是一样的错误。我添加了 package.json。看看，如果我做错了什么，请告诉我
  • 好的。然后我不知道确切的原因。可能您应该仔细检查官方指南中的步骤：angular.io/guide/universal 它对我有用。我在 5.2.0 上的工作种子项目在这里github.com/saptarshibasu/angular-universal-setup（以防你想比较配置）。您也可以按照自述文件中详述的步骤运行它..
  • 另外，Webpack 3 不兼容高于 3.5.0 的 ts-loader 版本。在开发这个的时候，Angular CLI 的最新版本是 1.7.2，它使用了 Webpack 3.*。因此，在设置 Angular Universal 时，安装 ts-config@3.5.0
  • 好的，我会试试的

标签： node.js angular server-side-rendering angular-universal zone.js


【解决方案1】：

要解决此问题，您必须在节点模块中搜索 zone.js/dist/zone 导入，然后您有两个变体来解决此问题。首先是评论这个导入或者只是更新库（在我的情况下（ng2-dnd）在新版本中这条线已经消失了）。但我很确定当你修复这个错误时，你会得到类似“找不到模块'。'”的信息。此错误是由 @swimlane/ngx-charts 库引起的。有些图表会导致错误，在我的例子中是 ngx-charts-line-chart。

希望这对您有所帮助，并且将来会节省某人的时间（我浪费了三天时间来解决这个问题）。

【讨论】：

  • 是的，这是由于 ngx-charts 并且可能是由于折线图。我这样做只是为了在我拥有的现有项目中学习，否则它会正常工作
【解决方案2】：

这个问题会在下个版本的zone.js中得到更好的处理，如果zone被加载了，我们在重新加载的时候不会报错。

【讨论】：

    猜你喜欢
    • 2022-01-13
    • 1970-01-01
    • 1970-01-01
    • 2018-03-21
    • 2019-09-07
    • 1970-01-01
    • 1970-01-01
    • 2018-12-13
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode