Angular и Typescript: не могу найти имена

Я использую Angular (версия 2) с TypeScript (версия 1.6), и когда я компилирую код, я получаю следующие ошибки:

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

Это код:

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

Известная проблема: https://github.com/angular/angular/issues/4902

Основная причина: .d.tsфайл, неявно включаемый в TypeScript, варьируется в зависимости от цели компиляции, поэтому при таргетинге необходимо иметь больше объединенных объявлений, es5даже если что-то действительно присутствует во время выполнения (например, chrome). Ещеlib.d.ts

В журнале изменений для 2.0.0-бета.6 (2016-02-11) упоминается обходной путь (указанный в разделе критических изменений):

Если вы используете --target = es5, вам нужно будет добавить строку где-нибудь в вашем приложении (например, вверху файла .ts, где вы вызываете bootstrap):

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

(Обратите внимание, что если ваш файл не находится в той же директории, что и node_modules, вам нужно добавить один или несколько ../ в начало этого пути.)

убедитесь, что у вас есть правильный путь ссылки, мне нужно было добавить ../ к началу, чтобы это заработало .

Функции ES6, такие как обещания, не определяются при нацеливании на ES5. Есть и другие библиотеки, но core-js - это библиотека javascript, которую использует команда Angular. Содержит полифилы для ES6.

Angular 2 сильно изменился с тех пор, как был задан этот вопрос. Объявления типов гораздо проще использовать в Typescript 2.0.

npm install -g typescript

Для функций ES6 в Angular 2 вам не нужно печатать. Просто используйте typcript 2.0 или выше и установите @ types / core-js с npm:

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

Затем добавьте атрибуты TypeRoots и Types в ваш файл 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"
  ]
}

Это гораздо проще, чем использовать Typings, как объяснено в других ответах. См. Сообщение в блоге Microsoft для получения дополнительной информации: Машинопись: будущее файлов декларации

Для тех, кто следует учебнику по Angular2 angular.ioпросто для того, чтобы быть явным, вот расширение ответа mvdluit о том, где именно разместить код:

Вы main.tsдолжны выглядеть так:

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

Обратите внимание, что вы оставляете в ///слешах, не удаляйте их.

ссылка: https://github.com/ericmdantas/angular2-typescript-todo/blob/master/index.ts#L1

Я смог исправить это с помощью следующей команды

typings install es6-promise es6-collections --ambient

Обратите внимание, что вам нужно typingsзаставить работать вышеуказанную команду, если у вас ее нет, выполните следующую команду, чтобы установить ее

npm install -g typings

ОБНОВИТЬ

обновление типов не читает, --ambientэто стало --globalтакже для некоторых людей, вам нужно установить определения вышеупомянутых библиотек, просто используйте следующую команду

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

Спасибо @bgerth за указание на это.

При наличии Typescript> = 2 опция «lib» в tsconfig.json сделает эту работу. Нет необходимости печатать. https://www.typescriptlang.org/docs/handbook/compiler-options.html

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

Для Angular 2.0.0-rc.0добавления node_modules/angular2/typings/browser.d.tsне будет работать. Сначала добавьте файл typings.json в ваше решение со следующим содержимым:

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

И затем обновите package.jsonфайл, чтобы включить это postinstall:

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

Теперь беги npm install

Также теперь вы должны игнорировать typingsпапку в вашем tsconfig.jsonфайле:

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

Обновить

Теперь используется AngularJS 2.0 core-jsвместо es6-shim. Следуйте его быстрому старту typings.json файл для получения дополнительной информации.

Вы можете добавить код в начале файла .ts.

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

Я получал это на Angular 2 RC1. Оказывается, некоторые имена изменились с наборами v1 против старого 0.x. Эти browser.d.tsфайлы стали index.d.ts.

После запуска typings install найдите ваш файл запуска (где вы загружаете) и добавьте:

/// <reference path="../typings/index.d.ts" /> (или без ../ если ваш файл запуска находится в той же папке, что и папка с наборами)

Добавление index.d.tsв список файлов вtsconfig.json по какой-то причине не сработало.

Также es6-shimпосылка была не нужна.

Я смог это исправить, установив typingsмодуль.

npm install -g typings
typings install

(С использованием ng 2.0.0-rc.1)

У меня была та же проблема, и я решил ее с помощью libопции в tsconfig.json. Как сказал Басарат в своем ответе , .d.tsфайл неявно включается в TypeScript в зависимости от параметра компиляции, targetно это поведение можно изменить с помощью libпараметра.

Вы можете указать дополнительные файлы определений для включения без изменения целевой версии JS. Для примеров это часть моего текущего compilerOptionsдля Typescript@2.1, и он добавляет поддержку es2015функций, не устанавливая ничего другого:

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

Полный список доступных опций смотрите в официальном документе. .

Обратите внимание, что я добавил "types": ["node"]и установил npm install @types/nodeподдержку require('some-module')в своем коде.

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

и добавьте правильный путь к index.d.ts

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

Пробовал на @ angular-2.0.0-rc3

Если это по- npm install -g typings typings installпрежнему не помогает, удалите node_modules и папки для ввода текста перед выполнением этой команды.

Это то, что вы думаете, как каждый пытается сделать что-то другое. Я считаю, что эти системы еще далеки от окончательной версии.

В моем случае я обновил с rc.0 до rc.5 появилась эта ошибка.

Мое исправление было изменить 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"
    ]
}

добавьте typing.d.ts в основную папку приложения и там объявите переменную, которую вы хотите использовать каждый раз

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

после объявления этого в typing.d.ts ошибкатребовать в приложении не будет ..

Я новичок в Angular, но для меня решение было найдено, просто импортировав Input. Не могу взять кредит на это, нашел его на другой доске. Это простое решение, если у вас возникла та же проблема, но если ваши проблемы более сложные, я прочел материал выше.

Мукеш :

Вы должны импортировать ввод, как это в верхней части дочернего компонента

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

Я нашел этот очень полезный документ на сайте Angular 2. Это, наконец, позволило мне заставить все работать должным образом, в то время как другие ответы здесь, чтобы установить наборы, подвели меня с различными ошибками. (Но помог привести меня в правильном направлении.)

Вместо того, чтобы включать es6-обещание и es6-коллекции, он включает core-js, что помогло мне ... не противоречит основным определениям Angular2. Кроме того, в документе объясняется, как настроить все это так, чтобы оно происходило автоматически при установке NPM, и как изменить файл typings.json.

Angular 2 RC1 переименовал node_modules/angular2каталог в node_modules/angular.

Если вы используете gulpfile для копирования файлов в выходной каталог, у вас, вероятно, все еще есть node_modules/angular сидите, что может быть захвачено компилятором и запутать себя до чертиков.

Поэтому (осторожно) удалите все, что у вас есть node_modulesдля бета-версий, а также удалите все старые наборы и повторите попытку typings install.

Хороший звонок, @VahidN, я нашел, что мне нужно

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

По моему tsconfigтоже, чтобы остановить ошибки от es6-shimсебя

Импортируйте приведенный ниже оператор в ваш файл JS.

import 'rxjs/add/operator/map';

Принятый ответ не обеспечивает жизнеспособного исправления, а большинство других предлагает обходной путь «тройной косой черты», который больше не является жизнеспособным, так как browser.d.tsон был удален последними RC Angular2 и, таким образом, больше не доступен.

Я настоятельно рекомендую установить typingsмодуль, как предложено здесь несколькими решениями, но нет необходимости делать это вручную или глобально - есть эффективный способ сделать это только для вашего проекта и в интерфейсе VS2015. Вот что вам нужно сделать:

• Добавить typings в файл package.json проекта.
• добавить scriptблок в package.jsonфайл для выполнения / обновленияtypings после каждого действия NPM.
• добавьте typings.jsonв корневую папку проекта файл, содержащий ссылку core-js(в целом лучше, чем es6-shimatm).

Вот и все.

Вы также можете посмотреть эту другую SO-ветку и / или прочитать эту запись в моем блоге для получения дополнительной информации.

Я получал эту ошибку после слияния моей ветки разработчика с моей текущей веткой. Я потратил некоторое время, чтобы решить проблему. Как вы можете видеть на изображении ниже, в кодах вообще нет проблем.

Таким образом, единственное исправление сработало для меня, что перезапуск VSCode

Теперь вы должны импортировать их вручную.

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

Обновить tsconfig.json, изменить

"target": "es5"

в

"target": "es6"