如何解决离子未捕获错误：找不到模块“。”添加新页面时？答案

【问题标题】：How can I resolve Ionic Uncaught Error: Cannot find module "." when adding new page?如何解决离子未捕获错误：找不到模块“。”添加新页面时？
【发布时间】：2019-01-14 12:41:41
【问题描述】：

未捕获的错误：找不到模块“。”

    at webpackMissingModule (index.js:3)
    at e.code (index.js:3)
    at Object.<anonymous> (index.js:9)
    at __webpack_require__ (bootstrap ee3a374a94c4cd74e2a6:54)
    at Object.256 (main.ts:5)
    at __webpack_require__ (bootstrap ee3a374a94c4cd74e2a6:54)
    at Object.233 (main.js:412)
    at __webpack_require__ (bootstrap ee3a374a94c4cd74e2a6:54)
    at webpackJsonpCallback (bootstrap ee3a374a94c4cd74e2a6:25)
    at main.js:1

在应用程序中添加新的bookmarks 页面之前，应用程序运行良好，添加bookmarks 页面后我得到Uncaught Error: Cannot find module "."

这是我的设置

Ionic Framework: 3.9.2
Angular Core: 5.2.11
Angular Compiler CLI: 5.2.11
Node: 8.11.1

app.module.ts

import { ContactPage } from '../pages/contact/contact';
import { BookmarksPage} from'../pages/bookmarks/bookmarks';

@NgModule({
  declarations: [
    ContactPage,
    BookmarksPage,
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ContactPage,
    BookmarksPage,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
    ]
  })
export class AppModule {}

bookmarks.ts

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

@Component({
selector: 'page-bookmarks',
templateUrl: 'bookmarks.html'
 })
export class BookmarksPage {
    constructor(public navCtrl: NavController) {
  }
}

index.js in developer console

我也尝试清除缓存和npm rebuild。在构建 (ionic serve) 过程中没有错误。但是在浏览器中我找不到模块，我真的很想了解这里发生了什么

【问题讨论】：

您是否将MyApp 导入到app.module.ts 文件中？
是的，我确实导入了
from '../pages/bookmarks/bookmarks'。尝试在 app.module 导入中的 from 关键字后添加空格。

标签： javascript angular webpack ionic3 angular6

【解决方案1】：

从导入中删除umd

改变

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

到

 import { NavController } from 'ionic-angular';

查看this了解更多详情。

【讨论】：

哦，对不起，我没有umd，但仍然遇到同样的问题。我更新了问题。在使用import { NavController } from 'ionic-angular/umd'; 的离子启动应用程序中删除“umd”背后的逻辑是什么

【解决方案2】：

终于弄清楚了，从ionic cli 创建项目时，项目中缺少IonicPageModule。

在项目中手动添加IonicPageModule 并运行命令npm run-script 修复了该问题。

解决方案

app-module.ts

import { IonicPageModule } from 'ionic-angular';

imports: [
  IonicPageModule.forChild(HomePage)
],

npm run-script build

注意：IonicPageModule 是一个 NgModule，它引导一个子 IonicPage 以设置路由。

PS：仍然不知道它是如何工作的，但确实有效。感谢大家的帮助。

【讨论】：