angular - Ionic 2 - 运行时错误找不到模块 "."

标签 angular typescript ionic-framework webpack ionic2

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

ionic serve

我不确定这个错误是从哪里来的。我已经仔细检查了我所有的导入文件中是否存在 TypeScript 文件中的损坏路径。我还没有找到任何东西。

应用程序工作和不工作之间的唯一变化是添加了一个新接口(interface)来保存 Google map 位置的数据。

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

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

 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 文件吗?

最佳答案

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

解决方案报告于 Webpack issue discution 通过@killian2301。

只删除所有在最后有 /umd 的导入。

在我的例子中,我改变了: 从 'ionic-angular/umd' 导入 { IonicPageModule }; 到: 从 'ionic-angular' 导入 { IonicPageModule };

关于angular - Ionic 2 - 运行时错误找不到模块 ".",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43236971/

相关文章:

javascript - 子数组中的 ionic /Angular 多重过滤器

node.js - 管理数据库中不断变化的数据

Angular2 为什么使用@Output 而不是@Input 进行回调

javascript - "Cannot find module ' @angular/compiler-cli/ngcc '"在我的应用程序上运行 "ng serve"时

typescript - 如何在树形结构上列出 MongoDB 中的所有项目?

javascript - 在 TypeScript 中使用三个 Js + OrbitControl

angular - 模拟 Angular Material Dialog afterClosed() 用于单元测试

html - 我正在尝试所有选定的数组来更改 Angular 4 的样式

iOS 应用程序 ID 更改

cordova - 调用cordova命令后CMD关闭