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

Ответ 1

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

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

Ответ 2

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

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

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

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

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

Ответ 3

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

Ответ 4

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

Ответ 5

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

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 для указания этого.

Ответ 6

При использовании 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)
    }
}

Ответ 7

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

Ответ 8

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

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

Ответ 9

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

Ответ 10

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

npm install -g typings
typings install

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

Ответ 11

У меня была та же проблема, и я решил ее использовать с опцией 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') в моем коде.

Ответ 12

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

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

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

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

Ответ 13

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

Ответ 14

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

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

Ответ 15

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

Мукеш:

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

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

Ответ 16

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

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

Ответ 17

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

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

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

Ответ 18

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

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

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

Ответ 19

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

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

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

Ответ 20

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

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

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

Это.

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

Ответ 21

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

import 'rxjs/add/operator/map';

Ответ 22

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

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

Ответ 23

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

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

Ответ 24

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

"target": "es5"

к

"target": "es6"