Angular 7 SSR - NgZone 的问题-6ren

Angular 7 SSR - NgZone 的问题

转载作者：太空狗更新时间：2023-10-29 17:07:59

我最近将我公司的网站从 React 移到了 Angular，因为我们的大多数项目已经在 Angular 7 上。作为“使用最新和最伟大”的人，我决定实现服务器端渲染使谷歌页面速度评级接近 100/100(目前为 42/100)。我在本周的大部分时间里一直在修补它，但没有成功 - 最近的障碍对我来说特别难以克服。这是有关我的设置的简要信息，然后我将详细介绍:

NodeJS 8.9.1

Angular 7 最新

Webpack 4.26.0

@ngtools/webpack 7.0.5

不使用 angular-cli

AoT 设置

单页应用

这是我在尝试呈现为 SSR 设置的 layout.html 文件时遇到的错误:

TypeError: Cannot read property 'subscribe' of undefined
at new ApplicationRef (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:43263:37)
at _createClass (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:46296:20)
at _createProviderInstance (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:46258:26)
at initNgModule (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:46190:32)
at new NgModuleRef_ (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:46918:9)
at createNgModuleRef (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:46907:12)
at Object.debugCreateNgModuleRef [as createNgModuleRef] (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:48738:12)
at NgModuleFactory_.module.exports.NgModuleFactory_.create (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:49466:25)
at C:\code\lemmsoftWebsite\repo\node_modules\@angular\core\bundles\core.umd.js:14656:47
at ZoneDelegate.module.exports.ZoneDelegate.invoke (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:139510:26)
at Object.onInvoke (C:\code\lemmsoftWebsite\repo\node_modules\@angular\core\bundles\core.umd.js:14194:37)
at ZoneDelegate.module.exports.ZoneDelegate.invoke (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:139509:32)
at Zone.module.exports.Zone.run (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:139260:43)
at NgZone.run (C:\code\lemmsoftWebsite\repo\node_modules\@angular\core\bundles\core.umd.js:14108:32)
at PlatformRef.bootstrapModuleFactory (C:\code\lemmsoftWebsite\repo\node_modules\@angular\core\bundles\core.umd.js:14654:27)
at renderModuleFactory (C:\code\lemmsoftWebsite\repo\node_modules\@angular\platform-server\bundles\platform-server.umd.js:1033:43)
at View.module.app.engine (C:\code\lemmsoftWebsite\repo\modules\clients\site\layout\index.js:60:4)
at View.render (C:\code\lemmsoftWebsite\repo\node_modules\express\lib\view.js:135:8)
at tryRender (C:\code\lemmsoftWebsite\repo\node_modules\express\lib\application.js:640:10)
at Function.render (C:\code\lemmsoftWebsite\repo\node_modules\express\lib\application.js:592:3)
at ServerResponse.render (C:\code\lemmsoftWebsite\repo\node_modules\express\lib\response.js:1008:7)
at C:\code\lemmsoftWebsite\repo\modules\clients\site\layout\index.js:83:9

在仔细阅读 main.js 包文件后，我将问题定位为以下几点:

var ApplicationRef = /** @class */ (function () {
    /** @internal */
    function ApplicationRef(_zone, _console, _injector, _exceptionHandler, _componentFactoryResolver, _initStatus) {
        var _this = this;
        this._zone = _zone; // in this method, the _zone argument is {}, so there is no onMicrotaskEmpty method in it => when this._zone.onMicrotaskEmpty.subscribe() is attempted, we get "Cannot read property 'subscribe' of undefined"
        this._console = _console;
        this._injector = _injector;
        this._exceptionHandler = _exceptionHandler;
        this._componentFactoryResolver = _componentFactoryResolver;
        this._initStatus = _initStatus;
        this._bootstrapListeners = [];
        this._views = [];
        this._runningTick = false;
        this._enforceNoNewChanges = false;
        this._stable = true;
        // more code
    }
    // more code
}

在此方法中，_zone 参数是 {}，因此其中没有 onMicrotaskEmpty 方法 => 当尝试 this._zone.onMicrotaskEmpty.subscribe() 时，我们得到“无法读取未定义的属性‘订阅’”。我继续挖掘堆栈跟踪 - 这是上一步，调用 new ApplicationRef 并将 _zone 作为 {} 传递:

function _createClass(ngModule, ctor, deps) {
    var len = deps.length;
    switch (len) {
        case 0:
            return new ctor();
        case 1:
            return new ctor(resolveNgModuleDep(ngModule, deps[0]));
        case 2:
            return new ctor(resolveNgModuleDep(ngModule, deps[0]), resolveNgModuleDep(ngModule, deps[1]));
        case 3:
            return new ctor(resolveNgModuleDep(ngModule, deps[0]), resolveNgModuleDep(ngModule, deps[1]), resolveNgModuleDep(ngModule, deps[2]));
        default:
            // this is where we get some insight into the cause of the error
            var depValues = new Array(len);
            for (var i = 0; i < len; i++) {
                depValues[i] = resolveNgModuleDep(ngModule, deps[i]);
            }
            // if we do console.log(deps[0], depValues[0]), which is _zone, we get interesting stuff... 
            return new (ctor.bind.apply(ctor, Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__spread"])([void 0], depValues)))();
    }
}

这是我们深入了解错误原因的地方 - 在开关的“默认” block 中。如果我们在 for 循环(也就是 _zone)之后使用 console.log(deps[0], depValues[0])，我们会得到一些有趣的东西:

// deps[0]
{ flags: 0,
  token:
   { [Function: NgZone]
     isInAngularZone: [Function],
     assertInAngularZone: [Function],
     assertNotInAngularZone: [Function] },
  tokenKey: 'NgZone_29' }
// depValues[0]
{}

所以，这就是罪魁祸首，我想! 'resolveNgModuleDep' 搞砸了!所以我继续挖掘:

function resolveNgModuleDep(data, depDef, notFoundValue) {
    if (notFoundValue === void 0) { notFoundValue = Injector.THROW_IF_NOT_FOUND; }
    var former = setCurrentInjector(data);
    try {
        if (depDef.flags & 8 /* Value */) {
            return depDef.token;
        }
        if (depDef.flags & 2 /* Optional */) {
            notFoundValue = null;
        }
        if (depDef.flags & 1 /* SkipSelf */) {
            return data._parent.get(depDef.token, notFoundValue);
        }
        var tokenKey_1 = depDef.tokenKey;
        switch (tokenKey_1) {
            case InjectorRefTokenKey:
            case INJECTORRefTokenKey:
            case NgModuleRefTokenKey:
                return data;
        }
        var providerDef = data._def.providersByKey[tokenKey_1];
        var injectableDef = void 0;
        if (providerDef) {
            var providerInstance = data._providers[providerDef.index];
            if (providerInstance === undefined) {
                providerInstance = data._providers[providerDef.index] =
                    _createProviderInstance(data, providerDef);
            }
            return providerInstance === UNDEFINED_VALUE ? undefined : providerInstance;
        }
        else if ((injectableDef = getInjectableDef(depDef.token)) && targetsModule(data, injectableDef)) {
            var index = data._providers.length;
            data._def.providersByKey[depDef.tokenKey] = {
                flags: 1024 /* TypeFactoryProvider */ | 4096 /* LazyProvider */,
                value: injectableDef.factory,
                deps: [], index: index,
                token: depDef.token,
            };
            data._providers[index] = UNDEFINED_VALUE;
            return (data._providers[index] =
                _createProviderInstance(data, data._def.providersByKey[depDef.tokenKey]));
        }
        else if (depDef.flags & 4 /* Self */) {
            return notFoundValue;
		    }
        // there it is!
        return data._parent.get(depDef.token, notFoundValue);
    }
    finally {
        setCurrentInjector(former);
    }
}

就在那里!就在 finally 之前，在返回 data._parent.get(depDef.token, notFoundValue) 的那一行 - 这是传递 depDef.token(在我们的例子中是 NgZone)的地方，notFoundValue 是 null。返回的对象只是 {}，因此所有的麻烦都在后面。
这是我设法得到的，我一直在来回试图从这里解决它，但无济于事。相信我，我已经在 stackoverflow 和谷歌中搜索了一遍又一遍；我已经阅读了 1000 篇中等帖子 - 没有成功。我不使用 angular-cli 是因为我喜欢自定义我的 webpack 配置等，但我怀疑这就是原因，因为 angular-cli 本身在引擎盖下使用 webpack。我将在下面的几个片段中粘贴一些其他内容 - 我的 webpack 配置、呈现 html 和 angular 包的服务器方法等。

// the webpack config

'use strict'

const
	AngularCompilerPlugin = require( "@ngtools/webpack" ).AngularCompilerPlugin,
	BellOnBundlerErrorPlugin = require('bell-on-bundler-error-plugin'),
	BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin,
	path = require('path'),
	ProgressBarPlugin = require('progress-bar-webpack-plugin'),
	UglifyJsPlugin = require('uglifyjs-webpack-plugin'),
	webpack = require('webpack')


module.exports = (config, name) => {
	let includePath = config.clientPath,
		publicPath = path.join(config.publicPath, 'serverBuild'),
		libPath = path.join(__dirname, '../../lib'),
		nodeModulesPath = config.nodeModulesPath,
		include = [includePath]

	return {
		target: 'node',
		mode: 'none',
		entry: [
			path.join(includePath, 'polyfills.ts'),
			path.join(includePath, 'vendor.common.ts'),
			path.join(includePath, 'vendor.server.ts'),
			path.join(includePath, 'index.server.ts')
		],
		output: {
			path: publicPath,
			filename: '[name].js',
			chunkFilename: '[id].chunk.js',
			publicPath: '/dist/',
			libraryTarget: 'commonjs-module'
		},
		resolve: {
			extensions: ['.ts', '.js'],
			modules: ['node_modules', libPath]
		},
		module: {
			rules: [
				{
					test: /\.pug$/,
					include: [libPath, includePath],
					use: ['raw-loader', 'pug-html-loader']
				},
				{
					test: /\.css$/,
					include: [libPath, nodeModulesPath, includePath],
					exclude: [],
					use: ['to-string-loader', 'css-loader']
				},
				{
					test: /\.less$/,
					exclude: [],
					use: ['to-string-loader', 'css-loader', 'less-loader']
				},
				{
					test: /\.scss$/,
					include: [libPath, nodeModulesPath, includePath],
					exclude: [],
					use: ['raw-loader', 'sass-loader']
				},
				{
					test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
					include: [includePath, libPath],
					use: [{
						loader: '@ngtools/webpack'
					}],
					exclude: [/\.(spec|e2e)\.ts$/]
				},
				{
					test: /\.json$/,
					include,
					exclude: [],
					use: ["json2-loader"]
				}
			]
		},
		stats: 'verbose',
		plugins: [
			// new webpack.HotModuleReplacementPlugin(),
			new BellOnBundlerErrorPlugin(),
			new ProgressBarPlugin({
				format: '  build [:bar] (:percent) - (:elapsed seconds)',
				clear: false,
				complete: '#',
				summary: 'true'
			}),
			// new webpack.NamedModulesPlugin(),
			new AngularCompilerPlugin({
				tsConfigPath: path.join(__dirname, '../../tsconfig.server.json'),
				entryModule: path.join(includePath, 'app.server.ts#AppServerModule'),
				sourceMap: true
			})
		]
	}
}

// tsconfig.json and tsconfig.server.json
{
	"compilerOptions": {
		"baseUrl": ".",
		"target": "es6",
		"module": "es2015",
		"moduleResolution": "node",
		"emitDecoratorMetadata": true,
		"experimentalDecorators": true,
		"allowSyntheticDefaultImports": true,
		"sourceMap": true,
		"importHelpers": true,
		"strictNullChecks": false,
		"lib": [
			"es2015",
			"dom"
		],
		"typeRoots": [
			"node_modules/@types",
			"typings"
		],
		"types": [
			"hammerjs",
			"node"
		],
		"paths": {
			"ramster-ui/*": ["lib/ramster-ui/*"]
		}
	},
	"include": [
		"clients/**/*",
		"lib/ramster-ui/**/*"
	],
	"exclude": [
		"clients/**/*.spec.ts",
		"clients/**/*.e2e.ts"
	],
	"awesomeTypescriptLoaderOptions": {
		"forkChecker": true,
		"useWebpackText": true
	},
	"angularCompilerOptions": {
		"genDir": "./compiled",
		"skipMetadataEmit": true
	},
	"compileOnSave": false,
	"buildOnSave": false,
	"atom": {
		"rewriteTsconfig": false
	}
}


{
	"extends": "./tsconfig.json",
	"include": [
		"clients/**/polyfills.ts",
		"clients/**/vendor.common.ts",
		"clients/**/vendor.server.ts",
		"clients/**/app.server.ts",
		"clients/**/index.server.ts",
	],
	"exclude": [
		"clients/**/index.ts",
		"clients/**/vendor.browser.ts",
		"clients/**/app.ts",
		"clients/**/*.spec.ts",
		"clients/**/*.e2e.ts"
	],
	"awesomeTypescriptLoaderOptions": {
		"forkChecker": true,
		"useWebpackText": true
	},
	"angularCompilerOptions": {
		"genDir": "./compiled",
		"skipMetadataEmit": true
	},
	"compileOnSave": false,
	"buildOnSave": false,
	"atom": {
		"rewriteTsconfig": false
	}
}

// excerpts from my server setup

// this method is called before the server is started
	setup() {
		const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require(path.join(__dirname, '../../../../public/site/serverBuild', 'main'))
		// LAZY_MODULE_MAP is undefined for now
		this.module.app.engine('html', (_, options, callback) => {
			renderModuleFactory(
				AppServerModuleNgFactory, {}
			).then((html) => callback(null, html), (error) => callback(error))
		})
		this.module.app.set('view engine', 'html')
	}

// the method returned by "loadLayout" is mounted in expressjs
	loadLayout() {
		const {module} = this
		return function* (req, res, next) {
			try {
				res.render(path.join('../../../../public/site/layout.html'), {req, res})
			} catch (e) {
				req.locals.error = e
				next()
			}
		}
	}

// polyfills.ts
import 'core-js/es6'
import 'reflect-metadata'


// vendor.common.ts
import 'rxjs/add/operator/first'
import 'rxjs/add/operator/toPromise'
import 'popper.js'

import '@angular/common'
import '@angular/core'
import '@angular/flex-layout'
import '@angular/forms'
import '@angular/material'
import '@angular/router'


// vendor.server.ts
import 'zone.js/dist/zone-node'
import '@angular/platform-server'


// index.server.ts
import {enableProdMode} from '@angular/core'
if (process.env.NODE_ENV === 'production') {
	enableProdMode()
}
export * from './app.server.ngfactory'


// app.server.ts
import {NgModule} from '@angular/core'
import {ServerModule} from '@angular/platform-server'

@NgModule({
	imports: [
    ServerModule
  ],
  exports: [],
  declarations: [],
  providers: [],
  bootstrap: []
})
class AppServerModule {}

export {AppServerModule}

您会看到我已经将服务器端应用程序精简到非常基础，因此我可以消除由我编写的内容引起的错误。
任何帮助将非常感激。

最佳答案

ZoneJS 作为 AMD 模块不能正常工作。您正在使用 SystemJS AMD extra 并且 zone.js 捆绑为 UMD 格式——这导致 Zone 被用作触发损坏行为的 AMD 模块

zone.js 上的完整解释和问题 - https://github.com/angular/angular/issues/36827

问题的最小演示 - https://codesandbox.io/s/quirky-antonelli-2kusz?file=/index.html

解决方法 - https://codesandbox.io/s/sweet-shape-18x7b

关于Angular 7 SSR - NgZone 的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53466406/

文章推荐：在 Bash 脚本中调用 C 函数

文章推荐： angular - 如何检查x-session的状态？

文章推荐： c - 在同一个程序中混合 C 和 D 代码？

文章推荐： python - 处理表格的图像以从中获取数据

问题
关闭。这个问题是off-topic .它目前不接受答案。想要改进这个问题？ Update the question所以它是on-topic用于堆栈溢出。关闭 12 年前。 Improve thi
问题
我有一个动态网格，其中的数据功能需要正常工作，这样我才能逐步复制网格中的数据。假设在第 5 行中，我输入 10，则从第 6 行开始的后续行应从 11 开始读取，依此类推。如果我转到空白的第一行并输入
问题
我有一个关于我的按钮消失的问题我已经把一个图像作为我的按钮用这个函数动画 function example_animate(px) { $('#cont
php - 将现有帐户链接到 Facebook - 问题/问题
我有一个具有 Facebook 连接和经典用户名/密码登录的网站。目前，如果用户单击 facebook_connect 按钮，系统即可运行。但是，我想将现有帐户链接到 facebook，因为用户可以选
iOS map View 问题/问题
我有一个正在为 iOS 开发的应用程序，该应用程序执行以下操作加载和设置注释并启动核心定位和缩放到位置。 map 上有很多注释，从数据加载不会花很长时间，但将它们实际渲染到 map 上需要一段时间。
ruby-on-rails - Heroku，问题/问题
我被推荐使用 Heroku for Ruby on Rails 托管，到目前为止，我认为我真的会喜欢它。只是想知道是否有人可以帮助我找出问题所在。我按照那里的说明在该网站上创建应用程序，创建并提交
Android WebView setCertificate 问题 SSL 问题
我看过很多关于 SSL 错误的帖子和信息，我自己也偶然发现了一个。我正在尝试使用 GlobalSign CA BE 证书通过 Android WebView 访问网页，但出现了不可信错误。对于大多
c++ - Glew 问题， Unresolved external 问题
我想开始使用 OpenGL 3+ 和 4，但我在使用 Glew 时遇到了问题。我试图将 glew32.lib 包含在附加依赖项中，并且我已将库和 .dll 移动到主文件夹中，因此不应该有任何路径问题。
问题？
我已经盯着这两个下载页面的源代码看了一段时间，但我似乎找不到问题。我有两个下载页面，一个 javascript 可以工作，一个没有。工作:http://justupload.it/v/lfd7不是
jquery - 初级 jQuery 问题(FF/IE 问题)
我一直在使用 jQuery，只是尝试在单击链接时替换文本字段以及隐藏/显示内容项。它似乎在 IE 中工作得很好，但我似乎无法让它在 FF 中工作。我的 jQuery: $(function() {
Android ndk 问题 socket 和 std 问题
我正在尝试为 NDK 编译套接字库，但出现以下两个错误: error: 'close' was not declared in this scope 和 error: 'min' is not a m
java - Selenium 问题 : Select. deselectAll() 导致 iframe 问题
我正在使用 Selenium 浏览器自动化框架测试网站。在测试过程中，我切换到特定的框架，我们将其称为“frame_1”。后来，我在 Select 类中使用了 deselectAll() 方法。不久之
连接到 Heroku PostgreSQL 的 Python 问题 - SSL 问题
我正在尝试通过 Python 创建到 Heroku PostgreSQL 数据库的连接。我将 Windows10 与 Python 3.6.8 和 PostgreSQL 9.6 一起使用。我从“ht
python - 在 Pandas 中创建新列的 np.where() 问题(可能是 NaN 问题？)
我有一个包含 2 列的数据框，我想根据两列之间的比较创建第三列。所以逻辑是:第 1 列 val = 3，第 2 列 val = 4，因此新列值什么都没有第 1 列 val = 3，第 2 列 va
css - 如何调试 iphone 5 中的 css 问题(ui 问题)？
我想知道如何调试 iphone 5 中的 css 问题。我尝试使用 firelite 插件。但是从纵向旋转到横向时，火石占据了整个屏幕。有没有其他方法可以调试 iphone 5 中的 css 问题
CSS 问题，input[id]+label，:hover, 和 :checked 问题
所以我有点难以理解为什么这不起作用。我正在尝试替换我正在处理的示例站点上的类别复选框。我试图让它做以下事情:未选中时以一种方式出现，悬停时以另一种方式出现(选中或未选中)选中时以第三种方式出现(而不是
javascript - 1 javascript/css 问题 2 perl cgi 问题
Javascript CSS 问题: 我正在使用一个文本框来写入一个 div。我使用以下 javascript 获取文本框来执行此操作: function process_input(){
algorithm - NP 中的语言(问题)和 P 中的语言(问题)之间的多项式时间减少
你好，我很难理解 P、NP 和多项式时间缩减的主题。我试过在网上搜索它并问过我的一些 friend ，但我没有得到任何好的答案。我想问一个关于这个话题的一般性问题: 设 A,B 为 P 中的语言(或
python-3.x - 该算法(解决 leetcode 问题 650)(问题 2)的时间复杂度是多少？
你好，我一直在研究 https://leetcode.com/problems/2-keys-keyboard/并想到了这个动态规划问题。您从空白页上的“A”开始，完成后得到一个数字 n，页面上应该
ios - Xcode Server Bot 问题 : warning. 生成服务错误。问题:路径 'some/path' 的存档格式不正确
我正在使用 Cocoapods 和 KIF 在 Xcode 服务器上运行持续集成。我已经成功地为一个项目设置了它来报告每次提交。我现在正在使用第二个项目并收到错误: Bot Issue: warnin

太空狗

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Angular 7 SSR - NgZone 的问题