Tutorial do Angular2 (Tour of Heroes): Não é possível encontrar o módulo 'angular2-in-memory-web-api'


99

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
]);

Respostas:


66

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.


4
Isso corrigiu o erro do módulo. Depois disso, obtive erros 404 - precisei especificar 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }no arquivo systemjs.config.js (veja a resposta de @GrantTaylor).
toni

4
De particular interesse, se você estiver usando angular-cli para desenvolver seu aplicativo, você deve adicionar 'angular2-in-memory-web-api/**/*.+(js|js.map)'ao vendorNpmFilesarray no arquivo angular-cli-build.js. Aftewards, você deve apontar seu mapa system-config assim: 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'. E, em seguida, execute novamente ng serve(ou npm start) para que os arquivos angular2-in-memory-web-api terminem na pasta dist / vendor.
ofShard 02 de

4
Se você estiver usando o angular 2 Eclipse plugin, a seguinte linha vai em package.json, na dependenciesseção: "angular-in-memory-web-api": "0.1.1". Eu tive que correr npm installda pasta do projeto depois, no entanto.
João Mendes

1
Ainda estou enfrentando este problema :( mesmo depois de seguir as etapas exigidas
Hassan Tariq

5
Eu nem mesmo tenho um arquivo systemjs.config.js em nenhum lugar do meu projeto. Estou usando o Angular4, no entanto.
bleistift2

101

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

1
Obrigado, também tive que importar InMemoryDbService como: import {InMemoryDbService} de 'angular-in-memory-web-api / in-memory-backend.service';
Baris Atamer de

4
Após executar o npm installcomando, obtive a versão 0.3.2. Com essa versão, eu poderia apenas import { InMemoryWebApiModule } from 'angular-in-memory-web-api';como descrito no tour.
vir

Como @comecme apontou, depois de executado npm install, import { InMemoryWebApiModule } from 'angular-in-memory-web-api'funciona.
ajay_whiz

21

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.


18

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!


Além disso, pode ser necessário atualizar o arquivo package.json com zone.js para 0.8.4, executar a atualização npm e tentar a instalação acima.
Jason

1
Estou enfrentando um novo problema aqui Não é possível localizar o módulo './in-memory-data.service'.
Kannan T

@kannan - 1. Você instalou angular-in-memory-web-apicom npm? 2. Existe uma entrada para angular-in-memory-web-apino seu package.json? 3. tente matar e reiniciar o Angular CLI: Ctrl+Cpara matar; ng servereiniciar). Às vezes, a CLI age de forma estranha (idem para o plugin Angular para VSCode)
Master of Ducks

@MasterofDucks Bro resolveu isso ontem o problema era que eu não criei o arquivo é por isso. obrigado pela sua ajuda :)
Kannan T

15

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

14

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.


2
Atualmente, parece haver vários erros com a parte HTTP do tutorial Tour of Heroes.
Grant Taylor

Isso não ajuda com o meu erro (com o erro em questão).
toni

Primeiro tive que atualizar o ´angular2-in-memory-web-api´ (veja a resposta de @traneHead) e, em seguida, aplicar esta resposta.
toni

Obrigado, resolveu meu problema. Não precisei aumentar para 0.0.10 conforme os outros explicam.
Radek Skokan

10

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),
              ...

1
Também é crucial que isso aconteça após a importação de rotas como AppRoutingModule na demonstração do Angular2. Eu tinha AppRoutingModule após InMemoryWebApiModule.forRoot (InMemoryDataService) e quebra tudo.
Marcos

6

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

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

funcionou para mim usando o novo guia de início rápido com Angular-cli
OST

@OST Cara até estou usando o angular-cli, mas estou enfrentando esse erro Não é possível encontrar o módulo './in-memory-data.service'.
Kannan T,

5

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 .


Meu problema era que ng serveele ainda estava em execução durante a instalação. Tive que desligá-lo e reiniciá-lo.
Jorn.Beyers

4

Estou usando o angular 4 e abaixo resolveu meu problema.

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


oi mesmo estou usando angular 4 eu fiz como você disse, mas estou enfrentando um novo problema aqui Não é possível encontrar o módulo './in-memory-data.service'.
Kannan T

3

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


Este vídeo também pode ser útil: Tutorial do Angular2 - HTTP
AnderSon

3

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


Alguma recomendação sobre o que causa esse problema? Ou qual configuração eles podem verificar ou alterar para eliminar o problema? Talvez o conteúdo do seu "package.json" possa ajudar.
Joshua Briefman

3

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


2

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.


0

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

Instalei as tipificações como você escreveu. Isso mudou o conteúdo da pasta de digitação (adicionado "\ settings \ in-memory-backend.service \ index.d.ts" ao navegador e subpastas principais e adicionada referência nos arquivos browser.d.ts e main.d.ts ) O que você quer dizer com "especificando o nome da dependência" ?. Eu adicionei o ponto de entrada conforme você especificou. Mas meu erro ainda persiste.
toni

Quando você executa "sudo typings install ...", as digitações devem perguntar a você "Qual é o nome da dependência?" e então você pode inserir "angular2-in-memory-web-api".
user1014932

Minha resposta se aplica ao angular2-in-memory-web-api v0.0.7 btw.
user1014932

0

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

0

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

0

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.


0

A principal resposta me ajudou: mudar

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

para

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

0

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.


0

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

0

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

0

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.


0

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



0

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.


0

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;

  1. 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.


0
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.


-1

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”
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.