Angular-google-maps: AOTコンパイルが機能しません。

作成日 2016年09月08日  ·  31コメント  ·  ソース: SebastianM/angular-google-maps

問題の説明
angle2-google-mapsはAOTコンパイルでは機能しません。

再現する手順と問題の最小限のデモ

手順1.angular2-seedプロジェクトのクローンを
手順2。 angular2-google-mapsパッケージをインストールします。
手順3。 SYSTEM_CONFIG_DEVSYSTEM_BUILDER_CONFIG

tools/config/project.config.ts

export class ProjectConfig extends SeedConfig {
    ...
    // angular2 google maps SYSTEM_CONFIG_DEV
    this.SYSTEM_CONFIG_DEV.paths['angular2-google-maps/core'] = `node_modules/angular2-google-maps/core/index.js`;
    this.SYSTEM_CONFIG_DEV.packages['angular2-google-maps/core'] = {  main: 'index.js', defaultExtension: 'js' };

    // angular2 google maps SYSTEM_BUILDER_CONFIG
    this.SYSTEM_BUILDER_CONFIG.paths['angular2-google-maps/core'] = `node_modules/angular2-google-maps/core/index.js`;
    this.SYSTEM_BUILDER_CONFIG.packages['angular2-google-maps/core'] = {  main: 'index.js', defaultExtension: 'js' };
}

ステップ4.サイトにコードを書くはじめに
ステップ5。 npm start (うまくいきました)
ステップ6。 npm run serve.prod (それもうまくいきました)。
ステップ6。 npm run build.prod.expエラーが発生します。このビルドにはAOTコンパイルが含まれています。)

現在の動作

AOTコンパイルが機能しませんでした。(compile.ahead.prod)

...
[17:41:20] Starting 'build.prod.exp'...
[17:41:20] Starting 'clean.prod'...
[17:41:21] Deleted dist/prod
[17:41:21] Deleted dist/tmp
[17:41:21] Finished 'clean.prod' after 1.37 s
[17:41:21] Starting 'tslint'...
[17:41:26] Finished 'tslint' after 5.02 s
[17:41:26] Starting 'css-lint'...
[17:41:31] Finished 'css-lint' after 4.59 s
[17:41:31] Starting 'build.assets.prod'...
[17:41:31] Finished 'build.assets.prod' after 100 ms
[17:41:31] Starting 'build.html_css'...
[17:41:32] Finished 'build.html_css' after 1.25 s
[17:41:32] Starting 'copy.prod'...
[17:41:32] Finished 'copy.prod' after 54 ms
[17:41:32] Starting 'compile.ahead.prod'...
Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in /home/ody12/workspace-mine/angular2-seed/dist/tmp/app/app.module.ts, resolving symbol AppModule in /home/ody12/workspace-mine/angular2-seed/dist/tmp/app/app.module.ts
    at simplifyInContext (/Users/iminar/Dev/angular/modules/@angular/compiler-cli/src/static_reflector.ts:540:15)
    at StaticReflector.simplify (/Users/iminar/Dev/angular/modules/@angular/compiler-cli/src/static_reflector.ts:544:18)
    at StaticReflector.annotations (/Users/iminar/Dev/angular/modules/@angular/compiler-cli/src/static_reflector.ts:92:28)
    at _loop_1 (/Users/iminar/Dev/angular/modules/@angular/compiler-cli/src/codegen.ts:63:48)
    at CodeGenerator.readFileMetadata (/Users/iminar/Dev/angular/modules/@angular/compiler-cli/src/codegen.ts:57:22)
    at /Users/iminar/Dev/angular/modules/@angular/compiler-cli/src/codegen.ts:105:56
    at Array.map (native)
    at CodeGenerator.codegen (/Users/iminar/Dev/angular/modules/@angular/compiler-cli/src/codegen.ts:105:33)
    at codegen (/home/ody12/workspace-mine/angular2-seed/tools/tasks/seed/compile.ahead.prod.ts:14:69)
    at Object.main (/home/ody12/workspace-mine/tools/@angular/tsc-wrapped/src/main.ts:44:12)
Compilation failed
...

期待される/望ましい動作
うまくいったらいいのに。 私を助けて。

angle2&angular2-google-mapsバージョン

角度2:RC6
angle2-google-maps: "0.14.0"、

その他の情報

読んでくれてありがとう

urgent bug

最も参考になるコメント

@basvdijk申し訳ありませんが、私は現在、AOTをサポートできるようにビルド手順を書き直しています。 翌日には更新される予定です。

全てのコメント31件

@DoyeonOhTravel app.module.tsコードをどのように共有できますか? ありがとう!

私は同じことを見ています-おそらくngc生成された.metadata.jsonファイルの欠落と関係があります。 https://github.com/angular/angular/issues/11262を参照して

@SebastianMは、実際にはAngularチームが、ライブラリベンダーも.metadata.jsonファイルを

以下のコメントが役立つかもしれません:

https://github.com/angular/angular/issues/11262#issuecomment -244449696

https://github.com/angular/angular/issues/11262#issuecomment -244472000

https://github.com/angular/angular/issues/11262#issuecomment -244489405

完全な会話(https://github.com/angular/angular/issues/11262)

@SebastianMこれは私のapp.module.tsコードです。 お返事ありがとうございます!

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { routes } from './app.routes';

import { AboutModule } from './about/about.module';
import { HomeModule } from './home/home.module';
import { SharedModule } from './shared/shared.module';
import { AgmCoreModule } from 'angular2-google-maps/core/index.js';
import { provideLazyMapsAPILoaderConfig } from 'angular2-google-maps/core';

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    RouterModule.forRoot(routes),
    AboutModule,
    HomeModule,
    SharedModule.forRoot(),
    AgmCoreModule.forRoot()
  ],
  declarations: [AppComponent],
  providers: [
    {
      provide: APP_BASE_HREF,
      useValue: '<%= APP_BASE %>'
    },
    provideLazyMapsAPILoaderConfig({
      apiKey: 'key',
      clientId: ''
    })
  ],
  bootstrap: [AppComponent]

})

export class AppModule { }

@ rh389 @ naveedahmed1あなたが言うように、 metadata.jsonが必要なようです。 ありがとう!

@SebastianMそして、このブランチはgoogleMapを使用したサンプルコードです。

@DoyeonOhTravelHow @doyeonOh @ naveedahmed1ありがとうございます! 今晩チェックします。

この修正のステータスはわかりませんが

その中で、これを一般的に解決する方法を説明するブログ投稿と、これを解決するライブラリのリポジトリの例へのリンクを強調します。

あなたが言及したブログ投稿を書きました。 私はあなたがそれを気に入ってくれてうれしいです。 発生しているエラーは、 metadata.jsonファイルに直接関連しているわけではないと思いますが、それらも必要になります。 私の推測では、コードのどこかにexport const blah = () => somethingあり、これをexport function blah() { return something; }変更する必要があります。

いくつかのエラー( Function calls are not supportedエラーを含む)の解決策を説明する

AoTサポートの+1
昨日、angular2-google-mapsをIonic2RC0と統合するのに苦労していました

どうもありがとう!

@modularcoder実際に動作させましたか? 上記の2つの投稿で提案されているように、ラムダをファクトリパターン関数に変更してエクスポートしようとしましたが、それでも失敗していました。

@lazarljubenovicは、devenvのビルドにAoTがない

ここで手順を説明しました
https://forum.ionicframework.com/t/angular2-google-maps-in-ionic-2/65736

開発ビルド中にAoTコンパイルを行わない最新バージョンの@ionic / app-scriptsがインストールされていることを確認してください。
https://github.com/driftyco/ionic-app-scripts

@modularcoder android用のアプリをビルドする必要がある場合はどうすればよいですか、エラーがあります...その解決策は見つかりましたか? おそらく、現時点ではアプリにIonic 2を使用するべきではありませんが、実際には何も問題はありません...

@allurcoはい、package.jsonのビルドタスクに「--dev」フラグを追加することで、AoTコンパイルなしでアプリをビルドすることができました。

サンプルリポジトリを作成しました
https://github.com/modularcoder/ionic2-angular2-google-maps-example/blob/master/README.md

詳細については、readmeを参照してください。

PS @ ionic / app-scriptsパッケージの最新バージョンがインストールされていることを確認してください。

@SebastianMこのバグがいつ修正されるかについての更新はありますか? ありがとう!

@basvdijk申し訳ありませんが、私は現在、AOTをサポートできるようにビルド手順を書き直しています。 翌日には更新される予定です。

@SebastianM素晴らしい! あなたの努力は本当にありがたいです👍

これが修正されたのは素晴らしいことです。 このアップデートをいつリリースするかについて何か考えはありますか?

修正されていますか? AoTでangular2-google-mapsを使用すると、「シンボル値の静的な解決中にエラーが発生しました。関数呼び出しはサポートされていません。関数またはラムダをエクスポートされた関数への参照に置き換えて、シンボルを解決することを検討してください」というエラーがスローされます。

バグは修正され、問題は0.16マイルストーンで追加されたと思います

@ naveedahmed1 0.16.0のマイルストーンは55%です。https://github.com/SebastianM/angular2-google-maps/milestone/12を参照して

多分それは私ですが、GitHubリポジトリからライブラリをインストールしたところ、さらに2つのエラーが発生しました。
Consider replacing the function or lambda with a reference to an exported function, resolving symbol LAZY_MAPS_API_CONFIG in /Users/william/Ionic/mapOnDevice1/node_modules/angular2-google-maps/src/core/services/maps-api-loader/lazy-maps-api-loader.ts, resolving symbol AgmCoreModule in /Users/william/Ionic/mapOnDevice1/node_modules/angular2-google-maps/src/core/core-module.ts,

他の人は ?

@ tchinou1前述のように、AoTをサポートする0.16.0のマイルストーンは55%です。https://github.com/SebastianM/angular2-google-maps/milestone/12を参照して

@basvdijk npm install git+https://[email protected]/SebastianM/angular2-google-maps.gitを実行すると、変更を加えたバージョンがインストールされませんか?

@staticintは確かにそうかもしれません。 おそらく@SebastianMは、AoTをサポートする最新のgitバージョンをインストールする方法を説明できます。

編集:申し訳ありませんが、私は間違っています-npmのインストールはすでにビルドされているはずです。

npmを使用してリポジトリを直接プルすると、ビルドされたアセットではなく、ソースのみが取得されます。

理論的には、このリポジトリのクローンを作成し、ローカルでnpmリンクすることができますが、これはおそらくローカル開発でのみ実用的です。 または、ビルドのtarballをどこかにアップロードし、npmでプルすることもできます。

GitHubリポジトリからインストールする方法を知っている人はいますか?

ありがとう

@ tchinou1それはnpmドキュメントにあります。

質問。 マスターブランチをフォーク、クローン、ビルド、npmリンクしたところ、既存のプロジェクトでUncaught Error: Can't resolve all parameters for LazyMapsAPILoader: (?, WindowRef, DocumentRef).を取得しました。 モジュールのimports次のコードを使用して、このlibを遅延ロードされたモジュールにインポートしています。

AgmCoreModule.forRoot({
    apiKey: 'xxx',
}),

黒の新しいプロジェクトを作成して、状況を最小限に再現しようとしましたが、他のリポジトリで機能するため、どこから始めればよいかわかりません。 forRootメソッドを介して渡されたオブジェクトを受け取らないようなものです。

誰かが同様の状況またはこのエラーメッセージを持っていましたか? コードがなく、再現不可能なエラーが発生するロングショットであることはわかっていますが、アイデアが浮かび上がってきています。

AOTが機能するように角度グーグルマップを更新するにはどうすればよいですか? AOTバージョンは現在入手可能ですか?

AOTを機能させるには、 package.jsonファイルに"angular2-google-maps": "^0.16.0",を追加します

次に、アプリコンポーネントでモジュールをインポートします。

import { AgmCoreModule } from 'angular2-google-maps/core';

インポートに追加します(xxxxをAPIキーに置き換えます)

NgModule({
  declarations: [],
  imports: [
    AgmCoreModule.forRoot({
      apiKey: 'xxxxxxxxxxxxxxxxxxxxx'
    })
  ],

これで、テンプレートで次のようなコンポーネントを使用できます。

        <sebm-google-map disableDefaultUI="true" [zoom]="zoom" [latitude]="location.latitude" [longitude]="location.longitude">

            <sebm-google-map-marker [latitude]="location.latitude" [longitude]="location.longitude"></sebm-google-map-marker>

        </sebm-google-map> 

0.17.0マイルストーンを使用していますが、以下のエラーが発生し続けます。
「名前 'google'が見つかりません。
「名前空間 'google'が見つかりません

このエラーはすでに修正されていますか?

このページは役に立ちましたか?
0 / 5 - 0 評価