模块“AppModule”导入的意外值“未定义”

Question

对 ionic 完全陌生，但想尽快学习，我需要您的帮助。 基本上，使用 ionic 3.19 开发一个应用程序，在两个选项卡（WeatherPage 和 ForecastPage）中显示当前天气和天气预报。 并得到：模块“AppModule”导入的意外值“未定义” 我的 app.module.ts：

import { BrowserModule } from ‘@angular/platform-browser’;
import { ErrorHandler, NgModule } from ‘@angular/core’;
import { IonicApp, IonicErrorHandler, IonicModule } from ‘ionic-angular’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { StatusBar } from ‘@ionic-native/status-bar’;

import { MyApp } from ‘./app.component’;

import { WeatherApiPage } from ‘../pages/weather-api/weather-api’;
import { ForecastPage } from ‘../pages/forecast/forecast’;
import { WeatherPage } from ‘../pages/weather/weather’;
import { AppConstants } from ‘../providers/app-constants/app-constants’;
import { WeatherApi } from ‘../providers/weather-api/weather-api’;
import { ChartModule } from ‘highcharts’;

@NgModule({
declarations: [
MyApp,
WeatherApiPage,
ForecastPage,
WeatherPage
],
imports: [
ChartModule,
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
WeatherApiPage,
ForecastPage,
WeatherPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
AppConstants,
WeatherApi
]
})
export class AppModule {}

有什么解决办法吗？非常感谢！

forecast.ts：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AppConstants } from '../../providers/app-constants/app-constants';
import { WeatherApi } from '../../providers/weather-api/weather-api';

/**
 * Generated class for the ForecastPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-forecast',
  templateUrl: 'forecast.html',
  providers: [AppConstants, WeatherApi]
})
export class ForecastPage {

  forecastForm: FormGroup;
  private appConstants: any;
  private weather: any;
  private geometry: any;
  private minWeather: number[][];
  private maxWeather: number[][];
  private weatherTime: any;
  weatherResult: boolean;
  summaryIcon: string;
  chartValue: {};

  constructor(private navController: NavController, private fb: FormBuilder, appConstants: AppConstants, weatherApi: WeatherApi) {
    this.forecastForm = fb.group({'location': ['', Validators.compose([Validators.required,Validators.pattern('[a-zA-Z, ]*'),
      Validators.minLength(3),Validators.maxLength(100)])],'forecastType': 'daily'});
    this.appConstants = appConstants;
    this.weather = weatherApi;
    this.geometry = { "longitude":"", "latitude":""};
    this.minWeather = new Array();
    this.maxWeather = new Array();
    this.weatherTime = new Array();
    this.weatherResult = false;
    this.summaryIcon ="";
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ForecastPage');
  }

  filterJson(json,forecastType) {
    this.minWeather = new Array();
    this.maxWeather = new Array();
    this.weatherTime = new Array();
    for(var i=0;i<json.length;i++)
    {
      var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
      var b: Date = new Date(json[i].time * 1000);
      if(forecastType == "daily")
      {
        this.weatherTime.push(b.getDate()+" "+months[b.getMonth()]+" "+b.getFullYear());
        this.maxWeather.push(json[i].temperatureMax);
        this.minWeather.push(json[i].temperatureMin);
      }
      else
      {
        this.weatherTime.push(b.getDate()+" "+months[b.getMonth()]+" "+b.getFullYear() +" - "+b.getHours() +" hours");
        this.minWeather.push(json[i].temperature);
      }
    }
  }

  getForecast(formData: any) {
    this.weather.getGeometry(this.appConstants.getGoogleAPIURL(), formData.value.location).
    subscribe((data: any) => {
      this.geometry.longitude = data.results[0].geometry.location.lng;
      this.geometry.latitude = data.results[0].geometry.location.lat;
      this.weather.getCurrentWeather(this.geometry.longitude,this.geometry.latitude).
      subscribe((weatherData: any) => {
        this.weatherResult = true;
        if(formData.value.forecastType == "daily")
        {
          this.filterJson(weatherData.daily.data,formData.value.forecastType);
          this.chartValue = {
            title : { text : 'Weather Forecast' },
            chart: { type: 'column' },
            xAxis: { categories: this.weatherTime },
            series: [
              { name : 'Min Temp', data: this.minWeather},
              { name : 'Max Temp', data: this.maxWeather}
            ]
          };
        }
        else
        {
          this.filterJson(weatherData.hourly.data,formData.value.forecastType);
          this.chartValue = {
            title : { text : 'Weather Forecast' },
            chart: { type: 'column' },
            xAxis: { categories: this.weatherTime },
            series: [
              { name : 'Min Temp', data: this.minWeather},
              { name : 'Max Temp', data: this.maxWeather}
            ]
          };
        }
      });
    });
  }

}

Answer 1

尝试使用您的原始代码制作 chartmodule.forRoot(highcharts)。

在app.module.ts

中

import { ChartModule } from 'highcharts';
import * as highcharts from 'highcharts';

imports:[
 BrowserModule,
 ChartModule.forRoot(highcharts),
 IonicModule.forRoot(MyApp)
]