각도 및 타이프 스크립트 : 이름을 찾을 수 없습니다

TypeScript (버전 1.6)와 함께 Angular (버전 2)를 사용하고 있으며 코드를 컴파일 할 때 다음 오류가 발생합니다.

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.tsTypeScript에 내재적으로 포함 된 파일은 컴파일 대상에 따라 다르므로 es5실제로 런타임에 항목이 존재하더라도 대상을 지정할 때 주변 선언이 더 필요합니다 (예 : 크롬). 더lib.d.ts

2.0.0-beta.6 (2016-02-11) 에 대한 변경 사항 로그에 언급 된 해결 방법이 있습니다 (변경 사항 아래에 나열 됨).

--target = es5를 사용하는 경우 응용 프로그램 어딘가에 줄을 추가해야합니다 (예 : 부트 스트랩을 호출하는 .ts 파일의 맨 위에).

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

(파일이 node_modules와 같은 디렉토리에 있지 않으면 해당 경로의 시작 부분에 하나 이상의 ../를 추가해야합니다.)

올바른 참조 경로가 있는지 확인하십시오 .이 작업을 시작하려면 시작에 ../ 를 추가 해야했습니다.

약속과 같은 ES6 기능은 ES5를 타겟팅 할 때 정의되지 않습니다. 다른 라이브러리가 있지만 core-js는 Angular 팀이 사용하는 자바 스크립트 라이브러리입니다. ES6 용 폴리 필이 포함되어 있습니다.

이 질문을 한 이후 Angular 2가 많이 변경되었습니다. Typescript 2.0에서는 형식 선언 을 사용하기 가 훨씬 쉽습니다.

npm install -g typescript

Angular 2의 ES6 기능의 경우 입력이 필요하지 않습니다. typescript 2.0 이상을 사용하고 npm과 함께 @ types / core-js를 설치하십시오.

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

다른 답변에서 설명한 것처럼 타이핑을 사용하는 것보다 훨씬 쉽습니다. 자세한 내용은 Microsoft 블로그 게시물을 참조하십시오. Typescript : 선언 파일의 미래

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

최신 정보

typings 업데이트는 읽지 않습니다 --ambient이 된 --global바로 다음 명령을 사용하여 위의 라이브러리의 정의를 설치해야합니다 일부 사람들도

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

이것을 지적한 @bgerth 에게 감사드립니다 .

Typescript> = 2 인 경우 tsconfig.json의 "lib"옵션이 작업을 수행합니다. 타이핑이 필요 없습니다. 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.ts파일이되었다 index.d.ts.

실행 후 typings install시작 파일 (부트 스트랩 위치)을 찾아 다음을 추가하십시오.

/// <reference path="../typings/index.d.ts" />(또는 ../시작 파일이 입력 폴더와 같은 폴더에있는 경우)

어떤 이유로 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파일은 암시 적으로 컴파일에 따라 타이프 라이터가 포함되어있는 target옵션을하지만,이 동작은 변경할 수 있습니다 lib옵션을 선택합니다.

대상 JS 버전을 변경하지 않고 포함 할 추가 정의 파일을 지정할 수 있습니다. 예를 들어 이것은 compilerOptionsTypescript@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"
    ]
}

응용 프로그램의 기본 폴더에 typing.d.ts를 추가하고 매번 사용할 변수를 선언하십시오.

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

typing.d.ts에서 이것을 선언 한 후, 응용 프로그램에 require 오류가 발생하지 않습니다.

나는 Angular를 처음 사용하지만 단순히 입력을 가져 와서 해결책을 찾았습니다. 이 보드에 대한 크레딧을받을 수 없습니다. 다른 보드에서 찾았습니다. 동일한 문제가 발생하면 간단한 수정이지만 문제가 더 복잡하면 위의 내용을 읽습니다.

무 케시 :

하위 구성 요소의 맨 위에 이와 같은 입력을 가져와야합니다.

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

Angular 2 웹 사이트 에서이 유용한 문서 를 발견 했습니다 . 마지막으로 제대로 작동하게하는 반면, 다른 대답은 타이핑을 설치하고 다양한 오류로 인해 실패했습니다. (그러나 올바른 방향으로 이끌도록 도와주었습니다.)

es6-promise와 es6collection을 포함하는 대신, Angular2의 핵심 ts 정의와 충돌하지 않는 핵심 기술이 포함되어 있습니다. 또한이 문서에서는 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블록을 추가하여 각 NPM 작업 후 package.json실행 / 업데이트하십시오 typings.
• 에 대한 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"