ReferenceError: window is not defined: Angular 9
ReferenceError: window is not defined: Angular 9
在 Angular 7 Universal 中,我可以使用 postscribe 添加第 3 方脚本(无需任何特殊设置)。
现在我正在尝试在 Angular 9 通用项目中使用 postscribe
if(this.isBrowser) {
// ... my postscribe code here
}
但给出以下错误
var work = window.document.createElement('div');
^
ReferenceError: window is not defined
at Object.<anonymous> (E:\Projects\angular-universal-starter\dist-server\main.js:204958:14)
at __webpack_require__ (E:\Projects\angular-universal-starter\dist-server\main.js:204658:31)
at Object.<anonymous> (E:\Projects\angular-universal-starter\dist-server\main.js:204703:19)
at __webpack_require__ (E:\Projects\angular-universal-starter\dist-server\main.js:204658:31)
at Object.<anonymous> (E:\Projects\angular-universal-starter\dist-server\main.js:204687:21)
at __webpack_require__ (E:\Projects\angular-universal-starter\dist-server\main.js:204658:31)
at E:\Projects\angular-universal-starter\dist-server\main.js:204678:19
at E:\Projects\angular-universal-starter\dist-server\main.js:204681:11
at webpackUniversalModuleDefinition (E:\Projects\angular-universal-starter\dist-server\main.js:204636:21)
at Object.<anonymous> (E:\Projects\angular-universal-starter\dist-server\main.js:204638:4)
A server error has occurred.
node exited with 1 code.
在server.ts我添加了
// for mock global window by domino
const win = domino.createWindow(template);
// mock
global['window'] = win;
不确定为什么会出现此错误,有什么线索吗?
我正在使用“postscribe”:“^2.0.8”。
并且我在 the starter project
之上构建了我的应用程序
完成日志
$ npm run ssr
> universal-demo@7.0.0 ssr E:\Projects\angular-universal-starter
> ng run universal-demo:serve-ssr
****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.
DON'T USE IT FOR PRODUCTION!
****************************************************************************************
Hash: 8e8bf0402197478a1be2
Time: 43386ms
Built at: 07/01/2020 8:30:09 PM
Asset Size Chunks Chunk Names
main.js 10.7 MiB main [emitted] [big] main
main.js.map 11.2 MiB main [emitted] [dev] main
Entrypoint main [big] = main.js main.js.map
chunk {main} main.js, main.js.map (main) 10.3 MiB [entry] [rendered]
chunk {app-static-static-module} app-static-static-module.js, app-static-static-module.js.map (app-static-static-module) 59.5 kB [rendered]
chunk {main} main.js, main.js.map (main) 928 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 608 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 694 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 9.07 kB [entry] [rendered]
chunk {styles} styles.css, styles.css.map (styles) 205 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 6.41 MB [initial] [rendered]
Date: 2020-07-01T15:30:16.786Z - Hash: 466864382a957d66d22c - Time: 45587ms
Compiled successfully.
E:\Projects\angular-universal-starter\dist-server\main.js:204958
var work = window.document.createElement('div');
^
ReferenceError: window is not defined
at Object.<anonymous> (E:\Projects\angular-universal-starter\dist-server\main.js:204958:14)
at __webpack_require__ (E:\Projects\angular-universal-starter\dist-server\main.js:204658:31)
at Object.<anonymous> (E:\Projects\angular-universal-starter\dist-server\main.js:204703:19)
at __webpack_require__ (E:\Projects\angular-universal-starter\dist-server\main.js:204658:31)
at Object.<anonymous> (E:\Projects\angular-universal-starter\dist-server\main.js:204687:21)
at __webpack_require__ (E:\Projects\angular-universal-starter\dist-server\main.js:204658:31)
at E:\Projects\angular-universal-starter\dist-server\main.js:204678:19
at E:\Projects\angular-universal-starter\dist-server\main.js:204681:11
at webpackUniversalModuleDefinition (E:\Projects\angular-universal-starter\dist-server\main.js:204636:21)
at Object.<anonymous> (E:\Projects\angular-universal-starter\dist-server\main.js:204638:4)
A server error has occurred.
node exited with 1 code.
connect ECONNREFUSED 127.0.0.1:55182
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! universal-demo@7.0.0 ssr: `ng run universal-demo:serve-ssr `
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the universal-demo@7.0.0 ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\test\AppData\Roaming\npm-cache\_logs20-07-01T15_30_47_590Z-debug.log
产生错误的步骤
- 克隆 angular-universal-starter 项目
- 运行
npm i postscribe
- 运行
npm install
- 在app.component.ts中加载脚本为
import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import postscribe from "postscribe";
import { MetaService } from '@ngx-meta/core';
@Component({
selector: 'app-root',
template: '<router-outlet></router-outlet><span id="myscript"></span>',
})
export class AppComponent implements OnInit {
isBrowser: boolean;
constructor(
private readonly meta: MetaService,
@Inject(PLATFORM_ID) platformId: Object
) {
this.isBrowser = isPlatformBrowser(platformId);
this.meta.setTag('og:title', 'home ctor');
}
ngOnInit(): void {
this._loadScript();
}
private _loadScript() {
if(this.isBrowser) {
postscribe(
"#myscript",
'<script type="text/javascript">alert(\'Postscribe is working.\');</script>',
{
done: () => {
console.log("SSL Certificate Seal loaded");
}
}
);
}
}
}
- 运行
npm run ssr
.
- 您将在命令提示符中看到错误。
问题是 postscribe
使用 prescribe
,它会在导入模块时尝试访问 dom 元素(所以不是在呈现页面时,而是在 SSR 时节点进程启动)
let work = window.document.createElement('div');
通常,像您一样使用 domino
应该可以消除错误,但看起来 postscribe 是在 server.ts
设置 domino
之前导入的
无论如何,由于postscribe
看起来像是在页面加载后修改内容,您可以尝试直接在index.html
中导入脚本
<script src="https://cdnjs.cloudflare.com/ajax/libs/postscribe/2.0.8/postscribe.min.js"></script>
然后删除对 postscribe
的导入,只使用脚本中的全局变量
import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
//import postscribe from "postscribe"; <== remove this
import { MetaService } from '@ngx-meta/core';
declare let postscribe: any; //add this
在 Angular 7 Universal 中,我可以使用 postscribe 添加第 3 方脚本(无需任何特殊设置)。
现在我正在尝试在 Angular 9 通用项目中使用 postscribe
if(this.isBrowser) {
// ... my postscribe code here
}
但给出以下错误
var work = window.document.createElement('div');
^
ReferenceError: window is not defined
at Object.<anonymous> (E:\Projects\angular-universal-starter\dist-server\main.js:204958:14)
at __webpack_require__ (E:\Projects\angular-universal-starter\dist-server\main.js:204658:31)
at Object.<anonymous> (E:\Projects\angular-universal-starter\dist-server\main.js:204703:19)
at __webpack_require__ (E:\Projects\angular-universal-starter\dist-server\main.js:204658:31)
at Object.<anonymous> (E:\Projects\angular-universal-starter\dist-server\main.js:204687:21)
at __webpack_require__ (E:\Projects\angular-universal-starter\dist-server\main.js:204658:31)
at E:\Projects\angular-universal-starter\dist-server\main.js:204678:19
at E:\Projects\angular-universal-starter\dist-server\main.js:204681:11
at webpackUniversalModuleDefinition (E:\Projects\angular-universal-starter\dist-server\main.js:204636:21)
at Object.<anonymous> (E:\Projects\angular-universal-starter\dist-server\main.js:204638:4)
A server error has occurred.
node exited with 1 code.
在server.ts我添加了
// for mock global window by domino
const win = domino.createWindow(template);
// mock
global['window'] = win;
不确定为什么会出现此错误,有什么线索吗?
我正在使用“postscribe”:“^2.0.8”。
并且我在 the starter project
之上构建了我的应用程序完成日志
$ npm run ssr
> universal-demo@7.0.0 ssr E:\Projects\angular-universal-starter
> ng run universal-demo:serve-ssr
****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.
DON'T USE IT FOR PRODUCTION!
****************************************************************************************
Hash: 8e8bf0402197478a1be2
Time: 43386ms
Built at: 07/01/2020 8:30:09 PM
Asset Size Chunks Chunk Names
main.js 10.7 MiB main [emitted] [big] main
main.js.map 11.2 MiB main [emitted] [dev] main
Entrypoint main [big] = main.js main.js.map
chunk {main} main.js, main.js.map (main) 10.3 MiB [entry] [rendered]
chunk {app-static-static-module} app-static-static-module.js, app-static-static-module.js.map (app-static-static-module) 59.5 kB [rendered]
chunk {main} main.js, main.js.map (main) 928 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 608 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 694 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 9.07 kB [entry] [rendered]
chunk {styles} styles.css, styles.css.map (styles) 205 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 6.41 MB [initial] [rendered]
Date: 2020-07-01T15:30:16.786Z - Hash: 466864382a957d66d22c - Time: 45587ms
Compiled successfully.
E:\Projects\angular-universal-starter\dist-server\main.js:204958
var work = window.document.createElement('div');
^
ReferenceError: window is not defined
at Object.<anonymous> (E:\Projects\angular-universal-starter\dist-server\main.js:204958:14)
at __webpack_require__ (E:\Projects\angular-universal-starter\dist-server\main.js:204658:31)
at Object.<anonymous> (E:\Projects\angular-universal-starter\dist-server\main.js:204703:19)
at __webpack_require__ (E:\Projects\angular-universal-starter\dist-server\main.js:204658:31)
at Object.<anonymous> (E:\Projects\angular-universal-starter\dist-server\main.js:204687:21)
at __webpack_require__ (E:\Projects\angular-universal-starter\dist-server\main.js:204658:31)
at E:\Projects\angular-universal-starter\dist-server\main.js:204678:19
at E:\Projects\angular-universal-starter\dist-server\main.js:204681:11
at webpackUniversalModuleDefinition (E:\Projects\angular-universal-starter\dist-server\main.js:204636:21)
at Object.<anonymous> (E:\Projects\angular-universal-starter\dist-server\main.js:204638:4)
A server error has occurred.
node exited with 1 code.
connect ECONNREFUSED 127.0.0.1:55182
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! universal-demo@7.0.0 ssr: `ng run universal-demo:serve-ssr `
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the universal-demo@7.0.0 ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\test\AppData\Roaming\npm-cache\_logs20-07-01T15_30_47_590Z-debug.log
产生错误的步骤
- 克隆 angular-universal-starter 项目
- 运行
npm i postscribe
- 运行
npm install
- 在app.component.ts中加载脚本为
import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import postscribe from "postscribe";
import { MetaService } from '@ngx-meta/core';
@Component({
selector: 'app-root',
template: '<router-outlet></router-outlet><span id="myscript"></span>',
})
export class AppComponent implements OnInit {
isBrowser: boolean;
constructor(
private readonly meta: MetaService,
@Inject(PLATFORM_ID) platformId: Object
) {
this.isBrowser = isPlatformBrowser(platformId);
this.meta.setTag('og:title', 'home ctor');
}
ngOnInit(): void {
this._loadScript();
}
private _loadScript() {
if(this.isBrowser) {
postscribe(
"#myscript",
'<script type="text/javascript">alert(\'Postscribe is working.\');</script>',
{
done: () => {
console.log("SSL Certificate Seal loaded");
}
}
);
}
}
}
- 运行
npm run ssr
. - 您将在命令提示符中看到错误。
问题是 postscribe
使用 prescribe
,它会在导入模块时尝试访问 dom 元素(所以不是在呈现页面时,而是在 SSR 时节点进程启动)
let work = window.document.createElement('div');
通常,像您一样使用 domino
应该可以消除错误,但看起来 postscribe 是在 server.ts
设置 domino
无论如何,由于postscribe
看起来像是在页面加载后修改内容,您可以尝试直接在index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/postscribe/2.0.8/postscribe.min.js"></script>
然后删除对 postscribe
的导入,只使用脚本中的全局变量
import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
//import postscribe from "postscribe"; <== remove this
import { MetaService } from '@ngx-meta/core';
declare let postscribe: any; //add this