web-dev-qa-db-ja.com

angular4ドキュメントとウィンドウは未定義です

angular 4およびwebpack configでドットネットコアを使用しています。

コンポーネントまたはサービスのウィンドウまたはドキュメントを取得しようとすると、次のエラーが表示されます。

ReferenceError：ドキュメントが定義されていません

ReferenceError：ウィンドウが定義されていません

ここに私が得ているエラーがあります：

Microsoft.AspNetCore.NodeServices[0]
      ERROR { ReferenceError: window is not defined
          at _window (C:\gitRepose\AngularCore\FM\FMWebApp\FootballWebApp\ClientApp\dist\main-server.js:30801:12)
Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware[0]
      An unhandled exception has occurred: window is not defined
      ReferenceError: window is not defined
    at _window (C:\gitRepose\AngularCore\FM\FMWebApp\FootballWebApp\ClientApp\dist\main-server.js:30801:12)

私はまだウェブパックのものに新しいです、誰も私がこれを修正する方法を知っていますか？ウィンドウのサイズを変更するときに処理するウィンドウが必要です。

編集...

Index.cshtmlから事前レンダリングを削除することで、これを修正することができました

これから変更しました：

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>

これに：

<app>Loading...</app>

しかし、今では明らかにサーバーサイドでのプリレンダリングは行われません：/したがって、アプリの起動時間が遅くなります、サーバーサイドのプリレンダリングを失うことなくこれを修正する方法はありますか？

javascriptangularwebpack.net-core
16
fattikus

サーバー側レンダリングを使用している場合、ノードにはこれらの変数がないため、ノードで実行されるwindowまたはdocumentを使用してすべてのコードを削除する必要があります（ノードにはglobalのみがあります）。

それでもノードenvでwindowまたはdocumentを使用する場合は、jsdomを使用してみてください（ https://github.com/tmpvar/jsdom ）。

8
Anh Nguyen

AOTを使用する場合は、依存性注入を使用してコンポーネントにウィンドウをマウントします。つまり、ウィンドウオブジェクトを提供できるサービスを作成します。

import { Injectable } from '@angular/core';

function getWindow (): any {
    return window;
}

@Injectable()
export class WindowRefService {
    get nativeWindow (): any {
        return getWindow();
    }
}

詳細情報 こちら 。

4
Gökhan Kurt

さて、私はangular 4アプリケーションを使用し、次を使用してウィンドウオブジェクトを注入しています：

コンポーネントconstructor( @Inject('Window') private window: Window) { }

およびモジュール：providers: [{ provide: 'Window', useValue: window }]

そして、コンポーネント関数で私はそれを次のように使用しました：this.window

3
Touqeer Shafi

Server Side JavaScriptは、Nodeウィンドウまたはドキュメントオブジェクトを持たない環境。ウィンドウおよびドキュメントオブジェクトは、JavaScript環境がブラウザ環境で実行されるときに機能します。したがって、ウィンドウまたはドキュメントオブジェクト関連のコードサーバー側では実行されません

本当にウィンドウまたはドキュメントオブジェクトを使用する必要がある場合は、 node-jsdom （ https://www.npmjs.com/package/node-jsdom ）を使用できます。インストールするだけ

$ npm install node-jsdom

ここ （ https://github.com/darrylwest/node-jsdom ）node-jsdomのヘルプが表示されます

3
Rabbani

簡単な修正が必要な場合は、次のコードをTypeScriptファイルの先頭に配置してください。

 declare var window;
 declare var document;

しかし、あなたが適切にそれをしたい場合：

 import { DOCUMENT } from '@angular/platform-browser';
 export const WINDOW           = new InjectionToken( 'WINDOW' );

 @Component()
 export class YourComponent{
          constructor(
              @Inject( WINDOW ) private window,
              @Inject( DOCUMENT ) private document){}

モジュール内：

providers       : [
    {
        provide  : WINDOW,
        useValue : window
    }
],

このようにして、テストやその他の場所でウィンドウとドキュメントをオーバーライドできます。

3
Milad

以下のようにウィンドウに依存するコードをラップします

if (typeof window !== 'undefined') {
    // your client-only logic here like below
    alert(window.innerWidth);
}
2
cahit beyaz

ウィンドウを配置します。 componentDidMount関数内の関連コード。

1
user8335505

Index.htmlまたはIndex.cshtml

から変更する

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>

に

<app asp-ng2-prerender-module="ClientApp/dist/main-server">Loading...</app>

Aspnetcoreでangular4を使用している場合、正常に動作するはずです

0
Mark Macneil Bikeio