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

Question

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

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

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/system@0.16.js"></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 Почему происходит эта ошибка?

14

angular typescript

Источник

user3390279 16 июн '15 в 03:12

10 ответов

Решение

Определение 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 tsd@^0.6.0

9

Источник

user520094 15 сен '15 в 08:52

Проект TypeScript VS2015

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

Я прав?

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

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

SystemJS сгенерирует это как ES6: System.register(['angular2/core'], функция (exports_1) { ...

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

Raf.

3

Источник

user5889279 05 фев '16 в 17:06

Я скажу вам, почему принятое решение является плохим, согласно тому же источнику 5 МИНУТ БЫСТРОГО ЗАПУСКА:

В живом примере с plunker мы переносим (AKA compile) на JavaScript в браузере на лету. Это хорошо для демо. Это не наше предпочтение разработке или производству.
Перед запуском приложения рекомендуется выполнить перенос (компиляцию AKA) в JavaScript на этапе сборки, по нескольким причинам, в том числе:
Мы видим предупреждения компилятора и ошибки, которые скрыты от нас в браузере.
Предварительная компиляция упрощает процесс загрузки модуля, и намного проще диагностировать проблему, когда это отдельный внешний шаг.
Предварительная компиляция означает более быстрое взаимодействие с пользователем, поскольку браузер не тратит время на компиляцию.
Мы выполняем разработку быстрее, потому что перекомпилируем только измененные файлы. Мы заметим разницу, как только приложение выйдет за пределы нескольких файлов.
Предварительная компиляция вписывается в непрерывный процесс интеграции сборки, тестирования, развертывания.

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

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

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

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

NG6-стартер

angular2-WebPack-стартер

семя угловое-2

3

Источник

user1015648 14 дек '15 в 16:49

Почему происходит эта ошибка?

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

1

Источник

user390330 16 июн '15 в 03:44

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

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

1

Источник

user1059101 16 июн '15 в 06:41

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

1

Источник

user461099 14 дек '15 в 14:33

Тем, кто сталкивается с этой проблемой в "проектах 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>

1

Источник

user291301 17 окт '15 в 06:59

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

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

0

Источник

user6076774 23 мар '16 в 09:11

Оформите мой пример решения MVC5 + Angular2 (Beta1 & TypeScript) VS2015: https://github.com/hobe/angular2mvc5

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

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

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

0

Источник

user2001739 26 янв '16 в 19:14

Другие вопросы по тегам angular typescript

user3343385 16 июн '15 в 04:10 2015-06-16 04:10 · Accepted Answer · 2015-06-16 04:10

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

<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
<script src="https://jspm.io/system@0.16.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.26/angular2.dev.js"></script>

Источник: Angular.io: 5-минутный быстрый старт