angular-in-memory-web-api/index.js does not export InMemoryWebApiModule

[sosnet]

I started new project with current ionic2rc0, get the following error:

Error: Module ./node_modules/angular-in-memory-web-api/index.js does not export InMemoryWebApiModule (imported by ./.tmp/app/app.module.js)

ionic info

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS: Distributor ID: LinuxMint Description:  Linux Mint 17.3 Rosa 
Node Version: v6.7.0

npm list -depth=0

├── @ionic/app-scripts@0.0.23
├── @ionic/storage@1.1.2
├── angular-in-memory-web-api@0.1.3 extraneous
├── ionic-angular@2.0.0-rc.0
├── ionic-native@2.0.3
├── ionicons@3.0.0
└── typescript@2.0.3

Any ideas? Or is it a specific ionic problem? Thank you!

[sosnet]

I downgraded to angular2-in-memory-web-api@0.0.21 and it's working now.
But would be nice to get info how to use the newest version.

[wardbell]

Something else is wrong as InMemoryWebApiModule clearly is exported by in-memory-web-api.module.ts
and is re-exported by index.ts: export * from './in-memory-web-api.module';

I strongly suspect that you haven't updated your import statements to refer to angular-in-memory-web-api; they are probably still referring to angular2-in-memory-web-api.

[sosnet]

Thank you for your answer.
I upgraded angular-in-memory-web-api to version 0.1.5, but I get exactly the same error as mentioned above. I import the api two times in my code, both with the correct path/name (without the 2).
I also tried to make a new ionic project (ionic start --v2 test) and only import this api but nothing else. I get the same error..

app.module.ts

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService }  from './in-memory-data.service';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    InMemoryWebApiModule.forRoot(InMemoryDataService)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: []
})
export class AppModule {}

in-memory-data.service.ts

import { InMemoryDbService } from 'angular-in-memory-web-api';
export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    let testDB = [
      { id: 11, name: 'Test 1' },
      { id: 12, name: 'Test 2' },
      { id: 13, name: 'Test 3' },
      { id: 14, name: 'Test 4' }
    ];

    return {testDB};
  }
}

ionic info

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS: Distributor ID: LinuxMint Description:  Linux Mint 17.3 Rosa 
Node Version: v6.7.0

npm list -depth=0

├── @ionic/app-scripts@0.0.28
├── @ionic/storage@1.1.2
├── angular-in-memory-web-api@0.1.5 extraneous
├── ionic-angular@2.0.0-rc.0
├── ionic-native@2.0.3
├── ionicons@3.0.0
└── typescript@2.0.3

npm ERR! extraneous: angular-in-memory-web-api@0.1.5 ./node_modules/angular-in-memory-web-api

Maybe this npm ERR! extraneous is a hint to the problem?

Edit 1:
Ok, I was able to remove this npm ERR! extraneous by installing angular-in-memory-web-api with the --save tag, but the error staid the same..

[15:14:09]  bundle dev started ...
[15:14:14]  bundle dev failed:  Module ./ionic/test/node_modules/angular-in-memory-web-api/index.js does not export InMemoryWebApiModule (imported by ./ionic/test/.tmp/app/app.module.js)

[15:14:14]  bundle dev failed:  Module ./ionic/test/node_modules/angular-in-memory-web-api/index.js does not export InMemoryWebApiModule (imported by ./ionic/test/.tmp/app/app.module.js)

[15:14:14]  Error: Module /ionic/test/node_modules/angular-in-memory-web-api/index.js does not export InMemoryWebApiModule (imported by ./ionic/test/.tmp/app/app.module.js)
    at Module.trace (./ionic/test/node_modules/rollup/dist/rollup.js:7706:29)
    at ModuleScope.findDeclaration (./ionic/test/node_modules/rollup/dist/rollup.js:7329:22)
    at Scope.findDeclaration (./ionic/test/node_modules/rollup/dist/rollup.js:5349:39)
    at MemberExpression.bind (./ionic/test/node_modules/rollup/dist/rollup.js:6695:28)
    at ./ionic/test/node_modules/rollup/dist/rollup.js:5149:50
    at CallExpression.eachChild (./ionic/test/node_modules/rollup/dist/rollup.js:5166:5)
    at CallExpression.bind (./ionic/test/node_modules/rollup/dist/rollup.js:5149:7)
    at CallExpression.bind (./ionic/test/node_modules/rollup/dist/rollup.js:5850:23)
    at ./ionic/test/node_modules/rollup/dist/rollup.js:5149:50
    at ArrayExpression.eachChild (./ionic/test/node_modules/rollup/dist/rollup.js:5163:19)

[tekix]

@sosnet the error of does not export InMemoryWebApiModule is because ionic2-rc0 uses rollup to create the bundle instead of webpack, and rollup doesn't support importing commonjs module by default. Even though there is a plugin rollup-plugin-commonjs but it seems with some limitation.

I got same error and have to change tsconfig.json of angular-in-memory-web-api to export module with es2015 in this commit, and use it locally

[sosnet]

Thanks @ITRyan to point out the problem. But I think I'm too new to all this stuff to fix it on my own.
I removed angular-in-memory-web-api and re-installed it via npm install git+https://github.com/itryan/in-memory-web-api/ --save from your repository. But I'm still getting the same error.

[tekix]

@sosnet I only submitted the tsconfig.json file but the js files was built on the local machine. Just now i also uploaded the js file, hope it helps.

[sosnet]

Thank you @ITRyan, it's working now!