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

{{title}}

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

Razón fundamental: el archivo .d.ts incluido implícitamente por TypeScript varía con el objective de comstackción, por lo que uno necesita tener más declaraciones ambientales al apuntar a es5 incluso si las cosas están realmente presentes en los tiempos de ejecución (por ejemplo, Chrome). Más sobre lib.d.ts

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

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

 /// 

(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 funcione.

Las funciones de ES6, como las promesas, no están definidas cuando se dirige a ES5. Hay otras bibliotecas, pero core-js es la biblioteca de JavaScript que usa el equipo 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 Typescript 2.0.

 npm install -g typescript 

Para las características ES6 en Angular 2, no necesita TIPIFICACIONES. Solo use typescript 2.0 o superior e instale @ types / core-js con npm:

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

A continuación, agregue los atributos TypeRoots y Types 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 las tipificaciones, como se explica en otras respuestas. Consulte la publicación de blog de Microsoft para obtener más información: Typescript: El futuro de los archivos de statement

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

Tus main.ts deberían verse así:

 ///  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 deja en /// 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 necesita typings para hacer que el comando anterior funcione, si no lo tiene, ejecute el siguiente comando para instalarlo

 npm install -g typings 

ACTUALIZAR

La actualización de typings no lee --ambient se convirtió en --global también para algunas personas que necesita instalar las definiciones de las bibliotecas anteriores, simplemente use el siguiente comando

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

Gracias a @bgerth por señalar esto.

Cuando tenga Typescript> = 2, la opción “lib” en tsconfig.json hará el trabajo. No hay necesidad de tipings. 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.0 agregar node_modules/angular2/typings/browser.d.ts no 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 archivo package.json para incluir este postinstall :

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

Ahora ejecuta la npm install

También ahora debes ignorar typings carpeta de typings en tu archivo tsconfig.json :

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

Actualizar

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

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

 ///  

Estaba obteniendo esto en Angular 2 rc1. Resulta que algunos nombres han cambiado con typings v1 frente a los antiguos 0.x. Los archivos browser.d.ts convirtieron en index.d.ts .

Después de ejecutar typings install ubique su archivo de inicio (donde se inicia) y agregue:

/// (o sin el ../ si su archivo de inicio está en la misma carpeta que la carpeta de typings)

La adición de index.d.ts a la lista de archivos en tsconfig.json no funcionó por algún motivo.

Además, el paquete es6-shim no era necesario.

Pude arreglar esto instalando el módulo de typings .

 npm install -g typings typings install 

(Usando ng 2.0.0-rc.1)

Tuve el mismo problema y lo resolví usando la opción lib en tsconfig.json . Como dijo basarat en su respuesta , un archivo .d.ts está incluido implícitamente por TypeScript dependiendo de la opción de comstackción de target , pero este comportamiento se puede cambiar con la opción lib .

Puede especificar archivos de definición adicionales para ser incluidos sin cambiar la versión de JS dirigida. Por ejemplo, esto es parte de mi compilerOptions para Typescript@2.1 y agrega soporte para es2015 características de es2015 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/node para admitir require('some-module') en mi código.

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

y agrega la ruta correcta a index.d.ts

 /// 

Probado en @ angular-2.0.0-rc3

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

Esto es que piensen 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é desde rc.0 a rc.5 este error apareció.

Mi fijo 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" ] } 

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

En lugar de incluir es6-promise y es6-collections, incluye core-js, lo cual fue lo que hizo el truco para mí … no hay conflictos con las definiciones de core core 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.

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 de require no aparecerá en la aplicación.

Angular 2 RC1 renombró el directorio node_modules/angular2 a node_modules/angular .

Si está usando un archivo gulp para copiar archivos en un directorio de salida, probablemente todavía tenga node_modules/angular sitting allí que el comstackdor puede estar recogiendo y confundiendo al demonio.

Así que elimine (cuidadosamente) lo que tiene en node_modules que es para las versiones beta, y también elimine cualquier typings antiguo y vuelva a ejecutar la typings install .

Buena llamada, @VahidN, encontré que necesitaba

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

En mi tsconfig también, para detener los errores de es6-shim

Importa la statement a continuación en tu archivo JS.

 import 'rxjs/add/operator/map'; 

Soy nuevo en Angular, pero para mí la solución se encontró simplemente importando Entrada. No puede atribuirse el mérito de este, lo encontró en otro tablero. Esta es una solución simple si estás teniendo el mismo problema, pero si tus problemas son más complejos, leería las cosas anteriores.

Mukesh :

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

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

La respuesta aceptada no proporciona una solución viable, y la mayoría de los otros sugiere la solución alternativa de “triple barra” que ya no es viable, ya que el browser.d.ts ha sido eliminado por los RC más recientes de Angular2 y por lo tanto no es disponible más.

Sugiero encarecidamente instalar el módulo de typings como lo sugieren typings soluciones aquí, sin embargo, no es necesario hacerlo de forma manual o global: existe una forma efectiva de hacerlo solo para su proyecto y dentro de la interfaz VS2015. Esto es lo que necesita hacer:

  • agregar typings en el archivo package.json del proyecto.
  • agregue un bloque de script en el archivo package.json para ejecutar / actualizar typings después de cada acción de NPM.
  • agregue un archivo typings.json en la carpeta raíz del proyecto que contiene una referencia a core-js (en general mejor que es6-shim atm).

Eso es.

También puede echarle un vistazo a este otro hilo SO o leer esta publicación para obtener más detalles.

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

Actualizar tsconfig.json , cambiar

 "target": "es5" 

a

 "target": "es6"