Angular và Typecript: 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 gặp 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);

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

Lý do cốt lõi: .d.tstệp được bao gồm bởi TypeScript thay đổi theo mục tiêu biên dịch, do đó, người ta cần phải có các khai báo xung quanh hơn khi nhắm mục tiêu es5ngay cả khi mọi thứ thực sự có trong thời gian chạy (ví dụ: chrome). Thêm vềlib.d.ts

Có một cách giải quyết được đề cập trong thay đổi cho 2.0.0-beta.6 (2016-02-11) (được liệt kê dưới các thay đổi vi phạm):

Nếu bạn sử dụng --target = es5, bạn sẽ cần thêm một dòng ở đâu đó trong ứng dụng của mình (ví dụ: ở đầu tệp .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 chính xác, tôi cần thêm ../ vào đầu để bắt đầu hoạt động.

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

Angular 2 đã thay đổi rất nhiều kể từ khi câu hỏi này được hỏi. Khai báo kiểu dễ sử dụng hơn nhiều trong Typecript 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 phải đánh máy. Chỉ cần sử dụng typecript 2.0 trở lên và cài đặt @ type / core-js với npm:

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

Sau đó, thêm TypeRoots và Type thuộc tính 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ư được 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 : Bản thảo: Tương lai của các tệp khai báo

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

Bạn main.tssẽ trông như thế này:

/// <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 trong ///dấu gạch chéo về phía trước, không loại bỏ chúng.

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

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 typingslàm cho lệnh trên hoạt động, nếu bạn không có lệnh này hãy chạy lệnh sau để cài đặt nó

npm install -g typings

CẬP NHẬT

Bản cập nhật typings không đọc --ambientnó --globalcũng trở thành 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.

Khi có Typecript> = 2, tùy chọn "lib" trong tsconfig.json sẽ thực hiện công việc. Không cần đánh máy. 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.0thêm node_modules/angular2/typings/browser.d.tssẽ không làm việc. 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 này:

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

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

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

Bây giờ chạy npm install

Ngoài ra, bây giờ bạn cũng nên bỏ qua typingsthư mục trong tsconfig.jsontệp của mình :

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

Cập nhật

Bây giờ AngularJS 2.0 đang sử dụng core-jsthay vì es6-shim. Theo dõi tệp typings.json bắt đầu nhanh của nó để biết thêm thông tin.

bạn có thể thêm mã vào đầu tập tin .ts.

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

Tôi đã nhận được điều này trên Angular 2 rc1. Hóa ra một số tên đã thay đổi với kiểu chữ v1 so với 0.x cũ. Các browser.d.tstập tin đã trở thành index.d.ts.

Sau khi chạy typings installxác định vị trí 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 nằm trong cùng thư mục với thư mục đánh máy)

Thêm index.d.tsvào danh sách tập tin tsconfig.jsonkhông hoạt động vì một số lý do.

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

Tôi đã có thể khắc phục điều này bằng cách cài đặt typingsmô-đun.

npm install -g typings
typings install

(Sử dụng ng 2.0.0-rc.1)

Tôi đã có cùng một vấn đề và tôi đã giải quyết nó bằng cách sử dụng libtùy chọn trong tsconfig.json. Như đã nói bởi basarat trong câu trả lời của mình , một .d.tstệp được TypeScript ngầm định tùy thuộc vào targettùy chọn biên dịch nhưng hành vi này có thể được thay đổi vớilib tùy chọn.

Bạn có thể chỉ định các tệp định nghĩa bổ sung được bao gồm mà không thay đổi phiên bản JS được nhắm mục tiêu. Ví dụ, đây là một phần hiện tại của tôi compilerOptionscho Formscript@2.1 và nó bổ sung hỗ trợ cho es2015các tính năng mà không cần cài đặt bất cứ thứ gì khác:

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

Để biết danh sách đầy đủ các tùy chọn có sẵn, hãy kiểm tra tài liệu chính thức .

Cũng lưu ý rằng tôi đã thêm "types": ["node"]và cài đặt npm install @types/nodeđể hỗ trợ require('some-module')trong mã của mình.

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

và thêm đường dẫn chính xác vào index.d.ts

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

Đã thử trên @ angular-2.0.0-rc3

Nếu npm install -g typings typings installvẫn không được, xóa node_modules và typings thư mục trước khi thực hiện lệnh này.

Đây là suy nghĩ làm thế nào mọi người đang cố gắng làm một cái gì đó khác nhau. Tôi tin rằng các hệ thống này vẫn còn xa phiên bản cuối cùng.

Trong trường hợp của tôi, tôi đã cập nhật từ RC.0 lên RC.5, lỗi này đã xuất hiện.

Đã sửa lỗi của tôi là thay đổi 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"
    ]
}

thêm gõ.d.ts trong thư mục chính của ứng dụng và ở đó khai báo biến mà bạn muốn sử dụng mỗi lần

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

sau khi khai báo điều này trong bộ gõ.d.ts, lỗi cho yêu cầu sẽ không xuất hiện trong ứng dụng ..

Tôi chưa quen với Angular nhưng đối với tôi, giải pháp đã được tìm thấy bằng cách nhập Input. Không thể lấy tín dụng cho cái này, tìm thấy nó trên một bảng khác. Đây là một sửa chữa đơn giản nếu bạn gặp vấn đề tương tự nhưng nếu vấn đề của bạn phức tạp hơn, tôi sẽ đọc những thứ ở trên.

Mukesh :

bạn phải nhập dữ liệu đầu vào như thế này ở đầu thành phần con

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

Tôi thấy tài liệu này rất hữu ích tại trang web của Angular 2. Cuối cùng nó cũng cho phép tôi làm mọi thứ hoạt động bình thường, trong khi các câu trả lời khác ở đây, để cài đặt các kiểu chữ, làm tôi thất bại với nhiều lỗi khác nhau. (Nhưng đã giúp dẫn tôi đi đúng hướng.)

Thay vì bao gồm es6-hứa và es6-sưu tập, nó bao gồm core-js, đã thực hiện thủ thuật cho tôi ... không có xung đột với các định nghĩa ts cốt lõi của Angular2. Ngoài ra, tài liệu giải thích cách thiết lập tất cả điều này sẽ tự động xảy ra khi cài đặt NPM và cách sửa đổi tệp typings.json của bạn.

Angular 2 RC1 đổi tên node_modules/angular2thư mục thành node_modules/angular.

Nếu bạn đang sử dụng gulpfile để sao chép tệp vào thư mục đầu ra, bạn có thể vẫn còn node_modules/angular đang ngồi trong đó có thể bị trình biên dịch chọn và nhầm lẫn giữa địa ngục.

Vì vậy, (cẩn thận) xóa sạch những gì bạn có trong node_modulesphiên bản beta và cũng xóa mọi kiểu chữ cũ và chạy lại typings install.

Cuộc gọi tốt, @VahidN, tôi thấy tôi cần

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

Tôi tsconfigcũng vậy, để ngăn chặn lỗi từ es6-shimchính nó

Đừng nhập câu lệnh dưới đây vào tệp JS của bạn.

import 'rxjs/add/operator/map';

Câu trả lời được chấp nhận không cung cấp cách khắc phục khả thi và hầu hết các câu hỏi khác đề xuất cách giải quyết "ba dấu gạch chéo" không còn khả thi nữa, vì browser.d.tsđã bị xóa bởi RC mới nhất của Angular2 và do đó không còn khả dụng nữa.

Tôi đề nghị cài đặt typings mô-đun theo đề xuất của một vài giải pháp ở đây, tuy nhiên không cần thiết phải thực hiện thủ công hoặc toàn cầu - có một cách hiệu quả để làm điều đó chỉ cho dự án của bạn và trong giao diện VS2015. Đây là những gì bạn cần làm:

• thêm vào typings vào tập tin pack.json của dự án.
• thêm một scriptkhối trong package.jsontệp để thực thi / cập nhật typingssau mỗi hành động NPM.
• thêm một typings.jsontệp trong thư mục gốc của dự án có chứa một tham chiếu đến core-js(tổng thể tốt hơn es6-shimatm).

Đó là nó.

Bạn cũng có thể xem chủ đề SO khác này và / hoặc đọc bài đăng này trên blog của tôi để biết thêm chi tiết.

Tôi đã nhận được lỗi này sau khi hợp nhất chi nhánh dev của tôi với chi nhánh hiện tại của tôi. Tôi đã dành thời gian để khắc phục vấn đề. Như bạn có thể thấy trong hình dưới đây, không có vấn đề gì trong các mã cả.

Vì vậy, cách khắc phục duy nhất có hiệu quả với tôi là Khởi động lại VSCode

Bây giờ bạn phải nhập chúng bằng tay.

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

Cập nhật tsconfig.json, thay đổi

"target": "es5"

đến

"target": "es6"