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 для получения дополнительной информации.
я получал это на 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
тоже, чтобы остановить ошибки от
принятый ответ не обеспечивает жизнеспособного исправления, и большинство других предлагают обходной путь" тройной косой черты", который больше не жизнеспособен, так как 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)
);