Angular2 Tutorial (Tour of Heroes): Cannot find module 'angular2-in-memory-web-api'
AngularImportAngular Tour-of-HeroesAngular Problem Overview
I have followed the Tutorial. After changing app/maint.ts
in the Http chapter I get the error when starting the app via command line:
> app/main.ts(5,51): error TS2307: Cannot find module 'angular2-in-memory-web-api'.
(Visual Studio Code gives me the same error within main.ts - red wavy underlining.)
Here is my systemjs.config.js
:
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
};
var ngPackageNames = [ 'common', 'compiler', 'core', 'http', 'platform-browser', 'platform-browser-dynamic', 'router', 'router-deprecated', 'upgrade', ];
// Add package entries for angular packages
ngPackageNames.forEach(function(pkgName) {
packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
}
System.config(config);
})(this);
Here is my app/main.ts
:
// Imports for loading & configuring the in-memory web api
import { provide } from '@angular/core';
import { XHRBackend } from '@angular/http';
import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';
// The usual bootstrapping imports
import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import { AppComponent } from './app.component';
bootstrap(AppComponent, [
HTTP_PROVIDERS,
provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server
provide(SEED_DATA, { useClass: InMemoryDataService }) // in-mem server data
]);
Angular Solutions
Solution 1 - Angular
As for projects created using current CLI Tools, it worked for me by installing
npm install angular-in-memory-web-api --save
and then performing import as
import { InMemoryWebApiModule } from 'angular-in-memory-web-api/in-memory-web-api.module';
> My package.json >
> "dependencies": {
> "@angular/common": "^2.4.0",
> "@angular/compiler": "^2.4.0",
> "@angular/core": "^2.4.0",
> "@angular/forms": "^2.4.0",
> "@angular/http": "^2.4.0",
> "@angular/platform-browser": "^2.4.0",
> "@angular/platform-browser-dynamic": "^2.4.0",
> "@angular/router": "^3.4.0",
> "angular-in-memory-web-api": "^0.3.1",
> "core-js": "^2.4.1",
> "rxjs": "^5.1.0",
> "zone.js": "^0.7.6" },
> "devDependencies": {
> "@angular/cli": "1.0.0-rc.4",
> "@angular/compiler-cli": "^2.4.0",
> "@types/jasmine": "2.5.38",
> "@types/node": "~6.0.60",
> "codelyzer": "~2.0.0",
> "jasmine-core": "~2.5.2",
> "jasmine-spec-reporter": "~3.2.0",
> "karma": "~1.4.1",
> "karma-chrome-launcher": "~2.0.0",
> "karma-cli": "~1.0.1",
> "karma-jasmine": "~1.1.0",
> "karma-jasmine-html-reporter": "^0.2.2",
> "karma-coverage-istanbul-reporter": "^0.2.0",
> "protractor": "~5.1.0",
> "ts-node": "~2.0.0",
> "tslint": "~4.5.0",
> "typescript": "~2.0.0" }
Solution 2 - Angular
For me the only solution was to upgrade angular2-in-memory-web-api
to 0.0.10
.
In package.json
set
'angular2-in-memory-web-api': '0.0.10'
in the dependecies block, and in systemjs.config.js
set
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
in the packages
object.
Solution 3 - Angular
Here is what worked for me:
I noticed that the package.json had the following version:
"angular2-in-memory-web-api": "0.0.20"
Note the "2" in the name.
However when referencing InMemoryWebApiModule it was using 'angular-in-memory-web-api' without the 2 in the name. So I added it and it resolved the issue:
import { InMemoryWebApiModule } from 'angular2-in-memory-web-api';
Note: I found this in notice section of https://github.com/angular/in-memory-web-api
> As of v.0.1.0, the npm package was renamed from > angular2-in-memory-web-api to its current name, > angular-in-memory-web-api. All versions after 0.0.21 are shipped under > this name. Be sure to update your package.json and import statements.
Solution 4 - Angular
Angular 4 Changes
As of October 17, 2017, the tutorial fails to mention that angular-in-memory-web-api
is not included in a standard CLI build, and must be installed separately. This can be easily done with npm
:
$ npm install angular-in-memory-web-api --save
This automatically handles the necessary changes to package.json
, so you don't need to make edits yourself.
Points of confusion
This thread is quite confusing as the Angular CLI has changed significantly since this thread was started; a problem with many rapidly-evolving APIs.
angular-in-memory-web-api
has been renamed; it drops the 2 from angular2 to simplyangular
- The Angular CLI no longer uses SystemJS (replaced by Webpack), so
systemjs.config.js
no longer exists. npm
'spackage.json
should not be edited directly; use the CLI.
Solution
As of October 2017, the best fix is to simply install it yourself using npm
, as I mentioned above:
$ npm install angular-in-memory-web-api --save
Good luck out there!
Solution 5 - Angular
It works for me:
In package.json dependencies block set ( use "angular" instead of "angular2")
"angular-in-memory-web-api": "^0.3.2",
Then run
npm install
OR
simply just run (my preferable)
npm install angular-in-memory-web-api --save
Solution 6 - Angular
I'm currently doing the tutorial and had a similar problem. What seems to have fixed it for me is defining a main file for 'angular2-in-memory-web-api'
in the packages
variable in systemjs.config.js
:
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
Before I added this, there was a 404 error logged for /node_modules/angular2-in-memory-web-api/
where it seemed to be trying to load a JavaScript file. Now it loads /node_modules/angular2-in-memory-web-api/index.js
and the other files in this module.
Solution 7 - Angular
This solved the 404 problem
From Angular in-memory-web-api Documentation
>Always import the InMemoryWebApiModule after the HttpModule to ensure that the XHRBackend provider of the InMemoryWebApiModule supersedes all others.
Module imports should have InMemoryWebApiModule listed after HttpModule
@NgModule({
imports: [ BrowserModule,
AppRoutingModule,
FormsModule,
HttpModule,
InMemoryWebApiModule.forRoot(InMemoryDataService),
...
Solution 8 - Angular
From your root folder (the folder contain package.json), using:
npm install angular-in-memory-web-api –-save
Solution 9 - Angular
The simplest solution I could think of was to install the package with npm and restart the server:
npm install angular-in-memory-web-api --save
I almost installed the angular2-in-memory-web-api package, but the npm page says:
> All versions after 0.0.21 are (or soon will be) shipped under > angular-in-memory-web-api.
Note: This solution worked for a project that was created with the CLI tools, which does not list the package as a dependency, and might not solve the problem for projects that were created with the Quickstart seed, which does list the package as a dependency.
Solution 10 - Angular
I am using angular 4 and below solved my problem.
> npm install angular-in-memory-web-api --save
Solution 11 - Angular
This was a real stinker. Thanks to @traneHead, @toni and others, these steps worked for me.
- Upgrade
angular2-in-memory-web-api
to0.0.10
- Edit the packages variable property in
systemjs.config.js
:
angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' }
Solution 12 - Angular
I create my project using angular-cli and i set in package.json "angular-in-memory-web-api": "^0.2.4" in dependences block and then i run npm install.
Work for me :D
Solution 13 - Angular
For users who generated an empty project with angular cli 1.4.9 (Actual on October 2017) and then started follow the instructions step-by-step, just run the following command:
npm i angular-in-memory-web-api
Just that command, without anything additional.
Hope that saves someone's time
Solution 14 - Angular
If you are using angular cli, you would get this error.
Please add 'angular2-in-memory-web-api'
in the const barrels
in the system-config.ts file as below:
const barrels: string[] = [
// Angular specific barrels.
'@angular/core',
'@angular/common',
'@angular/compiler',
'@angular/forms',
'@angular/http',
'@angular/router',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
// Thirdparty barrels.
'rxjs',
'angular2-in-memory-web-api',
// App specific barrels.
'app',
'app/shared',
/** @cli-barrel */
];
And add 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'
as below.
System.config({
map: {
'@angular': 'vendor/@angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js',
'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'
},
packages: cliSystemConfigPackages,
});
Rebuild using npm start
. This resolved the issue for me.
Solution 15 - Angular
Try adding the typescript definitions:
sudo typings install --save file:./node_modules/angular2-in-memory-web-api/in-memory-backend.service.d.ts
... specifying the dependency name:
angular2-in-memory-web-api
Then add the entry point for "angular2-in-memory-web-api" in /systemjs.config.js
var packages = {
...
'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' }
};
Solution 16 - Angular
I had the same problem, I changed in systemjs.config :
'angular2-in-memory-web-api': { defaultExtension: 'js' },
By this line :
'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' },
Solution 17 - Angular
Changing this line, as suggested above, worked for me in the Angular 2 Heroes Tutorial:
'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' },
Solution 18 - Angular
I solved it copying index.js
and index.d.ts
to core.js
and core.d.ts
, that is, inside node_modules/angular2-in-memory-web-api
folder. Go figure out.
Solution 19 - Angular
The main answer helped me: change
'angular2-in-memory-web-api': { defaultExtension: 'js' },
to
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
Solution 20 - Angular
in app\main.ts simply modify:
import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
to:
import { InMemoryBackendService, SEED_DATA } from '../node_modules/angular2-in-memory-web-api';
then add the index.js parameter in
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main:'index.js', defaultExtension: 'js' }
};
in systemjs.config.js
it's work for me.
Solution 21 - Angular
If using angular cli to build your angular2 app, including the angular2-in-memory-web-api involves three steps:
-
add the api to the system-config.ts file (inside the src subdirectory) like below:
/** Map relative paths to URLs. */ const map: any = { 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api' }; /** User packages configuration. */ const packages: any = { 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' } };
-
Add
angular2-in-memory-web-api/**/*.+(js|js.map)'
to the vendorNpmFiles array in the angular-cli-build.js file like ofShard mentioned;
-
Of course, add to the package.json as described by traneHead; for 2.0.0-rc.3 I use the version below:
"angular2-in-memory-web-api": "0.0.13"
I find this link "Adding material2 to your project" explains the process of adding third-party libraries quite clearly.
Solution 22 - Angular
Latest fix as of this date, is to
- replace all instances of "angular2-in-memory-web-api" with "angular-in-memory-web-api".
- Change package.json dependency version from
"angular-in-memory-web-api": "0.0.20"
to"angular-in-memory-web-api": "0.1.0"
and"zone.js": "^0.6.23"
to"zone.js": "^0.6.25"
- In systemjs.config.js, change the path for index.js. It should look like:
'angular-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
Solution 23 - Angular
As of latest (currently 0.1.14), this is what's stated in the CHANGELOG
>In systemjs.config.js
you should change the mapping to:
> 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
>then delete from packages
:
> 'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
Solution 24 - Angular
I got this error because I was importing InMemoryWebApiModule
from angular2-in-memory-web-api
I removed the 2. Actually I had two entries in my package.json file; one was angular2-in-memory-web-api
and the second wasangular-in-memory-web-api
. Using angular-in-memory-web-api
solved the problem for me. So your import should be like this:
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
...
@NgModule({
imports: [
InMemoryWebApiModule.forRoot(InMemoryDataService)
]
})
Using cli-angular you need not to change anything regarding system.config.js
.
Solution 25 - Angular
For me just doing an install from angular-tour-of-heroes directory works for me
C:\nodejs\angular-tour-of-heroes>npm install angular-in-memory-web-api --save
Solution 26 - Angular
The Best way is to install it using NPM e.g
npm install git+https://github.com/itryan/in-memory-web-api/ --save
it will add required reference
Solution 27 - Angular
I encountered a similar problem. I just downloaded the entire example near the end of part 7 (last part) of the tutorial and ran it. It worked.
Of course, you need to install and compile everything first.
> npm install
> npm start
I also changed 'app-root' to 'my-app' in app.component.ts.
Solution 28 - Angular
import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';
The InMemoryDataService
class doesn't come under any API. We need to create a service class and then import that service class into app.module.ts file.
Solution 29 - Angular
Toni, You need to add the typings for Angular2-in-memory-web-api.
Add them in your TS file.
/// reference path=”./../node_modules/angular2-in-memory-web-api/typings/browser.d.ts”