Angular-google-maps: Компиляция AOT не работает.

Созданный на 8 сент. 2016  ·  31Комментарии  ·  Источник: SebastianM/angular-google-maps

Описание проблемы
angular2-google-maps не работает в компиляции AOT.

Шаги по воспроизведению и минимальная демонстрация проблемы

Шаг 1. Клонируйте проект
Шаг 2. Установите пакет angular2-google-maps .
шаг 3. Настройте SYSTEM_CONFIG_DEV и 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' };
}

шаг 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
...

Ожидаемое / желаемое поведение
Я хочу, чтобы все работало нормально. Помоги мне.

версия angular2 и angular2-google-maps

angular2: RC6
angular2-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 . Эти файлы создаются автоматически ngc.

Вы можете найти нижеприведенные комментарии полезными:

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 спасибо, ребята! Я проверю сегодня вечером.

Не уверен в статусе этого исправления, но было бы неплохо также проверить ту же проблему на ng2-translate .

В нем я бы выделил сообщение в примеры репозиториев библиотек, решающих эту проблему.

Я написал сообщение в блоге, о котором вы упомянули. Я рад, что тебе понравилось. Я думаю, что ошибка, с которой вы столкнулись, не связана напрямую с файлами metadata.json , хотя они вам тоже понадобятся. Я предполагаю, что где-то в вашем коде есть export const blah = () => something которое нужно изменить на export function blah() { return something; } .

Я написал еще одну статью , в которой рассматриваются решения некоторых ошибок (включая ошибку Function calls are not supported ), которые я столкнулся с обновлением библиотек, чтобы они были совместимы с AoT.

+1 за поддержку AoT
Вчера изо всех сил пытался интегрировать angular2-google-maps с Ionic2 RC0

Большое спасибо!

@modularcoder Вы действительно

@lazarljubenovic только без AoT в сборке для dev env.

Я описал шаги здесь
https://forum.ionicframework.com/t/angular2-google-maps-in-ionic-2/65736

Убедитесь, что у вас установлена ​​последняя версия @ ionic / app-scripts, которая не выполняет компиляцию AoT во время сборки dev.
https://github.com/driftyco/ionic-app-scripts

@modularcoder Что делать, если вам нужно собрать приложение для android, ошибка есть ... Вы нашли какое-нибудь решение для этого? Вероятно, нам не следует использовать Ionic 2 для приложений на этом этапе, ничего особенного не работает ...

@allurco: да, мне удалось создать приложение без компиляции AoT, добавив флаг «--dev» для сборки задачи в package.json.

Я создал пример репо
https://github.com/modularcoder/ionic2-angular2-google-maps-example/blob/master/README.md

Обратитесь к readme для получения дополнительной информации.

PS Убедитесь, что у вас установлена ​​последняя версия пакета @ ionic / app-scripts.

@SebastianM есть ли обновления о том, когда эта ошибка может быть исправлена? Спасибо!

@basvdijk Извините, ребята, сейчас я переписываю процесс сборки, чтобы иметь возможность поддерживать AOT. Ожидайте обновлений в ближайшие дни.

@SebastianM Отлично! Ваши усилия очень ценны 👍

Приятно видеть, что это исправлено! Есть мысли о том, когда вы собираетесь выпустить это обновление?

Это исправлено? Использование angular2-google-maps с AoT вызывает ошибку «Произошла ошибка при статическом разрешении значений символов. Вызовы функций не поддерживаются. Рассмотрите возможность замены функции или лямбда-выражения ссылкой на экспортированную функцию, разрешающую символ».

Я думаю, что ошибка исправлена, и проблема была добавлена ​​на этапе 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, как упоминалось ранее, вехой для 0.16.0 с поддержкой AoT является 55% см. https://github.com/SebastianM/angular2-google-maps/milestone/12 Насколько мне известно, последняя выпущенная версия поддерживает пока не поддерживает AoT.

@basvdijk Запустив npm install git+https://[email protected]/SebastianM/angular2-google-maps.git , разве он не установит версию с изменениями?

@staticint, что действительно могло быть так. Возможно, @SebastianM может описать, как вы можете установить последнюю версию git с поддержкой AoT.

Изменить: извините, я ошибаюсь - установка npm уже должна быть создана для вас.

Вытаскивая репо напрямую с помощью npm, вы получаете только исходный код, а не встроенные ресурсы.

Теоретически вы можете клонировать это репо, построить его локально, а затем связать npm со своим проектом, но это, вероятно, практично только для локальной разработки. Или вы можете загрузить куда-нибудь архив сборки и вытащить его с помощью npm .

Кто-нибудь знает, как установить его из репозитория GitHub?

Спасибо

@ tchinou1 Это в документации npm .

Вопрос. Я только что разветвил, клонировал, построил и npm-связал основную ветку, и в моем существующем проекте я получил Uncaught Error: Can't resolve all parameters for LazyMapsAPILoader: (?, WindowRef, DocumentRef). . Я импортирую эту библиотеку в ленивый загружаемый модуль со следующим кодом в моем модуле imports :

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

Я попытался создать черный новый проект и попытался минимально воспроизвести ситуацию, но он работает в другом репо, поэтому я не знаю, с чего начать. Как будто он не получает объект, переданный через метод forRoot .

У кого-нибудь была подобная ситуация или это сообщение об ошибке? Я знаю, что это долгий путь без кода и невоспроизводимой ошибки, но у меня заканчиваются идеи.

Как я могу обновить свои карты Google angular, чтобы AOT работал? доступна ли сейчас версия AOT?

Чтобы AOT работал, добавьте "angular2-google-maps": "^0.16.0", в свой package.json файл

Затем в своем компоненте приложения импортируйте модуль:

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 рейтинги