Не удается найти внешний модуль 'angular2/angleular2' - Angular2 w/Typescript

Я читаю пошаговое руководство по angular.io(Angular 2). Я использую typescript. При попытке компиляции я получаю следующую ошибку:

Cannot find external module 'angular2/angular2'

с помощью команды watch.

main.ts

import {Component, View, bootstrap} from 'angular2/angular2';

@Component({
  selector: 'my-app'
})

@View({
  template: '<h1>My first Angular 2 App</h1>'
})

class AppComponent {
}

bootstrap(AppComponent);

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://jspm.io/[email protected]"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.23/angular2.dev.js"></script>
  </head>
  <body>

    <my-app></my-app>

    <script>
      System.import('main');    
    </script>

  </body>
</html>

Q Почему возникает эта ошибка?

Ответ 1

Добавление этих файлов в голову даст вам последнюю рабочую версию Angular2.

<script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>
<script src="https://jspm.io/[email protected]"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.26/angular2.dev.js"></script>

Источник: Angular.io: 5 минут быстрого запуска

Ответ 2

Отсутствует TypeScript Определение (TSD) для Angular2:

 - cd src               //go to the directory where your ts-file is
 - tsd install angular2 //load Angular2 TypeScript Definition

Затем снова скомпилируйте (например, tsc -p src -w)

Если tsd не удается установить сначала:

npm install -g [email protected]^0.6.0

Ответ 3

Я расскажу вам, почему принятое решение плохое, согласно тому же источнику 5 MIN QUICKSTART:

В живом примере на plunker мы переводим (компилируем AKA) на JavaScript в браузере "на лету". Это хорошо для демонстрации. Это не наше предпочтение развитию или производству.

Мы рекомендуем пересылку (компиляцию AKA) на JavaScript во время фазы сборки перед запуском приложения по нескольким причинам, включая:

Мы видим предупреждения и ошибки компилятора, скрытые от нас в браузере.

Предварительная компиляция упрощает процесс загрузки модуля, и гораздо проще диагностировать проблему, когда это отдельный внешний шаг.

Предварительная компиляция означает более быструю работу пользователя, поскольку браузер не тратит время на компиляцию.

Мы ускоряем разработку быстрее, потому что мы только перекомпилируем измененные файлы. Мы замечаем разницу, как только приложение растет за пределы нескольких файлов.

предварительная компиляция встраивается в процесс непрерывной интеграции сборки, тестирования, развертывания.

Лучшее решение:

Создайте рабочий процесс для своего приложения angular2, используйте gulp, например, для создания задачи компиляции ts. вот хороший учебник, который я нашел Создание рабочего процесса TypeScript с Gulp

вы также можете использовать редактор vscode, который автоматически компилирует ваши ts файлы, читать больше.

если вам кажется слишком ленивым, чтобы создать свой собственный рабочий процесс, есть пара хороших стартеров, чтобы поиграть с angular2. каждый из них использует разные инструменты, но все они лучше, чем использование компилятора времени выполнения.

NG6-starter

angular2-webpack-starter

angular -2 seed

Ответ 4

TypeScript Проект VS2015

CommonJS не будет генерировать правый js-код для использования внутри кода учебника quickstart ng2, который стоит сегодня (20160215): import {Component} из 'angular2/core';

Я прав?

CommonJS будет генерировать это как ES6: var core_1 = require ('angular2/core');...

Это не будет работать в браузере и скажет, что require не определяется, поскольку quickstart использует SystemJS. Редактор кода не будет давать никаких ошибок, однако, все хорошо там, в VS2015.

SystemJS будет генерировать это как ES6: System.register(['angular2/core'], function (exports_1) {...

Работает как шарм в браузере, но даст ошибку "Не могу найти модуль". Не знаю, как решить эту проблему, кроме использования пустого веб-приложения ASP.NET ASP.NET. > Это даст вам ад, включающий node_modules внутри wwwroot, не копируя его там (по крайней мере, для программиста-новичка .net).

Raf.

Ответ 5

Почему возникает эта ошибка?

убедитесь, что у вас есть этот файл: https://github.com/borisyankov/DefinitelyTyped/blob/master/angular2/angular2.d.ts, включенный в ваш проект (рекомендуем использовать tsconfig.json: https://github.com/TypeStrong/atom-typescript/blob/master/docs/tsconfig.md)

Ответ 6

В main.ts я думаю, вам нужно добавить эту строку:

///<reference path="path/to/angular2"/>
import {Component, View, bootstrap} from 'angular2/angular2'; // then it will be fine.

Ответ 7

Для тех, кто сталкивается с этой проблемой в проектах Visual Studio TypeScript, вам может потребоваться выполнить следующие действия.

Откройте ваш .csproject в текстовом редакторе и

измените <TypeScriptModuleKind> как CommonJS
Вставьте дополнительные настройки (TypeScriptEmitDecoratorMetadata, TypeScriptExperimentalDecorators) в конце

Вот моя ссылка .csproject.

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
            <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
            <TypeScriptSourceMap>true</TypeScriptSourceMap>
            <TypeScriptTarget>ES5</TypeScriptTarget>
            <TypeScriptJSXEmit>None</TypeScriptJSXEmit>
            <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
            <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
            <TypeScriptModuleKind>CommonJS</TypeScriptModuleKind>
            <TypeScriptOutFile />
            <TypeScriptOutDir />
            <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
            <TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
            <TypeScriptMapRoot />
            <TypeScriptSourceRoot /
    <TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata>
    <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
          </PropertyGroup>

Ответ 8

Я тоже ударил эту проблему, а затем набрал все точно, как указано в инструкциях, и все сработало (представьте, что). Первоначально я пытался просто установить последнюю версию angular и systemjs. Однако использование определенных версий, указанных на странице быстрого запуска, решило проблему для меня.

Ответ 9

проверить мой образец MVC5 + Angular2 (Beta1 и TypeScript) Решение VS2015: https://github.com/hobe/angular2mvc5

Основные шаги:

TypeScriptModuleKind должен быть установлен в CommonJS
TypeScriptEmitDecoratorMetadatastrong > и TypeScriptExperimentalDecorators должны быть установлены в вашем файле .csproj.

Также требуется "TypeScript 1.7.6.0 для обновления Visual Studio 2015 1"

Ответ 10

Если вы используете приложение meteor- angular2, мое решение поможет вам; просто добавьте нижеприведенную строку в свой typescript app.ts перед операциями импорта:

/// <reference path="typings/angular2-meteor/angular2-meteor.d.ts" />