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

172

Я использую 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);
  • 0
    похоже, что здесь есть проблема github.com/angular/angular/issues/4902
  • 0
    Попробуйте добавить следующий импорт import {ROUTER_PROVIDERS} from 'angular2/router'; Я получаю ту же проблему, и по какой-то причине это исправляет ее для меня ...?!?
Теги:
angular

22 ответа

52
Лучший ответ

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

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

  • 392
    Так в чем же решение?
  • 1
    Угловая команда должна это исправить. Нетривиально
Показать ещё 14 комментариев
95

В журнале изменений есть ссылка на 2.0.0-beta.6 (2016-02-11) (перечисленные ниже нарушение изменений):

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

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

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

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

  • 3
    Это исправило много ошибок для меня, но я все еще получаю ошибки, такие как TS2304: Cannot find name 'module' и TS2339: Property 'find' does not exist on type 'MyThing[]'. ... Есть идеи?
  • 0
    Это сработало для меня, без ошибок, используя версию angular2 beta.8.
Показать ещё 10 комментариев
79

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

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

npm install -g typescript

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

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: будущее файлов декларации

  • 1
    Я думаю, что массив "types" также принадлежит объекту "compilerOptions". Но, кроме этого, большое спасибо, я боролся с этим весь день.
  • 0
    @plexus Спасибо! Вы правы насчет компилятора. Я исправил ответ.
Показать ещё 5 комментариев
46

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

typings install es6-promise es6-collections --ambient

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

npm install -g typings

UPDATE

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

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

Благодаря @bgerth для указания этого.

  • 9
    Для меня это были typings install dt~es6-promise dt~es6-collections --global --save
  • 1
    @bgerth Я думаю, что это изменилось из-за обновления typings , я добавлю ваше решение в ответ
Показать ещё 3 комментария
45

Для тех, кто следит за 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

  • 0
    Я использую VS2015 MVC6 и Angular2 beta.14. Если вы поместите контрольную линию в _references.js она не будет работать. Должен быть внутри компонента, как предполагает этот ответ. Кроме того, используйте ../../ вместо ../ для пути.
  • 0
    Это исправило мои ошибки компиляции в бета-версии 14.
Показать ещё 5 комментариев
28

При использовании 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)
    }
}
  • 0
    Это сработало для меня. Большое спасибо!
  • 0
    Да ... добавление "lib": ["es2016", "dom"] в мой файл tsconfig.json исправило это
Показать ещё 4 комментария
15

Для 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 для получения дополнительной информации.

13

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

/// <reference path="../typings/index.d.ts" />
  • 0
    Это сработало для меня. Нет необходимости устанавливать наборы глобально. Пробовал на стабильном угловом 2.
  • 0
    У меня тоже работал, используя Angular 2.0.0 (выпуск)
10

Я получал это на 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 не нужен.

7

У меня была та же проблема, и я решил ее использовать с опцией lib в tsconfig.json. Как сказал basarat в своем ответе, файл .d.ts неявно включается TypeScript в зависимости от параметра compile 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') в моем коде.

7

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

npm install -g typings
typings install

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

  • 0
    Это сработало для меня. Спасибо
  • 0
    msgstr "" typyings.json "отсутствует. - (нет зависимостей)". Эта ошибка возвращается, когда я запускаю команду в той же папке файла app.ts. Где я должен найти этот файл typings.json и когда мне следует запустить команду?
4

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

В моем случае, я обновил с 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"
    ]
}
  • 1
    Это решило и мои проблемы. Версии RC нацелены на es6.
  • 1
    это решило мои проблемы ..
Показать ещё 1 комментарий
4

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

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

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

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

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

  • 0
    Это решение отлично работает, когда нам нужен файл .d.ts в проекте библиотеки.
3

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

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

после объявления этого параметра в файле typing.d.ts, ошибка для запроса не появится в приложении.

3

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

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

2

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

Мукеш:

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

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

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

import 'rxjs/add/operator/map';
  • 0
    Я откладываю обновление проекта до последней версии, поэтому добавил import './rxjs-extensions'; на мой app.component.ts с файлом rxjs-extensions из учебника angular2 (включая предложенную строку), и, похоже, эти ошибки были удалены.
  • 0
    Не могли бы вы быть более конкретным. Какой файл JS? тот, который скомпилирован Typescript? главный?
2

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

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

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

  • 0
    или в качестве альтернативы ... работайте над другими вещами в течение 4 месяцев и ждите, пока финальный релиз начнется с нуля (что я и делаю)
2

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

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

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

1

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

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

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

Что это.

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

-5

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

"target": "es5"

к

"target": "es6"
  • 0
    Это может привести к несовместимости вывода JavaScript с более старыми браузерами.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню