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

23 ответов


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

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


существует работа, упомянутая в журнале изменений для 2.0.0-бета.6 (2016-02-11) (перечислены в разделе breaking changes):

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

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

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

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


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

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

npm install -g typescript

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

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

затем добавьте TypeRoots и типы атрибуты для вашего 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"
  ]
}

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


для тех, кто следует учебник 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);

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

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


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

typings install es6-promise es6-collections --ambient

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

npm install -g typings

обновление

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

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

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


при наличии Typescript >= 2 опция " lib " в tsconfig.json сделает работу. Нет необходимости для Typings. 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

и теперь вы должны игнорировать в своем а также:

 "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. Оказывается, некоторые имена изменились с помощью typings v1 против старого 0.х. Элемент browser.d.ts файлы стало index.d.ts.

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

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

добавлять index.d.ts в список файлов в tsconfig.json почему-то не сработало.

и es6-shim пакет был не требовать.


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

npm install -g typings
typings install

(используя ng 2.0.0-rc.1)


у меня была такая же проблема и я решил ее с помощью на tsconfig.json. Как сказал basarat в своем ответе, a .d.ts файл неявно включается TypeScript в зависимости от compile но это поведение может быть изменено с .

вы можете указать дополнительные файлы определений для включения без изменения целевой версии 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

и добавить правильный путь к индексу.д.ТС

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

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


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


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

в моем случае я обновился от 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"
    ]
}

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

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


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

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

после объявления об этом в печати.d.ts, ошибка для require не придет в приложении..


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

Мукеш:

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

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

угловой 2 RC1 переименован в до node_modules/angular.

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

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


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

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

в своем tsconfig тоже, чтобы остановить ошибки от


импортируйте приведенную ниже инструкцию в файл JS.

import 'rxjs/add/operator/map';

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

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

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

вот и все.

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


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

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

Update tsconfig.json, изменения

"target": "es5"

to

"target": "es6"