How can I resolve Ionic Uncaught Error: Cannot find module “.” when adding new page?

问题

Uncaught Error: Cannot find module "."

    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

Before adding new bookmarks pages in app, the app working perfectly fine, After adding bookmarks pages i'm getting Uncaught Error: Cannot find module "."

Here is my setup

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

I've tried to clear cache and npm rebuild also. In the build (ionic serve) process there is no errors. But in the browser i'm getting Cannot find module, i really want to understand what is going on here

回答1:

remove the umd from the import

change

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

 import { NavController } from 'ionic-angular';

check this for more details.

回答2:

Finally figured out, when creating the project from ionic cli the IonicPageModule was missing on the project.

Adding IonicPageModule manually in project and running command npm run-script fixed the issue.

Solution

app-module.ts

import { IonicPageModule } from 'ionic-angular';

imports: [
  IonicPageModule.forChild(HomePage)
],

npm run-script build

NOTE: IonicPageModule is an NgModule that bootstraps a child IonicPage in order to set up routing.

PS: Still dint know how that worked, but that worked. Thanks everyone for trying to help.

来源：https://stackoverflow.com/questions/51726528/how-can-i-resolve-ionic-uncaught-error-cannot-find-module-when-adding-new-p

标签

javascript

angular

Webpack

ionic3

angular6