ウェブサイト検索

Google マップ - Angular Universal: 入力デコレーターと使用する際のグローバル型定義エラー


私はAngular Universalは初心者で、これをスターターとして使いました。

問題は、次のようにグローバルな型定義をインポートするときです:npm install -S @types/google-maps そしてそれを入力デコレーターとして使用する場合:

@Input() f : google.maps.Map; 

エラーが出ます

ReferenceError: google is not defined
    at Object.c (C:\work\tests\cli-universal-demo\dist\server.js:2601:31)
    at __webpack_require__ (C:\work\tests\cli-universal-demo\dist\server.js:20:30)
    at Object.c (C:\work\tests\cli-universal-demo\dist\server.js:3461:23)
    at __webpack_require__ (C:\work\tests\cli-universal-demo\dist\server.js:20:30)
    at Object.c (C:\work\tests\cli-universal-demo\dist\server.js:7441:20)
    at __webpack_require__ (C:\work\tests\cli-universal-demo\dist\server.js:20:30)
    at Object.<anonymous> (C:\work\tests\cli-universal-demo\dist\server.js:3550:10)
    at __webpack_require__ (C:\work\tests\cli-universal-demo\dist\server.js:20:30)
    at Object.<anonymous> (C:\work\tests\cli-universal-demo\dist\server.js:7566:37)
    at Object.<anonymous> (C:\work\tests\cli-universal-demo\dist\server.js:7589:30)

server.js ファイルのトランスパイルされたコードのセクションは次のようになります

__decorate([
    core_1.Input(),
    __metadata("design:type", google.maps.Map) //this is the error line
], AppComponent.prototype, "f", void 0);
AppComponent = __decorate([
    core_1.Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss']
    })
], AppComponent);
exports.AppComponent = AppComponent;

現時点では、入力としてデコレーターのみを使用するとエラーが発生することに注意してください。関数への入力として使用したり、関数内で使用したりしてもエラーは発生しません。

また、Google マップはパッケージとしてインストールされるのではなく、外部スクリプトとして直接 index.html に組み込まれていることにも注意してください。これがおそらく原因です。

関連記事