Angular2 튜토리얼 (Tour of Heroes) : 'angular2-in-memory-web-api'모듈을 찾을 수 없습니다.


99

나는 튜토리얼 을 따랐다 . app/maint.tsHttp 장에서 변경 한 후 명령 줄을 통해 앱을 시작할 때 오류가 발생합니다.

app / main.ts (5,51) : 오류 TS2307 : 'angular2-in-memory-web-api'모듈을 찾을 수 없습니다.

(Visual Studio Code는 main.ts 내에서 동일한 오류-빨간색 물결 모양 밑줄을 표시합니다.)

여기 내 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);

여기 내 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
]);

답변:


66

나를 위해 유일한 해결책은 업그레이드이었다 angular2-in-memory-web-api0.0.10.

에서 package.json설정

'angular2-in-memory-web-api': '0.0.10'

Dependecies 블록 및 systemjs.config.js세트

'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }

packages객체입니다.


4
모듈 오류가 수정되었습니다. 그 후 404 오류가 발생 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }했습니다-systemjs.config.js 파일에서 지정해야 했습니다 (@GrantTaylor의 답변 참조).
toni

4
특히 angular-cli를 사용하여 애플리케이션을 개발 하는 경우 angular-cli-build.js 파일 'angular2-in-memory-web-api/**/*.+(js|js.map)'vendorNpmFiles배열에 추가해야 합니다. 다음과 같이 시스템 구성 맵을 가리켜 야합니다 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'.. 그런 다음 다시 실행 ng serve(또는 npm start)하여 angular2-in-memory-web-api 파일이 dist / vendor 폴더에 있도록합니다.
ofShard

4
Angular 2 Eclipse 플러그인을 사용하는 경우 다음 줄은 dependencies섹션의 package.json에 "angular-in-memory-web-api": "0.1.1"있습니다. npm install하지만 나중에 프로젝트 폴더에서 실행해야했습니다 .
João Mendes

1
나는 여전히이 문제에 직면하고있다 :( 필수 단계를 따른 후에도
Hassan Tariq

5
내 프로젝트 어디에도 systemjs.config.js 파일이 없습니다. 그래도 Angular4를 사용하고 있습니다.
bleistift2

101

현재 CLI 도구를 사용하여 만든 프로젝트의 경우

npm install angular-in-memory-web-api --save

다음으로 가져 오기 수행

import { InMemoryWebApiModule } from 'angular-in-memory-web-api/in-memory-web-api.module';

내 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"   }

1
감사합니다. 또한 InMemoryDbService를 다음과 같이 가져와야했습니다. import {InMemoryDbService} from 'angular-in-memory-web-api / in-memory-backend.service';
Baris Atamer 2017 년

4
npm install명령을 실행 한 후 버전 0.3.2를 얻었습니다. 이 버전을 사용 import { InMemoryWebApiModule } from 'angular-in-memory-web-api';하면 투어에서 설명한대로 할 수 있습니다 .
comecme

@comecme가 지적했듯이을 실행 npm install하면 import { InMemoryWebApiModule } from 'angular-in-memory-web-api'작동합니다.
ajay_whiz

21

나를 위해 일한 것은 다음과 같습니다.

package.json의 버전은 다음과 같습니다.

"angular 2 -in-memory-web-api": "0.0.20"

이름에 " 2 "가 있습니다.

그러나 InMemoryWebApiModule을 참조 할 때 이름에 2가없는 'angular-in-memory-web-api'를 사용했습니다. 그래서 그것을 추가하고 문제를 해결했습니다.

'angular2-in-memory-web-api'에서 {InMemoryWebApiModule} 가져 오기;

참고 : https://github.com/angular/in-memory-web-api의 알림 섹션에서 찾았습니다.

v.0.1.0부터 npm 패키지의 이름이 angular2-in-memory-web-api에서 현재 이름 인 angular-in-memory-web-api로 변경되었습니다. 0.0.21 이후의 모든 버전은이 이름으로 배송됩니다. package.json 및 import 문을 업데이트해야합니다.


18

Angular 4 변경 사항

2017 년 10 월 17 일부터 자습서 angular-in-memory-web-api에서는 표준 CLI 빌드에 포함되지 않으며 별도로 설치해야한다고 언급 하지 않습니다. 다음을 사용하여 쉽게 수행 할 수 있습니다 npm.

$ npm install angular-in-memory-web-api --save

이렇게하면에 필요한 변경 사항이 자동으로 처리 package.json되므로 직접 수정할 필요가 없습니다.

혼란스러운 점

이 스레드가 시작된 이후 Angular CLI가 크게 변경 되었기 때문에이 스레드는 매우 혼란 스럽습니다. 빠르게 진화하는 많은 API의 문제입니다.

  • angular-in-memory-web-api이름이 변경되었습니다. 그것은 방울 2 각도에서 단순히angular
  • Angular CLI는 더 이상 SystemJS (Webpack으로 대체)를 사용 systemjs.config.js하지 않으므로 더 이상 존재하지 않습니다.
  • npmpackage.json직접 편집해서는 안됩니다. CLI를 사용하십시오.

해결책

2017 년 10 월 현재 가장 좋은 방법은 npm위에서 언급 했듯이을 사용하여 직접 설치하는 것입니다 .

$ npm install angular-in-memory-web-api --save

행운을 빕니다!


또한 zone.js가있는 package.json 파일을 0.8.4로 업데이트 한 다음 npm 업데이트를 실행 한 다음 위의 설치를 시도해야 할 수도 있습니다.
Jason

1
여기에 새로운 문제가 있습니다. './in-memory-data.service'모듈을 찾을 수 없습니다.
Kannan T

@kannan - 1. 설치 했나요 angular-in-memory-web-api와 함께 npm? 2. 항목이 거기가 angular-in-memory-web-api당신에 package.json? 3. Angular CLI를 종료하고 다시 시작합니다. Ctrl+Cto kill; ng serve재시작하기 위해). 때때로 CLI는 (VSCode의 각도 플러그인 동감) 이상한 행동한다
오리 석사

@MasterofDucks Bro는 어제 문제를 해결했습니다. 그 이유는 파일을 만들지 않았습니다. 당신의 도움 :) 주셔서 감사합니다
Kannan은 T

15

나를 위해 작동합니다.

package.json 종속성 블록 세트에서 ( "angular2"대신 "angular"사용)

"angular-in-memory-web-api": "^0.3.2",

그런 다음 실행

 npm install

또는

그냥 실행 (내가 선호)

npm install angular-in-memory-web-api --save

14

저는 현재 튜토리얼을 진행 중이며 비슷한 문제가 있습니다. 나를 위해 그것을 고친 것처럼 보이는 것은 'angular2-in-memory-web-api'packages변수에 대한 주 파일을 정의하는 것 입니다 systemjs.config.js.

'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },

이것을 추가하기 전에 /node_modules/angular2-in-memory-web-api/JavaScript 파일을로드하려는 것처럼 보이는 곳에 404 오류가 기록되었습니다 . 이제이 /node_modules/angular2-in-memory-web-api/index.js모듈의 다른 파일과 로드됩니다 .


2
현재 Tour of Heroes 튜토리얼의 HTTP 부분에 몇 가지 오류가있는 것으로 보입니다.
Grant Taylor

이것은 내 오류에 도움이되지 않습니다 (문제의 오류 포함).
toni

먼저 ´angular2-in-memory-web-api´ (@traneHead의 답변 참조)를 업데이트 한 다음이 답변을 적용해야했습니다.
toni

고마워, 내 문제를 해결했다. 다른 사람들이 설명 하듯이 0.0.10까지 올릴 필요가 없었습니다.
Radek Skokan

10

이것은 404 문제를 해결했습니다.

Angular in-memory-web-api 문서에서

InMemoryWebApiModule의 XHRBackend 공급자가 다른 모든 공급자를 대체하도록 항상 HttpModule 다음에 InMemoryWebApiModule을 가져옵니다.

모듈 가져 오기에는 HttpModule 다음에 나열된 InMemoryWebApiModule이 있어야합니다.

@NgModule({
imports:      [ BrowserModule,
              AppRoutingModule,
              FormsModule,
              HttpModule,
              InMemoryWebApiModule.forRoot(InMemoryDataService),
              ...

1
Angular2 데모에서 AppRoutingModule과 같은 경로를 가져온 후에 오는 것도 중요합니다. InMemoryWebApiModule.forRoot (InMemoryDataService) 후에 AppRoutingModule이 있었고 모든 것이 중단되었습니다.
Mark

6

루트 폴더 (폴더에 package.json 포함)에서 다음을 사용합니다.

npm install angular-in-memory-web-api –-save

각도-CLI로 새로운 빠른 시작 가이드를 사용하여 나를 위해 일한
OST

@OST Dude는 angular-cli를 사용하고 있지만이 오류가 발생했습니다. 모듈 './in-memory-data.service'를 찾을 수 없습니다.
Kannan T

5

내가 생각할 수있는 가장 간단한 해결책은 npm으로 패키지를 설치하고 서버를 다시 시작하는 것입니다.

npm install angular-in-memory-web-api --save

angular2-in-memory-web-api 패키지를 거의 설치 했지만 npm 페이지에 다음과 같이 표시됩니다.

0.0.21 이후의 모든 버전은 angular-in-memory-web-api로 배송됩니다 (또는 곧 출시 될 예정) .

참고 :이 솔루션은 패키지를 종속성으로 나열하지 않는 CLI 도구로 만든 프로젝트에서 작동했으며 패키지를 종속성으로 나열하는 Quickstart 시드로 만든 프로젝트의 문제를 해결하지 못할 수 있습니다. .


내 문제는 ng serve이것이 설치되는 동안 여전히 실행 중이었습니다. 종료하고 다시 시작해야했습니다.
Jorn.Beyers

4

앵귤러 4를 사용하고 있으며 아래에서 문제를 해결했습니다.

npm install angular-in-memory-web-api --save


안녕하세요 앵귤러 4를 사용하고 있지만 여기에서 새로운 문제에 직면하고 있습니다. 모듈 './in-memory-data.service'를 찾을 수 없습니다.
Kannan T

3

이것은 진짜 악취였습니다. @traneHead, @toni 및 기타 덕분에이 단계는 저에게 효과적이었습니다.

  1. 업그레이드 angular2-in-memory-web-api0.0.10
  2. 에서 패키지 변수 속성을 편집합니다 systemjs.config.js.

angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' }


이 비디오도 도움이 될 수 있습니다. Angular2 Tutorial-HTTP
AnderSon

3

angular-cli를 사용하여 프로젝트를 만들고 package.json "angular-in-memory-web-api": "^ 0.2.4"를 종속성 블록에 설정 한 다음 npm install을 실행합니다.

나를 위해 일하십시오 : D


이 문제를 일으키는 원인에 대한 권장 사항이 있습니까? 또는 문제를 제거하기 위해 확인하거나 변경할 수있는 구성은 무엇입니까? 아마도 "package.json"의 내용이 도움이 될 수 있습니다.
여호수아 Briefman

3

angular cli 1.4.9 (2017 년 10 월 실제)로 빈 프로젝트를 생성 한 다음 단계별 지침을 따르기 시작한 사용자의 경우 다음 명령을 실행하면됩니다.

npm i angular-in-memory-web-api

추가 사항없이 바로 그 명령입니다.

누군가의 시간을 아끼는 희망


2

각도 CLI를 사용하는 경우이 오류가 발생합니다.

추가하십시오 'angular2-in-memory-web-api'에서 const barrels아래로 시스템 config.ts 파일 :

 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 */
];

그리고 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'아래와 같이 추가 합니다.

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,

});

사용하여 다시 작성 npm start. 이것은 나를 위해 문제를 해결했습니다.


0

typescript 정의를 추가해보십시오.

sudo typings install --save file:./node_modules/angular2-in-memory-web-api/in-memory-backend.service.d.ts

... 종속성 이름 지정 :

angular2-in-memory-web-api

그런 다음에 "angular2 - 메모리 - 웹 API"에 대한 진입 점을 추가 /systemjs.config.js

var packages = {
  ...
  'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' }
};

나는 당신이 쓴 타이핑을 설치했습니다. 그로 인해 타이핑 폴더의 내용이 변경되었습니다 (브라우저 및 기본 하위 폴더에 "\ definitions \ in-memory-backend.service \ index.d.ts"추가, browser.d.ts 및 main.d.ts 파일에 참조 추가) ). "종속성 이름 지정"이란 무엇을 의미합니까?. 지정한대로 진입 점을 추가했습니다. 하지만 내 오류는 여전히 지속됩니다.
toni

"sudo typings install ..."을 실행하면 "종속성 이름이 무엇입니까?"라는 메시지가 표시됩니다. 그런 다음 "angular2-in-memory-web-api"를 입력 할 수 있습니다.
user1014932

내 대답은 angular2-in-memory-web-api v0.0.7 btw에 적용되었습니다.
user1014932

0

나는 같은 문제가 있었고 systemjs.config에서 변경했습니다.

'angular2-in-memory-web-api': { defaultExtension: 'js' },

이 줄로 :

'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' },

0

위에서 제안한대로이 줄을 변경하면 Angular 2 Heroes Tutorial에서 저에게 효과적이었습니다.

'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' },

0

나는 그것이 복사 해결 index.jsindex.d.tscore.js하고 core.d.ts, 즉, 내부 node_modules/angular2-in-memory-web-api폴더에 있습니다. 알아 내세요.


0

주된 대답은 나를 도왔습니다.

'angular2-in-memory-web-api': { defaultExtension: 'js' },

'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }

0

app \ main.ts에서 간단히 수정 :

import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';

에:

import { InMemoryBackendService, SEED_DATA } from '../node_modules/angular2-in-memory-web-api';

그런 다음 index.js 매개 변수를

var packages = {
    'app': { main: 'main.js', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main:'index.js', defaultExtension: 'js' }
};

systemjs.config.js에서

그것은 나를위한 일입니다.


0

이 날짜의 최신 수정 사항은

  1. "angular2-in-memory-web-api"의 모든 인스턴스를 "angular-in-memory-web-api"로 바꿉니다.
  2. 에서 변경 package.json 의존성 버전 "angular-in-memory-web-api": "0.0.20""angular-in-memory-web-api": "0.1.0""zone.js": "^0.6.23""zone.js": "^0.6.25"
  3. systemjs.config.js에서 index.js의 경로를 변경하십시오. 다음과 같아야합니다.
    'angular-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }

0

최신 (현재 0.1.14) 현재, 이것은 CHANGELOG

에서 systemjs.config.js당신의 매핑을하기 위해 변경해야합니다 :

'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'

다음에서 삭제 packages:

'angular-in-memory-web-api': {        
   main: './index.js',     
   defaultExtension: 'js'      
}

0

내가 오기 때문에이 오류가있어 InMemoryWebApiModule에서 angular2-in-memory-web-api나는 실제로 2를 제거 내 package.json 파일에 두 개의 항목이 있었다를; 하나는 angular2-in-memory-web-api이고 두 번째는 angular-in-memory-web-api. 사용하면 angular-in-memory-web-api문제가 해결되었습니다. 따라서 가져 오기는 다음과 같아야합니다.

import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
...
@NgModule({

imports: [
InMemoryWebApiModule.forRoot(InMemoryDataService)
]
})

cli-angular를 사용하면 system.config.js.


0

나를 위해 angular-tour-of-heroes 디렉토리에서 설치하는 것이 나를 위해 작동합니다.

C : \ nodejs \ angular-tour-of-heroes> npm install angular-in-memory-web-api --save



0

비슷한 문제가 발생했습니다. 난 그냥 전체 예제를 다운로드 튜토리얼의 일부 (7) (마지막 부분)의 끝 부분에서 그것을 실행. 효과가있었습니다.

물론 먼저 모든 것을 설치하고 컴파일해야합니다.

> npm install
> npm start

또한 app.component.ts에서 'app-root'를 'my-app'으로 변경했습니다.


0

angular2-in-memory-web-api를 포함하여 angular cli를 사용하여 angular2 앱을 빌드하는 경우 세 단계가 포함됩니다.

  1. 아래와 같이 api를 system-config.ts 파일 (src 하위 디렉토리 내부)에 추가합니다.

    /** 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' }
    };
    
  2. 더하다

    angular2-in-memory-web-api/**/*.+(js|js.map)' 
    

언급 한 ofShard와 같은 angular-cli-build.js 파일의 vendorNpmFiles 배열에;

  1. 물론 traneHead에서 설명한대로 package.json에 추가하십시오. 2.0.0-rc.3의 경우 아래 버전을 사용합니다.

    "angular2-in-memory-web-api": "0.0.13"
    

나는이 찾아 링크 "프로젝트에 Material2에 추가는"매우 명확 타사 라이브러리를 추가하는 과정을 설명합니다.


0
import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
import { InMemoryDataService }               from './in-memory-data.service';

InMemoryDataService클래스는 API에서 제공되지 않습니다. 서비스 클래스를 만든 다음 해당 서비스 클래스를 app.module.ts 파일로 가져와야합니다.


-1

Toni, Angular2-in-memory-web-api에 대한 타이핑을 추가해야합니다.

TS 파일에 추가하십시오.

/// reference path=”./../node_modules/angular2-in-memory-web-api/typings/browser.d.ts”
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.