change - dynamic title angular 5

Angular y mecanografiado: no puedo encontrar nombres

Question

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

Answer 1

Actualice tsconfig.json , cambie

"target": "es5"

a

"target": "es6"

Answer 2

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

Answer 3

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

Answer 4

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

Si está usando un archivo Gulpfile para copiar archivos a un directorio de salida, probablemente todavía tenga node_modules/angular sentado allí, que puede ser recogido por el compilador y confundiendo muchísimo.

Entonces (cuidadosamente) elimine lo que tiene en node_modules que es para las versiones beta, y también elimine cualquier tipificación anterior y vuelva a ejecutar la typings install .

Answer 5

Buena llamada, @VahidN, descubrí que necesitaba

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

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

Answer 6

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.

Answer 7

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

Después de ejecutar typings install ubique 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.ts a la lista de archivos en tsconfig.json no funcionó por alguna razón.

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

Answer 8

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

Answer 9

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, deberá 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.

Answer 10

Importe la siguiente declaración en su archivo JS.

import ''rxjs/add/operator/map'';

Answer 11

La respuesta aceptada no proporciona una solución viable, y la mayoría de los otros sugieren la solución alternativa de "tres barras" que ya no es viable, ya que el browser.d.ts ha sido eliminado por los últimos RC de Angular2 y, por lo tanto, no lo es. disponible más.

Sugiero encarecidamente instalar el módulo de typings según lo sugerido por un par de soluciones aquí, sin embargo, no es necesario hacerlo de forma manual o global: hay una manera efectiva de hacerlo solo para su proyecto y dentro de la interfaz VS2015. Esto es lo que debes hacer:

• agregue 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 contenga una referencia a core-js (en general mejor que es6-shim atm).

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.

Answer 12

Las funciones 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

Answer 13

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 npm install

También ahora debe ignorar la carpeta de typings en su 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 de inicio rápido typings.json para obtener más información.

Answer 14

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 exactamente dónde colocar el código:

Su main.ts debería verse así:

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

Answer 15

Pude arreglar esto con el siguiente comando

typings install es6-promise es6-collections --ambient

Tenga en cuenta que necesita typings para 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 lee --ambient se convirtió en --global también para algunas personas 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.

Answer 16

Pude solucionar esto instalando el módulo de typings .

npm install -g typings
typings install

(Usando ng 2.0.0-rc.1)

Answer 17

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

Answer 18

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

Answer 19

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

Answer 20

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

Puede especificar que se incluyan archivos de definición adicionales sin cambiar la versión JS de destino. Por ejemplo, esto es parte de mi compilerOptions es2015 for es2015 y agrega soporte para es2015 funciones 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 https://www.typescriptlang.org/docs/handbook/compiler-options.html .

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

Answer 21

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

Motivo principal: el archivo .d.ts incluido implícitamente por TypeScript varía con el objetivo de compilación, por lo que se necesita tener más declaraciones ambientales cuando se dirige 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

Answer 22

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.

Answer 23

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

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

Answer 24

 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