Angular2 자습서(Tour of Heroes)'angular2-in-memory-web-api' 모듈을 찾을 수 없습니다.

Angular2 자습서(Tour of Heroes)'angular2-in-memory-web-api' 모듈을 찾을 수 없습니다.

자습서를 따라왔습니다.변경후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
]);

현재 CLI Tools를 사용하여 만든 프로젝트의 경우, 설치를 통해 효과가 있었습니다.

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

다음과 같이 Import를 수행합니다.

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

내 소포.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"   }

저에게 유일한 해결책은 업그레이드하는 것이었습니다.angular2-in-memory-web-api.0.0.10.

package.json

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

에 systemjs.config.js

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

packages물건.

제게 도움이 된 것은 다음과 같습니다.

저는 그 소포를 알아챘습니다.json의 버전은 다음과 같습니다.

"angular2-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 이후 버전은 모두 이 이름으로 발송됩니다.패키지를 업데이트해야 합니다.json 및 수입 명세서.

각도 4 변경

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이름이 변경되었습니다. angular2에서 간단히 2로 떨어집니다.angular
• 가 더 됨) Angular CLI 는 시스템JS를 더 이상 사용하지 않으므로(Webpack으로 대체됨),systemjs.config.js더 이상 존재하지 않습니다.
• npm의package.json직접 편집해서는 안 됩니다. CLI를 사용합니다.

해결책

가장 은 2017년 10 입니다를 npm와 같이 ,

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

행운을 빌어요!

저에겐 효과가 있습니다.

패키지로.json 종속성 블록 집합("angular2" 대신 "angular" 사용)

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

그다음달리기

 npm install

오어

그냥 실행하기만 하면 됩니다(제 선호)

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

저는 현재 튜토리얼을 하고 있는데 비슷한 문제가 있었습니다.해 준 하는 것입니다.'angular2-in-memory-web-api'packages의 가변적인systemjs.config.js:

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

에 에 404 /node_modules/angular2-in-memory-web-api/자바스크립트 파일을 로드하려고 했던 것 같습니다.이제 로딩됩니다./node_modules/angular2-in-memory-web-api/index.js그리고 이 모듈의 다른 파일들.

이로써 404번 문제가 해결되었습니다.

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

항상 HttpModule 다음에 InMemoryWebApiModule을 가져와 InMemoryWebApiModule의 XHRBackend 공급자가 다른 모든 공급자보다 우선하는지 확인합니다.

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

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

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

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

제가 생각할 수 있는 가장 간단한 해결책은 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 시드를 사용하여 생성된 프로젝트에서는 문제를 해결하지 못할 수 있습니다.

저는 각도 4를 사용하고 있고 아래는 제 문제를 해결했습니다.

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

정말 악취가 진동했습니다.@traneHead, @toni 등 여러 분들 덕분에 이 단계들이 제게 도움이 되었습니다.

1. angular2-in-memory-web-api.0.0.10
2. systemjs.config.js:

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

angular-cli를 사용하여 프로젝트를 만들고 패키지로 설정합니다.json "angular-in-memory-web-api": "^0.2.4" in dependence block 후 inpm install을 실행합니다.

나를 위해 일하세요 :D

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

npm i angular-in-memory-web-api

추가적인 것 없이 그 명령만 있을 뿐입니다.

누군가의 시간을 절약하는 희망

angular cli를 사용하는 경우 이 오류가 발생합니다.

.'angular2-in-memory-web-api'const barrels다음과 같이 system-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 이로써 저는 문제가 해결되었습니다.

타이프스크립트 정의를 추가해 봅니다.

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

... 종속성 이름 지정:

angular2-in-memory-web-api

그런 다음 /systemjs.config.js에 "angular2-in-memory-web-api" 진입점을 추가합니다.

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

systemjs.config에서 변경한 것과 같은 문제가 있었습니다.

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

다음 줄 기준:

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

위에서 제안한 대로 이 줄을 바꾸는 것이 Angular 2 Heroes 튜토리얼에서 효과가 있었습니다.

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

를 .index.js그리고.index.d.ts.core.js그리고.core.d.ts에, , node_modules/angular2-in-memory-web-api폴더. 가서 알아보세요.

주된 대답은 나를 도와주었다: 변화

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

로.

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

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에서

제 일입니다.

이 날짜의 최신 수정 사항은 다음과 같습니다.

1. angular2-in-memory-web-api"의 모든 인스턴스를 "angular-in-memory-web-api"로 바꿉니다.
2. 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.1.14) 기준으로 다음과 같이 기재되어 있습니다.

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'      
}

가 했습니다를 가 생겼습니다.InMemoryWebApiModuleangular2-in-memory-web-api2했습니다.실은 제 소포에 두 가지 항목이 들어 있었습니다.json 파일; 하나는angular2-in-memory-web-apiangular-in-memory-web-api.사용.angular-in-memory-web-api문제를 해결해 줬습니다.따라서 수입은 다음과 같습니다.

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

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

하면 와 가 없습니다.system.config.js.

각진 투어 오브 히어로즈 디렉토리에서 설치하는 것만으로도 효과가 있습니다.

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

가장 좋은 방법은 NPM 등을 사용하여 설치하는 것입니다.

npm install git+https://github.com/itryan/in-memory-web-api/ --save

필요한 참조를 추가할 것입니다.

저도 비슷한 문제를 겪었습니다.튜토리얼 7부(마지막 부분)가 끝날 무렵에 전체 예시를 다운받아 실행해 보았습니다.됐습니다.

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

> npm install
> npm start

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

angular cli를 사용하여 angular2-in-memory-web-api를 포함한 angular2 앱을 구축하는 경우 다음과 같은 세 단계가 포함됩니다.

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

   /** 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)' 
   

shard가 언급한 것과 같이 angular-cli-build.js 파일에 있는 vendorNpmFiles 배열로 전송합니다.

3. 그럼요, 패키지에 추가해주세요.트레인에 의해 묘사된 json헤드; 2.0.0-rc.3의 경우 아래 버전을 사용합니다.

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

이 링크 "Project에 자료 2 추가하기"는 타사 라이브러리를 추가하는 과정을 매우 명확하게 설명해 줍니다.

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

그InMemoryDataService클래스는 어떤 API에도 포함되지 않습니다.서비스 클래스를 생성한 다음 해당 서비스 클래스를 app.module.ts 파일로 가져와야 합니다.

토니, Angular2-in-memory-web-api의 타이핑을 추가해야 합니다.

TS 파일에 추가합니다.

/// reference path=”./../node_modules/angular2-in-memory-web-api/typings/browser.d.ts”

언급URL : https://stackoverflow.com/questions/37377529/angular2-tutorial-tour-of-heroes-cannot-find-module-angular2-in-memory-web-a