Angular e datilografado: não é possível encontrar nomes

Estou usando Angular (versão 2) com TypeScript (versão 1.6) e quando compilo o código, recebo estes erros:

Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/change_detection/parser/locals.d.ts(4,42): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(1,25): Error TS2304: Cannot find name 'MapConstructor'.
    node_modules/angular2/src/core/facade/collection.d.ts(2,25): Error TS2304: Cannot find name 'SetConstructor'.
    node_modules/angular2/src/core/facade/collection.d.ts(4,27): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(4,39): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(7,9): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(8,30): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(11,43): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(12,27): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(14,23): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(15,25): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(94,41): Error TS2304: Cannot find name 'Set'.
    node_modules/angular2/src/core/facade/collection.d.ts(95,22): Error TS2304: Cannot find name 'Set'.
    node_modules/angular2/src/core/facade/collection.d.ts(96,25): Error TS2304: Cannot find name 'Set'.
    node_modules/angular2/src/core/facade/lang.d.ts(1,22): Error TS2304: Cannot find name 'BrowserNodeGlobal'.
    node_modules/angular2/src/core/facade/lang.d.ts(33,59): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/promise.d.ts(1,10): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(3,14): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(8,32): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(9,38): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(10,35): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(10,93): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(11,34): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(12,32): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(12,149): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(13,43): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/linker/element_injector.d.ts(72,32): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/element_injector.d.ts(74,17): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/element_injector.d.ts(78,184): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/element_injector.d.ts(83,182): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/element_injector.d.ts(107,37): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/proto_view_factory.d.ts(27,146): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(52,144): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(76,79): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(77,73): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(94,31): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(97,18): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(100,24): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(103,142): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(104,160): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/render/api.d.ts(281,74): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/zone/ng_zone.d.ts(1,37): Error TS2304: Cannot find name 'Zone'.

Este é o código:

import 'reflect-metadata';
import {bootstrap, Component, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/core';
@Component({
  selector: 'my-app',
  template: '<input type="text" [(ng-model)]="title" /><h1>{{title}}</h1>',
  directives: [ CORE_DIRECTIVES ]
})
class AppComponent {
  title :string;

  constructor() {
    this.title = 'hello angular 2';
  }
}
bootstrap(AppComponent);

Um problema conhecido: https://github.com/angular/angular/issues/4902

Razão principal: o .d.tsarquivo incluído implicitamente pelo TypeScript varia de acordo com o destino de compilação; portanto, é necessário ter mais declarações de ambiente ao direcionar, es5mesmo que haja coisas realmente presentes nos tempos de execução (por exemplo, chrome). Mais sobrelib.d.ts

Existe uma solução alternativa mencionada no changelog para 2.0.0-beta.6 (11-02-2016) (listado em alterações recentes):

Se você usar --target = es5, precisará adicionar uma linha em algum lugar do seu aplicativo (por exemplo, na parte superior do arquivo .ts onde você chama o bootstrap):

///<reference path="node_modules/angular2/typings/browser.d.ts"/>

(Observe que, se seu arquivo não estiver no mesmo diretório que node_modules, você precisará adicionar um ou mais ../ ao início desse caminho.)

verifique se você tem o caminho de referência correto, eu precisava adicionar ../ ao início para que isso funcione.

Recursos do ES6, como promessas, não são definidos ao segmentar o ES5. Existem outras bibliotecas, mas core-js é a biblioteca javascript usada pela equipe Angular. Ele contém polyfills para ES6.

O Angular 2 mudou muito desde que essa pergunta foi feita. As declarações de tipo são muito mais fáceis de usar no Typescript 2.0.

npm install -g typescript

Para os recursos do ES6 no Angular 2, você não precisa de Typings. Basta usar o typescript 2.0 ou superior e instalar @ types / core-js com o npm:

npm install --save-dev @types/core-js

Em seguida, adicione os atributos TypeRoots e Types ao seu tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "typeRoots": [
      "../node_modules/@types"
    ],
    "types" : [
      "core-js"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

Isso é muito mais fácil do que usar Typings, conforme explicado em outras respostas. Consulte a publicação no blog da Microsoft para obter mais informações: Texto datilografado: O futuro dos arquivos de declaração

Para aqueles que seguem o tutorial do Angular2 angular.ioapenas para ser explícito, aqui está uma expansão da resposta do mvdluit sobre exatamente onde colocar o código:

Você main.tsdeve ficar assim:

/// <reference path="../node_modules/angular2/typings/browser.d.ts" />

import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
// Add all operators to Observable
import 'rxjs/Rx'

bootstrap(AppComponent);

Observe que você deixa nas ///barras, não as remova.

ref: https://github.com/ericmdantas/angular2-typescript-todo/blob/master/index.ts#L1

Consegui consertar isso com o seguinte comando

typings install es6-promise es6-collections --ambient

Observe que você precisa typingsfazer o comando acima funcionar, se você não o tiver, execute o seguinte comando para instalá-lo

npm install -g typings

ATUALIZAR

se a atualização de digitação não ler --ambient, tornou-se --globaltambém para algumas pessoas que você precisa instalar as definições das bibliotecas acima, basta usar o seguinte comando

typings install dt~es6-promise dt~es6-collections --global --save

Obrigado a @bgerth por apontar isso.

Ao ter o Typecript> = 2, a opção "lib" no tsconfig.json fará o trabalho. Não há necessidade de digitações. https://www.typescriptlang.org/docs/handbook/compiler-options.html

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["es2016", "dom"] //or es6 instead of es2016(es7)
    }
}

Para Angular 2.0.0-rc.0adicionar node_modules/angular2/typings/browser.d.tsnão vai funcionar. Primeiro adicione o arquivo typings.json à sua solução, com este conteúdo:

{
    "ambientDependencies": {
        "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
    }
}

E atualize o package.jsonarquivo para incluir isso postinstall:

"scripts": {
    "postinstall": "typings install"
},

Agora corra npm install

Agora também você deve ignorar a typingspasta no seu tsconfig.jsonarquivo:

 "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]

Atualizar

Agora o AngularJS 2.0 está usando em core-jsvez de es6-shim. Siga o arquivo typings.json de início rápido para obter mais informações.

você pode adicionar o código no início dos arquivos .ts.

/// <reference path="../typings/index.d.ts" />

Eu estava conseguindo isso no Angular 2 rc1. Acontece que alguns nomes foram alterados com as letras v1 versus o antigo 0.x. Os browser.d.tsarquivos se tornaram index.d.ts.

Depois de executar, typings installlocalize seu arquivo de inicialização (onde você inicializa) e adicione:

/// <reference path="../typings/index.d.ts" />(ou sem o ../arquivo se estiver na mesma pasta que a pasta de digitações)

A adição index.d.tsà lista de arquivos no tsconfig.jsonnão funcionou por algum motivo.

Além disso, o es6-shimpacote não era necessário.

Consegui consertar isso instalando o typingsmódulo.

npm install -g typings
typings install

(Usando o ng 2.0.0-rc.1)

Eu tive o mesmo problema e eu resolvi-lo usando a libopção tsconfig.json. Como dito por basarat em sua resposta , um .d.tsarquivo é implicitamente incluído pelo TypeScript, dependendo da targetopção de compilação, mas esse comportamento pode ser alterado com a libopção.

Você pode especificar arquivos de definição adicionais a serem incluídos sem alterar a versão JS de destino. Por exemplo, isso faz parte do meu atual compilerOptionspara [email protected] e adiciona suporte para es2015recursos sem instalar mais nada:

"compilerOptions": {
    "experimentalDecorators": true,
    "lib": ["es5", "dom", "es6", "dom.iterable", "scripthost"],
    "module": "commonjs",
    "moduleResolution": "node",
    "noLib": false,
    "target": "es5",
    "types": ["node"]
}

Para a lista completa de opções disponíveis, consulte o documento oficial .

Observe também que adicionei "types": ["node"]e instalei npm install @types/nodepara oferecer suporte require('some-module')ao meu código.

 typings install dt~es6-shim --save --global

e adicione o caminho correto para index.d.ts

///<reference path="../typings/index.d.ts"/>

Tentei em @ angular-2.0.0-rc3

Se npm install -g typings typings installainda não ajudar, apagar node_modules e tipagens pastas antes de executar este comando.

É assim que pensamos como todos estão tentando fazer algo diferente. Eu acredito que esses sistemas ainda estão longe da versão final.

No meu caso, atualizei de rc.0 para rc.5 esse erro apareceu.

Meu conserto foi alterar o tsconfig.json.

{
    "compilerOptions": {
        "target": "es6", <-- It was es5
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "outDir": "../wwwroot/app"
    },
    "compileOnSave": true,
    "exclude": [
        "../node_modules",
        "../typings/main"
    ]
}

adicione o type.d.ts na pasta principal do aplicativo e declare a variável que você deseja usar sempre

declare var System: any;
declare var require: any;

depois de declarar isso em digitação.d.ts, o erro for require não aparecerá no aplicativo.

Eu sou novo no Angular, mas para mim a solução foi encontrada simplesmente importando o Input. Não posso receber crédito por este, encontrei-o em outro fórum. Esta é uma correção simples, se você estiver tendo o mesmo problema, mas se seus problemas forem mais complexos, eu leria o material acima.

Mukesh :

você precisa importar entradas como essa no topo do componente filho

import { Directive, Component, OnInit, Input } from '@angular/core';

Encontrei este documento muito útil no site do Angular 2. Finalmente, deixei que as coisas funcionassem corretamente, enquanto as outras respostas aqui, para instalar as tipagens, falharam comigo com vários erros. (Mas ajudou a me levar na direção certa.)

Em vez de incluir es6-promessa e es6-coleções, ele inclui core-js, o que fez o truque para mim ... não há conflito com as definições de core ts do Angular2. Além disso, o documento explicou como configurar tudo isso automaticamente ao instalar o NPM e como modificar seu arquivo typings.json.

Angular 2 RC1 renomeou o node_modules/angular2diretório para node_modules/angular.

Se você estiver usando um gulpfile para copiar arquivos para um diretório de saída, provavelmente ainda estará node_modules/angularsentado lá, o que pode ser detectado pelo compilador e confundir o inferno.

Portanto, (com cuidado), limpe o que você tem node_modulesdas versões beta e exclua todas as datilografias antigas e execute novamente typings install.

Boa ligação, @VahidN, achei necessário

    "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]

No meu tsconfigtambém, para parar erros de es6-shimsi mesmo

Importe a instrução abaixo no seu arquivo JS.

import 'rxjs/add/operator/map';

A resposta aceita não fornece uma solução viável, e a maioria das outras sugere a solução alternativa "barras triplas" que não é mais viável, pois a browser.d.tsfoi removida pelos últimos RCs do Angular2 e, portanto, não está mais disponível.

Eu sugiro fortemente instalar o typingsmódulo como sugerido por algumas soluções aqui, mas não é necessário fazê-lo manualmente ou globalmente - existe uma maneira eficaz de fazer isso apenas no seu projeto e na interface do VS2015. Aqui está o que você precisa fazer:

• adicione typingsno arquivo package.json do projeto.
• adicione um scriptbloco no package.jsonarquivo para executar / atualizar typingsapós cada ação do NPM.
• adicione um typings.jsonarquivo na pasta raiz do projeto contendo uma referência a core-js(em geral, melhor que es6-shimatm).

É isso aí.

Você também pode dar uma olhada neste outro tópico do SO e / ou ler esta postagem no meu blog para obter detalhes adicionais.

Eu estava recebendo esse erro depois de mesclar meu ramo de desenvolvimento ao meu ramo atual. Passei algum tempo para corrigir o problema. Como você pode ver na imagem abaixo, não há nenhum problema nos códigos.

Portanto, a única correção que funcionou para mim é que Reiniciando o VSCode

Agora você deve importá-los manualmente.

import 'rxjs/add/operator/retry';
import 'rxjs/add/operator/timeout';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/map';




this.http.post(url, JSON.stringify(json), {headers: headers, timeout: 1000})

         .retry(2)

         .timeout(10000, new Error('Time out.'))

         .delay(10)

         .map((res) => res.json())
        .subscribe(
          (data) => resolve(data.json()),
          (err) => reject(err)
        );

Atualizar tsconfig.json, alterar

"target": "es5"

para

"target": "es6"