Question

使用以下命令将Ionic 2应用程序提供给localhost时遇到此错误：

ionic serve

我不确定这个错误源于何处。我仔细地仔细检查了我的TypeScript文件中所有导入的损坏路径。我还没找到任何东西。

应用程序正常工作与不工作之间的唯一变化是添加了一个用于保存Google地图位置数据的新界面。

但是我不知道这是如何相关的，它必须是构建过程中的其他东西。

app.modules.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { IonicStorageModule } from '@ionic/storage';
import { MyApp } from './app.component';
import { Geolocation } from '@ionic-native/geolocation';
import { Place } from '../model/place.model';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';

import { NewPlacePage } from '../pages/new-place/new-place';
import { PlacePage } from '../pages/place/place';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { ActivePage } from '../pages/active/active';
import { PlacesService } from '../services/places.service';
import { ConnectivityService } from '../providers/connectivity-service';
import {AgmCoreModule }  from 'angular2-google-maps/core'

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    ActivePage,
    NewPlacePage,
    PlacePage
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
    AgmCoreModule.forRoot({
      apiKey: 'hiddenforstackoverflow'
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    ActivePage,
    NewPlacePage,
    PlacePage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, ConnectivityService, PlacesService, Storage]
})
export class AppModule {}

places.service.ts

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
import { Place } from '../model/place.model';


@Injectable()
export class PlacesService {

    private places: Place[] = [];


    constructor(private storage: Storage) { }
    addPlace(place: Place) {
        this.places.push(place);

        console.log(this.places);
        this.storage.set('places', this.places);

    }

    getPlaces() {
        return this.storage.get('places')
            .then(
            (places) => {
                this.places = places == null ? [] : places;
                console.log(this.places);
                console.log(places);
                return this.places.slice();
            });

    }
}

newplace.ts

import { Component, Injectable } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { PlacesService } from '../../services/places.service';
import { Geofence, Geolocation, SMS } from 'ionic-native';


@Component({
  selector: 'page-new-place',
  templateUrl: 'new-place.html'
})


export class NewPlacePage {

  location: { lat: number, lng: number } = { lat: 0, lng: 0 };

  constructor(private placesService: PlacesService, private navCtrl: NavController) { }

  onLocateUser() {
    Geolocation.getCurrentPosition()
      .then(
      (location) => {
        console.log('Location successful')
        this.location.lat = location.coords.latitude;
        this.location.lng = location.coords.longitude
      }
      )
  }
  onAddPlace(value: { title: string }) {
    console.log(value);
    this.placesService.addPlace({ title: value.title, location: this.location });
    this.navCtrl.pop();

  }

}

place.model.ts

export interface Place {
    title: string;
    location: {
        lat: number,
        lng: number
    }
}

离子版

 Ionic Framework: 2.2.0
    Ionic Native: ^2.4.1
    Ionic App Scripts: 1.2.5
    Angular Core: 2.4.8
    Angular Compiler CLI: 2.4.8
    Node: 7.7.4
    OS Platform: Windows 10
    Navigator Platform: Win32
    User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

的package.json

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "2.4.8",
    "@angular/compiler": "2.4.8",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "2.4.8",
    "@angular/forms": "2.4.8",
    "@angular/http": "2.4.8",
    "@angular/platform-browser": "2.4.8",
    "@angular/platform-browser-dynamic": "2.4.8",
    "@angular/platform-server": "2.4.8",
    "@ionic-native/core": "^3.4.4",
    "@ionic-native/geolocation": "^3.4.4",
    "@ionic/storage": "2.0.0",
    "@types/google-maps": "^3.2.0",
    "angular2-google-maps": "^0.17.0",
    "ionic-angular": "2.2.0",
    "ionic-native": "^2.4.1",
    "ionicons": "3.0.0",
    "typescript": "2.0.9",
    "rxjs": "5.0.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^1.2.5",
    "sw-toolbox": "3.4.0",
    "typescript": "2.0.9"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-device",
    "cordova-plugin-statusbar",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "ionic-boiler: An Ionic project"
}

有人可以提供有关如何进一步调试的建议吗？我应该调试 polyfils.ts 文件吗？

Answer 1

我知道以下解决方案不是您的情况，但是在Ionic 3中我有同样的问题。

该解决方案的报告时间为Webpack issue discution 通过@ killian2301。

只需删除最后具有 / umd 的所有进口商品即可。

就我而言，我更改了： import { IonicPageModule } from 'ionic-angular/umd'; 至： import { IonicPageModule } from 'ionic-angular';

Answer 2

由于IDE异常自动导入，在Ionic 2+中经常发生这种情况。

从

更改代码

 import { TextInput } from 'ionic-angular/umd';

到

import { TextInput } from 'ionic-angular';

与 package / umd

一起出现的任何地方

Answer 3

我可以看到你的方法有两个问题。

问题1：您必须删除此旧模块"ionic-native": "^2.4.1",。之后运行npm i

问题2：您需要在Geolocation数组（providers）中注入app.module.ts。您必须使用最新的离子本机（{{ 1}}）。

您可以在此处详细了解：Ionic Native。

离子2 - 运行时错误找不到模块“。”

3 个答案: