Angular dan naskah: Tidak dapat menemukan nama

Saya menggunakan Angular (versi 2) dengan TypeScript (versi 1.6) dan ketika saya mengkompilasi kode saya mendapatkan kesalahan ini:

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

Ini kodenya:

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

Masalah yang diketahui: https://github.com/angular/angular/issues/4902

Alasan inti: .d.tsfile yang secara implisit disertakan oleh TypeScript bervariasi dengan target kompilasi, jadi orang perlu memiliki deklarasi ambient yang lebih banyak ketika menargetkan es5bahkan jika ada hal-hal yang sebenarnya ada di runtimes (mis. Chrome). Lebih lanjut tentanglib.d.ts

Ada solusi yang disebutkan di changelog untuk 2.0.0-beta.6 (2016-02-11) (tercantum di bawah perubahan yang berubah):

Jika Anda menggunakan --target = es5, Anda perlu menambahkan baris di suatu tempat di aplikasi Anda (misalnya, di bagian atas file .ts tempat Anda memanggil bootstrap):

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

(Perhatikan bahwa jika file Anda tidak berada di direktori yang sama dengan node_modules, Anda harus menambahkan satu atau lebih ../ ke awal jalur itu.)

pastikan Anda memiliki jalur referensi yang benar, saya perlu menambahkan ../ ke awal agar ini berfungsi.

Fitur ES6 seperti janji tidak ditentukan saat menargetkan ES5. Ada perpustakaan lain, tetapi core-js adalah perpustakaan javascript yang digunakan tim Angular. Ini berisi polyfill untuk ES6.

Angular 2 telah banyak berubah sejak pertanyaan ini diajukan. Deklarasi tipe jauh lebih mudah digunakan di dalam Script 2.0.

npm install -g typescript

Untuk fitur ES6 di Angular 2, Anda tidak perlu Mengetik. Cukup gunakan skrip 2.0 atau lebih tinggi dan instal @ types / core-js dengan npm:

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

Kemudian, tambahkan atribut TypeRoots dan Type ke tsconfig.json Anda:

{
  "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"
  ]
}

Ini jauh lebih mudah daripada menggunakan Typing, seperti yang dijelaskan dalam jawaban lain. Lihat posting blog Microsoft untuk informasi lebih lanjut: Skrip: The Future of Declaration Files

Bagi mereka yang mengikuti tutorial Angular2 pada angular.io hanya untuk menjadi eksplisit, berikut ini adalah perluasan jawaban mvdluit tentang di mana tepatnya meletakkan kode:

Anda main.tsakan terlihat seperti ini:

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

Perhatikan bahwa Anda membiarkan ///garis miring ke depan, jangan hapus.

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

Saya dapat memperbaiki ini dengan perintah berikut

typings install es6-promise es6-collections --ambient

Perhatikan bahwa Anda perlu typingsmembuat perintah di atas berfungsi, jika Anda belum menjalankan perintah berikut untuk menginstalnya

npm install -g typings

MEMPERBARUI

pembaruan pengetikan tidak membacanya --ambientmenjadi --globaljuga untuk beberapa orang Anda perlu menginstal definisi perpustakaan di atas, cukup gunakan perintah berikut

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

Terima kasih kepada @bgerth karena menunjukkan ini.

Ketika memiliki Typescript> = 2 opsi "lib" di tsconfig.json akan melakukan pekerjaan itu. Tidak perlu mengetik. https://www.typescriptlang.org/docs/handbook/compiler-options.html

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

Untuk Angular 2.0.0-rc.0menambahkan node_modules/angular2/typings/browser.d.tstidak akan berhasil. Pertama tambahkan file typings.json ke solusi Anda, dengan konten ini:

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

Dan kemudian perbarui package.jsonfile untuk menyertakan ini postinstall:

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

Sekarang jalankan npm install

Juga sekarang Anda harus mengabaikan typings folder di tsconfig.jsonfile Anda juga:

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

Memperbarui

Sekarang AngularJS 2.0 menggunakan core-jsalih-alih es6-shim. Ikuti file typings.json mulai cepat untuk info lebih lanjut.

Anda dapat menambahkan kode di awal file .ts.

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

Saya mendapatkan ini di Angular 2 rc1. Ternyata beberapa nama diubah dengan ketikkan v1 vs yang lama 0.x. The browser.d.tsfile menjadiindex.d.ts .

Setelah berlari typings install temukan file startup Anda (tempat Anda bootstrap) dan tambahkan:

/// <reference path="../typings/index.d.ts" /> (atau tanpa ../ file startup Anda di folder yang sama dengan folder pengetikan)

Menambahkan index.d.tske daftar file ditsconfig.json tidak berfungsi karena suatu alasan.

Juga, es6-shimpaket itu tidak diperlukan.

Saya dapat memperbaikinya dengan menginstal typingsmodul.

npm install -g typings
typings install

(Menggunakan ng 2.0.0-rc.1)

Saya memiliki masalah yang sama dan saya menyelesaikannya menggunakan libopsi di tsconfig.json. Seperti yang dikatakan oleh basarat dalam jawabannya , sebuah .d.tsfile secara implisit disertakan oleh TypeScript tergantung pada targetopsi kompilasi tetapi perilaku ini dapat diubah denganlib opsi tersebut.

Anda dapat menentukan file definisi tambahan untuk dimasukkan tanpa mengubah versi JS yang ditargetkan. Sebagai contoh, ini adalah bagian dari arus saya compilerOptionsuntuk [email protected] dan menambahkan dukungan untuk es2015fitur tanpa menginstal apa pun:

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

Untuk daftar lengkap opsi yang tersedia, periksa dokumen resmi .

Perhatikan juga bahwa saya menambahkan "types": ["node"]dan menginstal npm install @types/nodeuntuk mendukung require('some-module')kode saya.

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

dan tambahkan jalur yang benar ke index.d.ts

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

Mencoba di @ angular-2.0.0-rc3

Jika npm install -g typings typings installmasih tidak membantu, hapus node_modules dan ketikkan folder sebelum menjalankan perintah ini.

Inilah yang berpikir bagaimana setiap orang mencoba melakukan sesuatu yang berbeda. Saya percaya sistem ini masih jauh dari versi final.

Dalam kasus saya, saya memperbarui dari rc.0 ke rc.5 kesalahan ini muncul.

Perbaikan saya adalah mengubah 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"
    ]
}

tambahkan typing.d.ts di folder utama aplikasi dan di sana mendeklarasikan variabel yang ingin Anda gunakan setiap saat

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

setelah mendeklarasikan ini di typing.d.ts, kesalahan untuk meminta tidak akan datang dalam aplikasi ..

Saya baru mengenal Angular tetapi bagi saya solusinya ditemukan hanya dengan mengimpor Input. Tidak dapat menerima kredit untuk yang ini, menemukannya di papan lain. Ini adalah perbaikan sederhana jika Anda mengalami masalah yang sama tetapi jika masalah Anda lebih kompleks, saya akan membaca hal-hal di atas.

Mukesh :

Anda harus mengimpor input seperti ini di atas komponen anak

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

Saya menemukan dokumen yang sangat membantu ini di situs web Angular 2. Akhirnya membiarkan saya bekerja dengan benar, sedangkan jawaban lain di sini, untuk menginstal mengetik, gagal saya dengan berbagai kesalahan (Tapi membantu membawaku ke arah yang benar.)

Alih-alih termasuk es6-janji dan es6-koleksi, itu termasuk core-js, yang melakukan trik untuk saya ... tidak ada konflik dengan definisi inti ts Angular2. Selain itu dokumen tersebut menjelaskan cara mengatur semua ini agar terjadi secara otomatis ketika menginstal NPM, dan bagaimana memodifikasi file typings.json Anda.

Angular 2 RC1 mengubah nama node_modules/angular2direktori menjadi node_modules/angular.

Jika Anda menggunakan gulpfile untuk menyalin file ke direktori keluaran, Anda mungkin masih node_modules/angularduduk di sana yang mungkin diambil oleh kompiler dan membingungkannya sendiri.

Jadi (hati-hati) hapus apa yang Anda miliki di node_modulesdalamnya untuk versi beta, dan hapus juga semua pengetikan lama dan jalankan kembali typings install.

Panggilan bagus, @VahidN, saya merasa perlu

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

Dalam saya tsconfigjuga, untuk menghentikan kesalahan dari es6-shimdirinya sendiri

Impor pernyataan di bawah ini dalam file JS Anda.

import 'rxjs/add/operator/map';

Jawaban yang diterima tidak memberikan perbaikan yang layak, dan sebagian besar yang lain menyarankan solusi "triple-slash" yang tidak layak lagi, karena browser.d.tstelah dihapus oleh RC terbaru Angular2 dan dengan demikian tidak tersedia lagi.

Saya sangat menyarankan untuk menginstal typingsmodul seperti yang disarankan oleh beberapa solusi di sini, namun itu tidak perlu dilakukan secara manual atau global - ada cara yang efektif untuk melakukannya untuk proyek Anda saja dan dalam antarmuka VS2015. Inilah yang perlu Anda lakukan:

• Menambahkan typings file package.json proyek.
• tambahkan scriptblok di package.jsonfile untuk menjalankan / memperbaruitypings setelah setiap aksi NPM.
• tambahkan typings.jsonfile di folder root proyek yang berisi referensi core-js(secara keseluruhan lebih baik daripada es6-shimatm).

Itu dia.

Anda juga dapat melihat utas SO lainnya ini dan / atau membaca posting ini di blog saya untuk detail tambahan.

Saya mendapatkan kesalahan ini setelah menggabungkan cabang dev saya ke cabang saya saat ini. Saya menghabiskan beberapa waktu untuk memperbaiki masalah ini. Seperti yang Anda lihat pada gambar di bawah, tidak ada masalah dalam kode sama sekali.

Jadi satu-satunya perbaikan yang berhasil bagi saya adalah Restart VSCode

Sekarang Anda harus mengimpornya secara manual.

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

Perbarui tsconfig.json, ubah

"target": "es5"

untuk

"target": "es6"