asp.netコア2.0スパ角度+ googleマップ

Question

私はasp.netコアスパ角度アプリケーションでgoogleマップを実装することができますが、私は私のindex.cshtmlにスクリプトを含んでいますが、角度からアクセスしている間にエラーが発生しました。

import { Component } from '@angular/core'; 
declare var google: any; 
@Component({ 
    selector: 'home', 
    templateUrl: './home.component.html' 
}) 
export class HomeComponent { 
    constructor() { 
     var mapProp = { 
      center: new google.maps.LatLng(51.508742, -0.120850), 
      zoom: 5, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
    } 
} 

Index.html

@{ 
    ViewData["Title"] = "Home Page"; 
} 

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app> 
<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR-KEY]" async defer></script> 
<script src="~/dist/vendor.js" asp-append-version="true"></script> 
@section scripts { 
    <script src="~/dist/main-client.js" asp-append-version="true"></script> 
} 

要求の処理中に未処理の例外が発生しました。

NodeInvocationException: Uncaught (in promise): ReferenceError: google is not defined ReferenceError: google is not defined at new HomeComponent (F:\yo\ClientApp\dist\main-server.js:16281:25)

Answer 1

.cshtml

<app asp-prerender-module="ClientApp/dist/main-server" 
     asp-prerender-data='@ViewData["token"]' >Loading...</app>//Storing 

    <script src="~/dist/vendor.js" asp-append-version="true"></script> 
    @section scripts { 
     <script src="~/dist/main-client.js" asp-append-version="true"></script> 
    } 

boot.server.ts

setImmediate(() => { 
        resolve({ 
         html: state.renderToString(), 

         globals: { 
          tokenData: params.data 
         } 

        }); 

app.component.ts

declare var tokenData: any; 
@Component({..}) 
export class AppComponent implements OnInit{ 
ngOnInit() { 
let accessToken = tokenData; 
localStorage.setItem('token', accessToken); 
    } 
}