3

localstorage と angular2 の使用に関する素敵な Q&A があります。https://stackoverflow.com/a/39098748/6203604

このアプローチは、「npm start」でうまく機能するようです。ただし、「npm run build」を実行すると、次のエラーが表示されます。

プロパティ「window」はタイプ「typeof ../browser.module」に存在しませんが表示されます。

https://github.com/angular/universal-starterの「Universal Gotchas」には、

ウィンドウ、ドキュメント、ナビゲーター、その他の種類のブラウザーはサーバー上に存在しないため、それらを使用したり、それらを使用するライブラリ (jQuery など) を使用したりしても機能しません。この機能の一部が本当に必要な場合は、いくつかのオプションがあります。それらを使用する必要がある場合は、それらを main.client のみに制限し、ユニバーサルからインポートされた isBrowser / isNode 機能で状況に応じてラップすることを検討してください。import { isBrowser, isNode } from 'angular2-universal'; 別のオプションは、「@angular/platform-b​​rowser」の DOM を使用することです。

isBrowser ラッパーまたはプラットフォーム ブラウザの使用は、ここで localStorage を参照するのに適していますか? これを書くのに最適な方法の例はありますか?

たとえば、browser.module.ts で、配布可能なバンドルの window.localStorage をラップするために行うべきことはありますか?

import {LocalStorage} from './local-storage.ts';

export function ngApp() {
  return bootstrap(App, [
    // ...

    UserService,
    { provide: LocalStorage, useValue: window.localStorage}
  ]);

「npm run build」の配布可能なバンドルで動作するものはありますか?

また、npm start を実行すると、次のエラー メッセージが表示されます: Unexpected token u. ここに画像の説明を入力

これは、ファイル node.module.ts の useValue の「u」から来ているように見えますが、消えて「No provider for Token LocalStorage!」に置き換えられます。

... 
providers: [
    // ...
    UserService,
    {provide: LocalStorage, useValue: {getItem() {} }}
]
...

誰でも似たようなものを手に入れます。アイデア？

4

1 に答える 1