2
Google Maps（API v3）ウィジェットをAngular2アプリに埋め込む際に、クリック/ドラッグのエラーが表示されていることがわかりました。JSコンポーネント（Googleマップ）をAngular2アプリに埋め込み/隔離するにはどうすればよいですか？
Angularから分離されたGoogleマップコンポーネントを埋め込むための良い方法があるかどうかを知りたいと思います。 stacktrace（下記）に基づいて、GoogleマップがZone呼び出しの試行後に予想外の状態になるようです。
シンプルPlunkr例（実行可能）：
- Angular: angular2-polyfills.js:324 Uncaught TypeError: Cannot read property 'Ra' of null
- Google Maps: _.r.jl @ common.js:244
- Google Maps: _.J.trigger @ js?key=NICE_TRY_HACKERS&callback=initMap:103
- Google Maps: fx @ common.js:190
- Google Maps: (anonymous function) @ common.js:189
- Google Maps: _.J.trigger @ js?key=NICE_TRY_HACKERS&callback=initMap:103
- Google Maps: _.r.Mm @ common.js:257_.r.Kn @ common.js:231
- Angular: ZoneDelegate.invokeTask @ angular2-polyfills.js:423
- Angular: Zone.runTask @ angular2-polyfills.js:320
- Angular: ZoneTask.invoke @ angular2-polyfills.js:490
HTML（index.htmlを）：
<!--
Google Maps alongside Angular2
=======================================
See README.md
-->
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. (Angular2) Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.26/system-polyfills.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/angular2-polyfills.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.26/system.src.js"></script>
<script src="https://npmcdn.com/[email protected]/bundles/Rx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/angular2.min.js"></script>
<!-- 2. (Angular2) Configure SystemJS -->
<script>
System.import('main.js').then(null, console.error.bind(console));
</script>
</head>
<!-- 3. (Angular2) Display the application -->
<body>
<my-app>Loading...</my-app>
<!-- 4. GOOGLE MAPS START, source: https://developers.google.com/maps/documentation/javascript/tutorial#The_Hello_World_of_Google_Maps_v3-->
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<div id="map"></div> <!-- Google Map goes here -->
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=NOTHING_TO_SEE_HERE&callback=initMap" async defer></script>
<!-- GOOGLE MAPS END -->
</body>
</html>
バックトレース（README.mdで）それぞれのバグをクリックした後、
Angular2 Bare-Bones App（main.ts）
import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
// Create Angular component
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
// Bootstrap the component
bootstrap(AppComponent);
観察：
- すべてのクリックはエラー
- エラーをトリガスタックトレースが（Googleマップを示唆
- 非重要のようですが、最高の不安定な地面に進むことはありません_.r.jl @ common.js：244）はAngular2のゾーン（ZoneDelegate.invokeTask @ angular2-polyfills.js）によって呼び出されるタスクに驚いています
- ベアボーンアプリで動作しますが、角度で文句を言います
これは機能します。一般に、自分でトラブルシューティングを行う場合は、どのようなテクニックが利用できますか？私は第三者の解決策がない時があると思います。 – montooner
私は銀色の弾丸がないと思います。角度はzone.jsの変更検出とポリフィルに大きく依存していますが、ほとんどの問題はこれらの部分から来ています。 – kemsky
ああ、OK。したがって、zone.jsが騒々しいことは珍しくありません。それは知って良いです。 – montooner