Angular-google-maps: Kompilasi AOT tidak berfungsi.

Dibuat pada 8 Sep 2016  ·  31Komentar  ·  Sumber: SebastianM/angular-google-maps

Deskripsi masalah
angular2-google-maps tidak berfungsi dalam kompilasi AOT.

Langkah-langkah untuk mereproduksi dan sedikit demo masalah

langkah 1. Proyek klon angular2-seed . (
langkah 2. Instal paket angular2-google-maps .
langkah 3. Konfigurasikan SYSTEM_CONFIG_DEV dan SYSTEM_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' };
}

langkah 4. Tulis kode di situs Anda Memulai
langkah 5. npm start (Ini bekerja dengan baik)
langkah 6. npm run serve.prod (Ini bekerja dengan baik juga).
langkah 6. npm run build.prod.exp ( Terjadi kesalahan . Build ini memiliki kompilasi AOT.)

Perilaku saat ini

Kompilasi AOT tidak berfungsi. (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
...

Perilaku yang diharapkan / diinginkan
Saya berharap bekerja dengan baik. tolong aku.

versi angular2 & angular2-google-maps

angular2: RC6
angular2-google-maps: "0.14.0",

Informasi lainnya

terima kasih sudah membaca

urgent bug

Komentar yang paling membantu

@basvdijk Maaf teman-teman, saat ini saya sedang menulis ulang procress pembangunan untuk dapat mendukung AOT. Harapkan pembaruan di hari-hari berikutnya.

Semua 31 komentar

@DoyeonOhTravelBagaimana cara membagikan kode app.module.ts Anda? Terima kasih!

Saya melihat hal yang sama - mungkin ada hubungannya dengan file ngc -generated .metadata.json hilang. Lihat https://github.com/angular/angular/issues/11262

@SebastianM sebenarnya tim Angular menyarankan agar vendor perpustakaan juga mengirimkan file .metadata.json . File-file ini diproduksi secara otomatis oleh ngc.

Anda mungkin menemukan komentar di bawah ini berguna:

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

Selesaikan percakapan (https://github.com/angular/angular/issues/11262)

@Sebastian ini adalah kode app.module.ts saya. terima kasih balasan anda !.

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 Seperti yang Anda katakan, tampaknya membutuhkan metadata.json . Terima kasih!.

@SebastianM Dan cabang ini adalah contoh kode dengan menggunakan googleMap.

@DoyeonOhTravelHow @doyeonOh @ naveedahmed1 terima kasih guys! Saya akan memeriksanya malam ini.

Tidak yakin dengan status perbaikan ini, tetapi mungkin bagus juga untuk menyelesaikan masalah yang sama di ng2-translate .

Di dalamnya saya akan menyoroti posting blog yang menjelaskan bagaimana menyelesaikan ini secara umum dan beberapa tautan ke contoh repo perpustakaan menyelesaikan ini

Saya menulis posting blog yang Anda sebutkan. Saya senang Anda menyukainya. Saya pikir kesalahan yang Anda hadapi tidak secara langsung terkait dengan file metadata.json , meskipun Anda juga memerlukannya. Dugaan saya adalah bahwa di suatu tempat di kode Anda, Anda memiliki export const blah = () => something yang perlu diubah menjadi export function blah() { return something; } .

Saya telah menulis artikel lain yang membahas solusi untuk beberapa kesalahan (termasuk kesalahan Function calls are not supported ) Saya mengalami pembaruan pustaka agar kompatibel dengan AoT.

1 untuk dukungan AoT
Sedang berjuang kemarin untuk mengintegrasikan angular2-google-maps dengan Ionic2 RC0

Terima kasih banyak!

@modularcoder Apakah Anda benar-benar membuatnya berfungsi? Saya mencoba mengubah lambda seperti yang disarankan dua posting di atas menjadi fungsi pola pabrik dan ekspor, tetapi masih gagal.

@lazarljubenovic hanya tanpa AoT di build untuk dev env.

Saya telah menjelaskan langkah-langkahnya di sini
https://forum.ionicframework.com/t/angular2-google-maps-in-ionic-2/65736

Pastikan Anda menginstal @ ionic / app-scripts versi terbaru yang tidak membuat kompilasi AoT selama build dev.
https://github.com/driftyco/ionic-app-scripts

@modularcoder Apa yang harus dilakukan ketika Anda harus membangun aplikasi untuk android, kesalahannya ada ... Apakah Anda menemukan solusi untuk itu? Mungkin kita seharusnya tidak menggunakan Ionic 2 untuk aplikasi pada saat ini, tidak ada yang benar-benar rusak ...

@allurco ya, saya berhasil membangun aplikasi tanpa kompilasi AoT dengan menambahkan tanda "--dev" untuk membangun tugas di package.json.

Saya telah membuat contoh repo
https://github.com/modularcoder/ionic2-angular2-google-maps-example/blob/master/README.md

Lihat readme untuk info lebih lanjut.

PS Pastikan Anda telah menginstal paket @ ionic / app-scripts versi terbaru.

@SebastianM pembaruan apa pun tentang kapan bug ini mungkin diperbaiki? Terima kasih!

@basvdijk Maaf teman-teman, saat ini saya sedang menulis ulang procress pembangunan untuk dapat mendukung AOT. Harapkan pembaruan di hari-hari berikutnya.

@Sebastian Hebat! Usaha Anda sangat dihargai 👍

Senang melihat ini diperbaiki! Adakah pemikiran tentang kapan Anda akan merilis pembaruan ini?

Apakah sudah diperbaiki? Menggunakan angular2-google-maps dengan kesalahan lemparan AoT "Terjadi kesalahan saat menyelesaikan nilai simbol secara statis. Panggilan fungsi tidak didukung. Pertimbangkan untuk mengganti fungsi atau lambda dengan referensi ke fungsi yang diekspor, menyelesaikan simbol" Adakah yang bisa memandu hal ini?

Saya pikir bug itu telah diperbaiki dan masalah telah ditambahkan dalam tonggak 0,16

@ naveedahmed1 Tonggak pencapaian 0.16.0 berada di 55% lihat https://github.com/SebastianM/angular2-google-maps/milestone/12

Mungkin ini saya, tetapi saya menginstal perpustakaan dari repositori GitHub dan saya mendapat lebih dari 2 kesalahan:
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,

Orang lain ?

@ tchinou1 seperti yang disebutkan sebelumnya, pencapaian 0.16.0 dengan dukungan AoT adalah 55% lihat https://github.com/SebastianM/angular2-google-maps/milestone/12 Sejauh yang saya tahu, versi rilis terbaru tidak belum mendukung AoT.

@basvdijk Dengan menjalankan npm install git+https://[email protected]/SebastianM/angular2-google-maps.git bukankah menginstal versi dengan modifikasi?

@aticint mungkin memang begitu. Mungkin @SebastianM dapat menjelaskan bagaimana Anda dapat menginstal versi git terbaru dengan dukungan AoT.

Sunting: maaf, saya salah - pemasangan npm seharusnya sudah dibuat untuk Anda.

Dengan menarik repo langsung dengan npm Anda hanya mendapatkan sumbernya, bukan aset yang dibangun.

Secara teori Anda dapat mengkloning repo ini, membangunnya secara lokal, dan kemudian menghubungkan npm dengan proyek Anda, tetapi itu mungkin hanya praktis untuk pengembangan lokal. Atau Anda dapat mengunggah tarball dari build di suatu tempat dan menariknya dengan npm .

Adakah yang tahu cara menginstalnya dari repositori GitHub?

Terima kasih

@ tchinou1 Ada di dokumen npm .

Pertanyaan. Saya baru saja bercabang, mengkloning, membangun dan menautkan cabang master dan pada proyek saya yang ada, saya mendapatkan Uncaught Error: Can't resolve all parameters for LazyMapsAPILoader: (?, WindowRef, DocumentRef). . Saya mengimpor lib ini dalam modul yang dimuat malas dengan kode berikut di modul saya imports :

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

Saya mencoba membuat proyek baru yang hitam dan mencoba mereproduksi situasi secara minimal, tetapi berhasil di repo lain jadi saya tidak tahu harus mulai mencari dari mana. Ini seperti tidak menerima objek yang melewati metode forRoot .

Adakah yang memiliki situasi serupa atau pesan kesalahan ini? Saya tahu ini adalah jalan yang panjang tanpa kode apa pun dan kesalahan yang tidak dapat direproduksi, tetapi saya kehabisan ide.

Bagaimana cara memperbarui peta google sudut saya sehingga AOT berfungsi? apakah versi AOT tersedia sekarang?

Agar AOT berfungsi, tambahkan "angular2-google-maps": "^0.16.0", ke file package.json

Kemudian di komponen aplikasi Anda, impor modul:

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

dan tambahkan ke impor Anda (ganti xxxx dengan kunci api Anda)

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

Sekarang di template Anda, Anda dapat menggunakan komponen seperti:

        <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> 

Saya menggunakan pencapaian 0.17.0, dan kesalahan di bawah terus berlanjut.
"Tidak dapat menemukan nama 'google'.
"Tidak dapat menemukan namespace 'google'

Kesalahan ini sudah diperbaiki?

Apakah halaman ini membantu?
0 / 5 - 0 peringkat