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

ปัญหาที่ทราบ: https://github.com/angular/angular/issues/4902

เหตุผลหลัก: .d.tsไฟล์ที่ระบุโดย TypeScript นั้นแตกต่างกันไปตามเป้าหมายของการคอมไพล์ดังนั้นจึงจำเป็นต้องมีการประกาศที่ล้อมรอบมากขึ้นเมื่อกำหนดเป้าหมายes5แม้ว่าสิ่งที่มีอยู่จริงใน runtimes (เช่น chrome) เพิ่มเติมเกี่ยวกับlib.d.ts

มีการแก้ไขปัญหาที่กล่าวถึงในการเปลี่ยนแปลงสำหรับ2.0.0-beta.6 (2016-02-11) (แสดงรายการภายใต้การเปลี่ยนแปลงที่ไม่หยุดหย่อน ):

หากคุณใช้ --target = es5 คุณจะต้องเพิ่มบรรทัดในแอปพลิเคชันของคุณ (ตัวอย่างเช่นที่ด้านบนของไฟล์. ts ที่คุณเรียกใช้ bootstrap):

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

(โปรดทราบว่าหากไฟล์ของคุณไม่อยู่ในไดเรกทอรีเดียวกับ node_modules คุณจะต้องเพิ่มอย่างน้อยหนึ่ง .. / ลงในจุดเริ่มต้นของเส้นทางนั้น)

ตรวจสอบให้แน่ใจว่าคุณมีเส้นทางอ้างอิงที่ถูกต้องฉันต้องเพิ่ม.. /เพื่อเริ่มการทำงานนี้

คุณสมบัติของ ES6 เช่นสัญญาไม่ได้ถูกกำหนดไว้เมื่อกำหนดเป้าหมาย ES5 มีไลบรารีอื่น ๆ แต่ core-js เป็นไลบรารี javascript ที่ทีมงาน Angular ใช้ มันมี polyfills สำหรับ ES6

Angular 2 มีการเปลี่ยนแปลงมากมายตั้งแต่คำถามนี้ถูกถาม ประกาศประเภทมีมากง่ายต่อการใช้ใน typescript 2.0

npm install -g typescript

สำหรับคุณสมบัติ ES6 ใน Angular 2 คุณไม่จำเป็นต้องใช้ Typings เพียงใช้ typescript 2.0 หรือสูงกว่าและติดตั้ง @ types / core-js ด้วย npm:

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

จากนั้นเพิ่มแอ็ตทริบิวต์TypeRootsและTypesเข้ากับ 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"
  ]
}

สิ่งนี้ง่ายกว่าการใช้ Typings ดังที่อธิบายไว้ในคำตอบอื่น ๆ ดูโพสต์บล็อกของ Microsoft สำหรับข้อมูลเพิ่มเติม: Typescript: The Future of Declaration Files

สำหรับผู้ที่ติดตาม 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);

โปรดทราบว่าคุณปล่อยไว้///ข้างหน้าเครื่องหมายทับอย่าลบออก

อ้างอิง: https://github.com/ericmdantas/angular2-typescript-todo/blob/master/index.ts#L1

ฉันสามารถแก้ไขได้ด้วยคำสั่งต่อไปนี้

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 ที่ชี้เรื่องนี้ออกมา

เมื่อมี 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)
    }
}

สำหรับ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เริ่มต้นอย่างรวดเร็วเพื่อดูข้อมูลเพิ่มเติม

คุณสามารถเพิ่มรหัสที่จุดเริ่มต้นของไฟล์. ts

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

ฉันได้รับสิ่งนี้จาก Angular 2 rc1 เปลี่ยนชื่อบางส่วนด้วยการพิมพ์ v1 เทียบกับเก่า 0.x ไฟล์กลายเป็นbrowser.d.tsindex.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)

ฉันมีปัญหาเดียวกันและฉันจะแก้ไขได้โดยใช้ตัวเลือกในlib tsconfig.jsonตามที่กล่าวโดยbasarat ในคำตอบของเขาเป็น.d.tsไฟล์รวมอยู่โดยปริยาย typescript ขึ้นอยู่กับการรวบรวม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')ในรหัสของฉัน

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

และเพิ่มเส้นทางที่ถูกต้องไปที่ index.d.ts

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

เพิ่ม typ.d.ts ในโฟลเดอร์หลักของแอปพลิเคชันและจากนั้นประกาศ varible ที่คุณต้องการใช้ทุกครั้ง

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

หลังจากประกาศสิ่งนี้ใน typ.d.ts ข้อผิดพลาดที่ต้องมีจะไม่มาในแอปพลิเคชัน ..

ฉันใหม่กับ Angular แต่สำหรับฉันแล้ววิธีแก้ปัญหานั้นก็เพียงแค่การนำเข้าอินพุต ไม่สามารถเครดิตสำหรับสิ่งนี้พบบนกระดานอื่น นี่เป็นการแก้ไขที่ง่ายถ้าคุณมีปัญหาเดียวกัน แต่ถ้าปัญหาของคุณซับซ้อนกว่านี้ฉันจะอ่านสิ่งข้างต้น

เมเคช :

คุณต้องนำเข้าข้อมูลเช่นนี้ที่ด้านบนขององค์ประกอบลูก

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

ฉันพบเอกสารนี้มีประโยชน์มากที่เว็บไซต์ของ Angular 2 ในที่สุดก็ให้ฉันทำงานได้อย่างถูกต้องในขณะที่คำตอบอื่น ๆ ที่นี่เพื่อติดตั้งการพิมพ์ล้มเหลวฉันมีข้อผิดพลาดต่าง ๆ (แต่ช่วยพาฉันไปในทิศทางที่ถูกต้อง)

แทนที่จะรวมถึงสัญญา es6 และคอลเลกชัน es6 มันรวมถึง core-js ซึ่งทำเคล็ดลับสำหรับฉัน ... ไม่มีความขัดแย้งกับคำจำกัดความแกนหลักของ Angular2 นอกจากนี้เอกสารอธิบายวิธีตั้งค่าทั้งหมดนี้ให้เกิดขึ้นโดยอัตโนมัติเมื่อติดตั้ง NPM และวิธีแก้ไขไฟล์ typings.json ของคุณ

Angular 2 RC1 เปลี่ยนชื่อnode_modules/angular2ไดเรกทอรีเป็นnode_modules/angularไดเรกทอรี

หากคุณใช้ gulpfile เพื่อคัดลอกไฟล์ไปยังไดเรกทอรีออกคุณอาจยังคงมี node_modules/angularอยู่ที่นั่นซึ่งคอมไพเลอร์อาจถูกหยิบขึ้นมาและสร้างความสับสนให้กับตัวเอง

ดังนั้น (อย่างระมัดระวัง) ล้างสิ่งที่คุณมีในnode_modulesรุ่นเบต้าและลบการพิมพ์เก่าและเรียกใช้typings installซ้ำ

โทรดี @VahidN ฉันพบว่าฉันต้องการ

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

ในของฉันtsconfigเช่นกันเพื่อหยุดข้อผิดพลาดจากes6-shimตัวเอง

อย่านำเข้าคำสั่งด้านล่างในไฟล์ JS ของคุณ

import 'rxjs/add/operator/map';

คำตอบที่ได้รับการยอมรับไม่ได้ให้การแก้ไขที่มีศักยภาพและคำตอบอื่น ๆ ส่วนใหญ่แนะนำให้ใช้วิธีแก้ปัญหา "สามสแลช" ซึ่งไม่สามารถใช้งานได้อีกต่อไปเนื่องจากbrowser.d.tsAngular2 RC รุ่นล่าสุดถูกลบออกไปแล้ว

ฉันขอแนะนำอย่างยิ่งให้ติดตั้งtypingsโมดูลตามที่แนะนำโดยคู่โซลูชั่นที่นี่ แต่ไม่จำเป็นต้องทำด้วยตนเองหรือทั่วโลก - มีวิธีที่มีประสิทธิภาพในการทำเช่นนั้นสำหรับโครงการของคุณเท่านั้นและภายใน VS2015 ส่วนติดต่อ นี่คือสิ่งที่คุณต้องทำ:

• เพิ่ม typingsในไฟล์ package.json ของโครงการ
• เพิ่มscriptบล็อกในpackage.jsonไฟล์เพื่อดำเนินการ / อัปเดตtypingsหลังจากแต่ละการกระทำ NPM
• เพิ่มtypings.jsonไฟล์ในโฟลเดอร์รูทของโครงการที่มีการอ้างอิงถึงcore-js(โดยรวมดีกว่าes6-shimatm)

แค่นั้นแหละ.

นอกจากนี้คุณยังสามารถดูที่หัวข้อ SO อื่น ๆและ / หรืออ่านโพสต์นี้บนบล็อกของฉันสำหรับรายละเอียดเพิ่มเติม

ฉันได้รับข้อผิดพลาดนี้หลังจากรวมสาขา dev ของฉันกับสาขาปัจจุบันของฉัน ฉันใช้เวลาบางครั้งเพื่อแก้ไขปัญหา อย่างที่คุณเห็นในภาพด้านล่างไม่มีปัญหาในรหัสเลย

ดังนั้นการแก้ไขเดียวที่ใช้ได้ผลกับฉันก็คือการรีสตาร์ท VSCode

ตอนนี้คุณต้องนำเข้าด้วยตนเอง

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

อัพเดทtsconfig.jsonเปลี่ยนแปลง

"target": "es5"

ถึง

"target": "es6"