Eu segui o tutorial . Depois de mudar app/maint.tsno capítulo Http, recebo o erro ao iniciar o aplicativo via linha de comando:

app / main.ts (5,51): erro TS2307: Não é possível encontrar o módulo 'angular2-in-memory-web-api'.

(Código do Visual Studio me dá o mesmo erro em main.ts - sublinhado ondulado em vermelho.)

Aqui está o meu 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);

Aqui está o meu 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
]);

Para mim, a única solução era fazer o upgrade angular2-in-memory-web-apipara 0.0.10.

Em package.jsonconjunto

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

no bloco de dependências e no systemjs.config.jsconjunto

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

no packagesobjeto.

Quanto aos projetos criados usando as ferramentas CLI atuais, funcionou para mim instalando

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

e, em seguida, realizar a importação como

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

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

Aqui está o que funcionou para mim:

Percebi que o package.json tinha a seguinte versão:

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

Observe o " 2 " no nome.

No entanto, ao fazer referência a InMemoryWebApiModule, ele estava usando 'angular-in-memory-web-api' sem o 2 no nome. Então eu adicionei e resolveu o problema:

importar {InMemoryWebApiModule} de 'angular2-in-memory-web-api';

Observação : encontrei isso na seção de avisos de https://github.com/angular/in-memory-web-api

A partir da v.0.1.0, o pacote npm foi renomeado de angular2-in-memory-web-api para seu nome atual, angular-in-memory-web-api. Todas as versões posteriores a 0.0.21 são enviadas com este nome. Certifique-se de atualizar seu package.json e as instruções de importação.

Angular 4 Mudanças

Desde 17 de outubro de 2017, o tutorial deixa de mencionar que angular-in-memory-web-apinão está incluído em uma compilação CLI padrão e deve ser instalado separadamente. Isso pode ser feito facilmente com npm:

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

Isso lida automaticamente com as alterações necessárias para package.json, para que você não precise fazer edições sozinho.

Pontos de confusão

Este tópico é bastante confuso, pois a CLI Angular mudou significativamente desde que foi iniciado; um problema com muitas APIs em rápida evolução.

• angular-in-memory-web-apifoi renomeado; diminui o 2 de angular 2 para simplesmenteangular
• O Angular CLI não usa mais SystemJS (substituído por Webpack), então systemjs.config.jsnão existe mais.
• npm's package.jsonnão devem ser editada directamente; use a CLI.

Solução

A partir de outubro de 2017, a melhor correção é simplesmente instalar você mesmo usando npm, como mencionei acima:

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

Boa sorte lá fora!

Funciona para mim:

No conjunto de blocos de dependências do package.json (use "angular" em vez de "angular2")

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

Então corra

 npm install

OU

simplesmente execute (meu preferível)

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

Atualmente estou fazendo o tutorial e tive um problema semelhante. O que parece ter corrigido para mim foi definir um arquivo principal para 'angular2-in-memory-web-api'na packagesvariável em systemjs.config.js:

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

Antes de adicionar isso, havia um erro 404 registrado para /node_modules/angular2-in-memory-web-api/onde parecia estar tentando carregar um arquivo JavaScript. Agora ele carrega /node_modules/angular2-in-memory-web-api/index.jse os outros arquivos neste módulo.

Isso resolveu o problema 404

Da documentação Angular in-memory-web-api

Sempre importe o InMemoryWebApiModule após o HttpModule para garantir que o provedor XHRBackend do InMemoryWebApiModule substitua todos os outros.

Importações de módulo devem ter InMemoryWebApiModule listado após HttpModule

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

Em sua pasta raiz (a pasta contém package.json), usando:

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

A solução mais simples que eu poderia pensar era instalar o pacote com npm e reiniciar o servidor:

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

Quase instalei o pacote angular2-in-memory-web-api , mas a página npm diz:

Todas as versões posteriores a 0.0.21 são (ou serão em breve) distribuídas sob o angular-in-memory-web-api .

Nota : Esta solução funcionou para um projeto que foi criado com as ferramentas CLI, que não lista o pacote como uma dependência e pode não resolver o problema para projetos que foram criados com a semente Quickstart, que lista o pacote como uma dependência .

Estou usando o angular 4 e abaixo resolveu meu problema.

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

Este era um verdadeiro fedorento. Graças a @traneHead, @toni e outros, essas etapas funcionaram para mim.

1. Melhoria angular2-in-memory-web-api para0.0.10
2. Edite a propriedade da variável de pacotes em systemjs.config.js:

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

Eu crio meu projeto usando angular-cli e configuro no package.json "angular-in-memory-web-api": "^ 0.2.4" no bloco de dependências e, em seguida, executo o npm install.

Trabalho para mim: D

Para usuários que geraram um projeto vazio com angular cli 1.4.9 (atual em outubro de 2017) e depois começaram a seguir as instruções passo a passo, basta executar o seguinte comando:

npm i angular-in-memory-web-api

Apenas esse comando, sem nada adicional.

Espero que economize o tempo de alguém

Se você estiver usando o CLI angular, receberá este erro.

Adicione 'angular2-in-memory-web-api'no const barrelsarquivo system-config.ts como abaixo:

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

E adicione 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'como abaixo.

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,

});

Reconstrua usando npm start. Isso resolveu o problema para mim.

Tente adicionar as definições de texto digitalizado:

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

... especificando o nome da dependência:

angular2-in-memory-web-api

Em seguida, adicione o ponto de entrada para "angular2-in-memory-web-api" em /systemjs.config.js

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

Tive o mesmo problema, mudei no systemjs.config:

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

Por esta linha:

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

Alterar esta linha, conforme sugerido acima, funcionou para mim no Tutorial do Angular 2 Heroes:

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

Eu resolvi copiar index.jse index.d.tspara core.jse core.d.ts, isto é, dentro node_modules/angular2-in-memory-web-apida pasta. Vá descobrir.

A principal resposta me ajudou: mudar

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

para

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

em app \ main.ts, basta modificar:

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

para:

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

em seguida, adicione o parâmetro index.js em

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

em systemjs.config.js

é trabalho para mim.

A última correção nesta data é

1. substitua todas as instâncias de "api-web-angular2-na-memória" por "api-web-angular-na-memória".
2. Altere a versão de dependência de package.json de "angular-in-memory-web-api": "0.0.20"para "angular-in-memory-web-api": "0.1.0" e "zone.js": "^0.6.23"para"zone.js": "^0.6.25"
3. Em systemjs.config.js, altere o caminho para index.js. Deve ser semelhante a:
   'angular-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }

A partir da última (atualmente 0.1.14), isso é o que está declarado no CHANGELOG

Em, systemjs.config.jsvocê deve alterar o mapeamento para:

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

em seguida, exclua de packages:

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

Recebi este erro porque estava importando InMemoryWebApiModulede angular2-in-memory-web-apiremovi o 2. Na verdade, eu tinha duas entradas no meu arquivo package.json; um era angular2-in-memory-web-apie o segundo era angular-in-memory-web-api. Usar angular-in-memory-web-apiresolveu o problema para mim. Portanto, sua importação deve ser assim:

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

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

Usando o cli-angular, você não precisa alterar nada a respeito system.config.js.

Para mim, apenas instalar a partir do diretório angular-tour-of-heroes funciona para mim

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

A melhor maneira é instalá-lo usando NPM, por exemplo

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

vai adicionar a referência necessária

Eu encontrei um problema semelhante. Acabei de baixar o exemplo inteiro perto do final da parte 7 (última parte) do tutorial e executá-lo. Funcionou.

Claro, você precisa instalar e compilar tudo primeiro.

> npm install
> npm start

Eu também mudei 'app-root' para 'my-app' em app.component.ts.

Se estiver usando o angular cli para construir seu aplicativo angular2, incluindo o angular2-in-memory-web-api envolve três etapas:

1. adicione a api ao arquivo system-config.ts (dentro do subdiretório src) como abaixo:

   /** 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. Adicionar

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

ao array vendorNpmFiles no arquivo angular-cli-build.js como ofShard mencionado;

3. Claro, adicione ao package.json conforme descrito por traneHead; para 2.0.0-rc.3, uso a versão abaixo:

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

Acho que este link "Adicionando material2 ao seu projeto" explica o processo de adicionar bibliotecas de terceiros de forma bastante clara.

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

A InMemoryDataServiceclasse não vem em nenhuma API. Precisamos criar uma classe de serviço e, em seguida, importar essa classe de serviço para o arquivo app.module.ts.

Toni, você precisa adicionar as tipificações para Angular2-in-memory-web-api.

Adicione-os ao seu arquivo TS.

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