Angular y mecanografiado: no puedo encontrar nombres

Estoy usando Angular (versión 2) con TypeScript (versión 1.6) y cuando compilo el código obtengo estos errores:

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 es el 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);

Un problema conocido: https://github.com/angular/angular/issues/4902

Motivo principal: el .d.tsarchivo incluido implícitamente por TypeScript varía con el objetivo de compilación, por lo que es necesario tener más declaraciones ambientales cuando se dirige, es5incluso si las cosas están realmente presentes en los tiempos de ejecución (por ejemplo, Chrome). Más enlib.d.ts

Hay una solución alternativa mencionada en el registro de cambios para 2.0.0-beta.6 (2016-02-11) (enlistado en cambios de última hora):

Si usa --target = es5, necesitará agregar una línea en algún lugar de su aplicación (por ejemplo, en la parte superior del archivo .ts donde llama a bootstrap):

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

(Tenga en cuenta que si su archivo no está en el mismo directorio que node_modules, deberá agregar uno o más ../ al inicio de esa ruta).

asegúrese de tener la ruta de referencia correcta, necesitaba agregar ../ al comienzo para que esto funcione.

Las características de ES6, como las promesas, no se definen al apuntar a ES5. Hay otras bibliotecas, pero core-js es la biblioteca de JavaScript que utiliza el equipo de Angular. Contiene polyfills para ES6.

Angular 2 ha cambiado mucho desde que se hizo esta pregunta. Las declaraciones de tipo son mucho más fáciles de usar en Typecript 2.0.

npm install -g typescript

Para las funciones de ES6 en Angular 2, no necesita Typings. Simplemente use typecript 2.0 o superior e instale @ types / core-js con npm:

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

Luego, agregue los atributos TypeRoots y Tipos a su 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"
  ]
}

Esto es mucho más fácil que usar Typings, como se explica en otras respuestas. Consulte la publicación del blog de Microsoft para obtener más información: Texto mecanografiado: El futuro de los archivos de declaración

Para aquellos que siguen el tutorial de Angular2 angular.iopara ser explícitos, aquí hay una expansión de la respuesta de mvdluit de exactamente dónde colocar el código:

Su main.tsdebe tener este aspecto:

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

Tenga en cuenta que lo deja en las ///barras diagonales, no las elimine.

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

Pude arreglar esto con el siguiente comando

typings install es6-promise es6-collections --ambient

Tenga en cuenta que debe typingshacer que el comando anterior funcione, si no lo tiene, ejecute el siguiente comando para instalarlo

npm install -g typings

ACTUALIZAR

la actualización de tipings no se lee --ambient, --globaltambién se hizo para algunas personas que necesita instalar las definiciones de las bibliotecas anteriores, solo use el siguiente comando

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

Gracias a @bgerth por señalar esto.

Al tener Typecript> = 2, la opción "lib" en tsconfig.json hará el trabajo. No hay necesidad de Typings. 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.0agregar node_modules/angular2/typings/browser.d.tsno funcionará. Primero agregue el archivo typings.json a su solución, con este contenido:

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

Y luego actualice el package.jsonarchivo para incluir esto postinstall:

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

Ahora corre npm install

También ahora debe ignorar la typingscarpeta en su tsconfig.jsonarchivo también:

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

Actualizar

Ahora AngularJS 2.0 está utilizando en core-jslugar de es6-shim. Siga su archivo de inicio rápido typings.json para obtener más información.

puede agregar el código al comienzo de los archivos .ts.

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

Estaba obteniendo esto en Angular 2 rc1. Resulta que algunos nombres cambiaron con Typings v1 vs el antiguo 0.x. Los browser.d.tsarchivos se convirtieron index.d.ts.

Después de ejecutar, typings installbusque su archivo de inicio (donde inicia) y agregue:

/// <reference path="../typings/index.d.ts" />(o sin el ../si su archivo de inicio está en la misma carpeta que la carpeta de tipings)

Agregar index.d.tsa la lista de archivos tsconfig.jsonno funcionó por alguna razón.

Además, el es6-shimpaquete no era necesario.

Pude arreglar esto instalando el typingsmódulo.

npm install -g typings
typings install

(Usando ng 2.0.0-rc.1)

Tuve el mismo problema y lo resolví usando la libopción en tsconfig.json. Como dijo basarat en su respuesta , .d.tsTypeScript incluye implícitamente un archivo dependiendo de la targetopción de compilación , pero este comportamiento se puede cambiar con la libopción.

Puede especificar que se incluyan archivos de definición adicionales sin cambiar la versión JS de destino. Para ejemplos, esto es parte de mi actual compilerOptionspara [email protected] y agrega soporte para es2015características sin instalar nada más:

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

Para obtener la lista completa de opciones disponibles, consulte el documento oficial .

Tenga en cuenta también que agregué "types": ["node"]e instalé npm install @types/nodepara admitir require('some-module')mi código.

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

y agregue la ruta correcta a index.d.ts

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

Probado en @ angular-2.0.0-rc3

Si npm install -g typings typings installtodavía no ayuda, elimine las carpetas node_modules y typings antes de ejecutar este comando.

Esto es lo que piensan cómo todos están tratando de hacer algo diferente. Creo que estos sistemas aún están lejos de la versión final.

En mi caso, actualicé de rc.0 a rc.5 apareció este error.

Mi solución fue cambiar el 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"
    ]
}

agregue typing.d.ts en la carpeta principal de la aplicación y allí declare la variable que desea usar cada vez

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

después de declarar esto en typing.d.ts, el error para require no vendrá en la aplicación.

Soy nuevo en Angular pero para mí la solución se encontró simplemente importando Input. No puedo tomar crédito por este, lo encontré en otro tablero. Esta es una solución simple si tiene el mismo problema, pero si sus problemas son más complejos, leería las cosas anteriores.

Mukesh :

tienes que importar entradas como esta en la parte superior del componente hijo

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

Encontré este documento muy útil en el sitio web de Angular 2. Finalmente me permitió hacer que las cosas funcionaran correctamente, mientras que las otras respuestas aquí, para instalar tipings, me fallaron con varios errores. (Pero ayudó a guiarme en la dirección correcta).

En lugar de incluir es6-promise y es6-collections, incluye core-js, que fue el truco para mí ... no hay conflictos con las definiciones de ts ts de Angular2. Además, el documento explica cómo configurar todo esto para que ocurra automáticamente al instalar NPM, y cómo modificar su archivo typings.json.

Angular 2 RC1 renombró el node_modules/angular2directorio a node_modules/angular.

Si está utilizando un archivo Gulpfile para copiar archivos a un directorio de salida, probablemente todavía tenga node_modules/angular allí, que el compilador puede estar .

Entonces (con cuidado) elimine lo que tiene node_modulespara las versiones beta, y también elimine cualquier tipificación anterior y vuelva a ejecutar typings install.

Buena llamada, @VahidN, descubrí que necesitaba

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

En mi tsconfigtambién, para detener los errores de es6-shimsí mismo

Importe la siguiente declaración en su archivo JS.

import 'rxjs/add/operator/map';

La respuesta aceptada no proporciona una solución viable, y la mayoría de las otras sugieren la solución de "tres cortes" que ya no es viable, ya que browser.d.tsha sido eliminada por los últimos RC de Angular2 y, por lo tanto, ya no está disponible.

Sugiero encarecidamente instalar el typingsmódulo como lo sugieren algunas soluciones aquí, pero no es necesario hacerlo de forma manual o global: hay una forma efectiva de hacerlo solo para su proyecto y dentro de la interfaz VS2015. Esto es lo que debes hacer:

• agregue typingsen el archivo package.json del proyecto.
• agregue un scriptbloque en el package.jsonarchivo para ejecutar / actualizar typingsdespués de cada acción de NPM.
• agregue un typings.jsonarchivo en la carpeta raíz del proyecto que contenga una referencia a core-js(en general mejor que es6-shimatm).

Eso es.

También puede echar un vistazo a este otro hilo SO y / o leer esta publicación en mi blog para obtener detalles adicionales.

Recibí este error después de fusionar mi rama de desarrollo con mi rama actual. Pasé algún tiempo para solucionar el problema. Como puede ver en la imagen a continuación, no hay ningún problema en los códigos.

Entonces, la única solución que funcionó para mí es que reiniciar el VSCode

Ahora debe importarlos 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)
        );

Actualización tsconfig.json, cambio

"target": "es5"

a

"target": "es6"