Angular và Typescript: Không thể tìm thấy tên - Lỗi: không thể tìm thấy tên

Tôi đang sử dụng Angular (phiên bản 2) với TypeScript (phiên bản 1.6) và khi tôi biên dịch mã, tôi nhận được các lỗi sau:

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

Đây là mã:

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

Câu trả lời #1

Có một cách khắc phục được đề cập trong nhật ký thay đổi cho phiên bản 2.0.0-beta.6 (2016-02-11) (được liệt kê dưới mục thay đổi gây ảnh hưởng):

Nếu bạn sử dụng --target=es5, bạn sẽ cần thêm một dòng nào đó trong ứng dụng của mình (ví dụ, ở đầu file .ts nơi bạn gọi bootstrap):

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

(Lưu ý rằng nếu tệp của bạn không nằm trong cùng thư mục với node_modules, bạn sẽ cần thêm một hoặc nhiều ../ vào đầu đường dẫn đó.)

hãy chắc chắn rằng bạn có đường dẫn tham chiếu đúng, tôi cần thêm ../ vào đầu để làm cho việc này hoạt động.

Câu trả lời #2

Các tính năng ES6 như promises không được định nghĩa khi nhắm mục tiêu ES5. Có các thư viện khác, nhưng core-js là thư viện javascript mà nhóm Angular sử dụng. Nó chứa các polyfill cho ES6.

Angular 2 đã thay đổi rất nhiều kể từ khi câu hỏi này được đặt ra. Khai báo kiểu dễ dàng hơn nhiều trong Typescript 2.0.

npm install -g typescript

Đối với các tính năng ES6 trong Angular 2, bạn không cần Typings. Chỉ cần sử dụng typescript 2.0 hoặc cao hơn và cài đặt @types/core-js bằng npm:

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

Sau đó, thêm các thuộc tính TypeRoots và Types vào tsconfig.json của bạn:

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

Điều này dễ dàng hơn nhiều so với việc sử dụng Typings, như đã giải thích trong các câu trả lời khác. Xem bài đăng trên blog của Microsoft để biết thêm thông tin: Typescript: Tương lai của các tệp khai báo

Câu trả lời #3

Một vấn đề đã biết: https://github.com/angular/angular/issues/4902

Nguyên nhân chính: tệp .d.ts được TypeScript ngầm định bao gồm sẽ khác nhau tùy theo mục tiêu biên dịch, vì vậy người dùng cần có nhiều khai báo môi trường hơn khi nhắm tới es5 ngay cả khi mọi thứ thực sự có mặt trong runtime (ví dụ: chrome). Thêm về lib.d.ts

Câu trả lời #4

Đối với những người đang theo dõi hướng dẫn Angular2 trên angular.io chỉ để làm rõ, đây là phần mở rộng của câu trả lời của mvdluit về chính xác nơi đặt mã:

main.ts của bạn nên trông giống như sau:

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

Lưu ý rằng bạn để lại các dấu gạch chéo ///, đừng xóa chúng.

tham khảo: https://github.com/ericmdantas/angular2-typescript-todo/blob/master/index.ts#L1

Câu trả lời số 5

Tôi đã có thể sửa lỗi này bằng lệnh sau

typings install es6-promise es6-collections --ambient

Lưu ý rằng bạn cần typings để làm cho lệnh trên hoạt động, nếu bạn không có nó hãy chạy lệnh sau để cài đặt nó

npm install -g typings

CẬP NHẬT

cập nhật typings không đọc --ambient mà đã trở thành --global, cũng đối với một số người bạn cần cài đặt các định nghĩa của các thư viện trên, chỉ cần sử dụng lệnh sau

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

Cảm ơn @bgerth đã chỉ ra điều này.

Câu trả lời số 6

Khi sử dụng Typescript >= 2 thì tùy chọn "lib" trong tsconfig.json sẽ thực hiện công việc. Không cần Typings. https://www.typescriptlang.org/docs/handbook/compiler-options.html

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

Câu trả lời #7

Đối với Angular 2.0.0-rc.0, việc thêm node_modules/angular2/typings/browser.d.ts sẽ không hoạt động. Trước tiên hãy thêm tệp typings.json vào giải pháp của bạn, với nội dung sau:

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

Và sau đó cập nhật tệp package.json để bao gồm postinstall này:

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

Bây giờ hãy chạy npm install

Bây giờ bạn cũng nên bỏ qua thư mục typings trong tệp tsconfig.json của bạn:

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

Cập nhật

Hiện nay AngularJS 2.0 đang sử dụng core-js thay vì es6-shim. Hãy tham khảo tệp typings.json hướng dẫn nhanh của nó để biết thêm thông tin.

Câu trả lời #8

bạn có thể thêm mã ở đầu các tệp .ts.

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

Câu trả lời số 9

Tôi đã gặp điều này trên Angular 2 rc1. Hoá ra một số tên đã thay đổi với typings v1 so với phiên bản cũ 0.x. Các tệp browser.d.ts đã trở thành index.d.ts.

Sau khi chạy typings install, tìm tệp khởi động của bạn (nơi bạn bootstrap) và thêm:

/// <reference path="../typings/index.d.ts" /> (hoặc không có ../ nếu tệp khởi động của bạn ở cùng thư mục với thư mục typings)

Thêm index.d.ts vào danh sách tệp trong tsconfig.json vì lý do nào đó đã không hoạt động.

Ngoài ra, gói es6-shim không cần thiết.