typescript Ionic 2 - 运行时错误找不到模块“。”

Ionic 2 - Runtime error Cannot find module "."

提问by jsdiaries-gd

I have experienced this error when serving my Ionic 2 application to my localhost by using the command:

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

ionic serve

I am unsure where this error stems from. I have meticulously double checked all my imports for a broken path in my TypeScript files. I haven't found anything.

我不确定这个错误的来源。我已经仔细地仔细检查了所有导入的 TypeScript 文件中是否有损坏的路径。我什么也没找到。

The only changes made between the application working and not working was adding a new interface for holding data for a Google maps Location.

在应用程序工作和不工作之间所做的唯一更改是添加一个新界面来保存 Google 地图位置的数据。

However I don't see how this would be relevant and it has to be something else in the build process.

但是我不知道这有什么关系，它必须是构建过程中的其他东西。

app.modules.ts

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

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

新地.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

place.model.ts

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

Ionic Versions

离子版本

 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

包.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"
}

Can anyone give advice on how to debug this further? Should I debug the polyfils.tsfile?

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

采纳答案by Sampath

I can see 2 issues on your approach.

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

Issue 1:You have to remove this old module "ionic-native": "^2.4.1",.After that run npm i

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

Issue 2:You need to inject Geolocationinside the providersarray (app.module.ts).You must do this with the latest ionic native ("@ionic-native/core": "^3.4.4").

问题 2：您需要Geolocation在providers数组内部注入( app.module.ts)。您必须使用最新的 ionic native ( "@ionic-native/core": "^3.4.4")执行此操作。

You can read more about it here: Ionic Native.

您可以在此处阅读更多相关信息：Ionic Native。

回答by Victor Jatobá

I know that the below solution it is not your case, but I have the same problem in Ionic 3.

我知道下面的解决方案不是你的情况，但我在 Ionic 3 中遇到了同样的问题。

The solution was reported on Webpack issue discutionby @killian2301.

@killian2301在Webpack 问题讨论中报告了该解决方案。

Just remove all imports that have /umdat the final.

只需删除所有在最终具有/umd 的导入即可。

In my case, I changed: import { IonicPageModule } from 'ionic-angular/umd'; To: import { IonicPageModule } from 'ionic-angular';

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

回答by Sri Vivek

This frequently occurs in Ionic 2+ , due to unusual auto import by IDE.

由于 IDE 不寻常的自动导入，这在 Ionic 2+ 中经常发生。

Change the code from

将代码从

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

to

到

import { TextInput } from 'ionic-angular';

where ever it occurs with package/umd

它发生在package/umd 的任何地方