Не удается найти внешний модуль «угловой2/угловой2» - Angular2 w/Typcript

Я читаю пошаговое руководство по угловому.io (Angular 2). Я использую машинопись. Я получаю следующее сообщение об ошибке при попытке компиляции:Не удается найти внешний модуль «угловой2/угловой2» - Angular2 w/Typcript

Cannot find external module 'angular2/angular2'

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

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 Почему это встречающаяся ошибка?

источник

2015-06-16 karns

Я после «Тура Heros» учебника по angular.io и я получаю сообщение об ошибке от 'tsc', но это не мешает коду компилировать и запускать приложение angular2. –

@karns FYI, начиная с *[email protected]* импорт 'angular2/angular2' был изменен на' angleular2/core', а функция бутстрапа была перенесена в 'angular2/platform/browser'. –

Добавление этих файлов в голове даст вам самую последнюю рабочую версию 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 Minute Quickstart

источник

2015-06-16 04:10:13 shmck

Ой, похоже, мне не хватает компилятора Traceur ... – karns

Это действительно решение. Пошаговое руководство является своего рода неопределенным в отношении того, что требуется ... – karns

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

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

источник

2015-06-16 03:44:44 basarat

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

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

источник

2015-06-16 06:41:27 Jai

Если tsdconfig.json используется для компилятора TypeScript, эта первая строка не нужна. – magiccrafter

машинописи Определение (ТСД) для 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

источник

2015-09-15 08:52:33 Dunken

'tsd' устарел, вместо этого используйте' typings' – SeriousM

Для тех, кто сталкивается с этим вопросом в «Визуальные проекты Студия Машинопись», то вам, возможно, потребуется сделать следующее, что нужно разрешить его.

Откройте .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>

источник

2015-10-17 06:59:12 Senthil

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

источник

2015-12-14 14:33:54 scottrudy

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

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

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

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

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

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

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

pre-compilation подходит для непрерывного процесса интеграции сборки, тестирования, развертывания.

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

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

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

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

NG6-starter

angular2-webpack-starter

angular-2 seed

источник

2015-12-14 16:49:50

Я не могу найти эти комментарии в текущей версии Quickstart. По-видимому, он был заменен следующим: мы рекомендуем переписывать (компиляцию AKA) на JavaScript во время фазы сборки до запуска приложения по нескольким причинам, включая: Мы видим предупреждения и ошибки компилятора, скрытые от нас в браузере. Предварительная компиляция упрощает процесс загрузки модуля .... --- и т. Д. Осталось только что загрузить из Интернета плохую идею, потому что кеш распадается. Интересно, что эта часть действительно верна? Кажется отдельным вопросом. – ckapilla

@ckapilla да, они обновили документы. –

После комментария @ ckapilla. Я бы рекомендовал * против * этого подхода. Если gulp настроен для объединения вывода, тогда вы будете транслировать * и * связывание кода каждый раз, когда хотите обновить страницу. Встроенная транспиляция работает лучше. Высокая загрузка (то есть, что использует угловое2-семя) намного лучше. –

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

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

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

также требует "Машинопись 1.7.6.0 для Visual Studio 2015 Update 1"

источник

2016-01-26 19:14:05

машинопись VS2015 проект

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

Я прав?

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

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

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

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

Raf.

источник

2016-02-05 17:06:35 Pirolla

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

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

источник

2016-03-23 09:11:17

/// –

Просьба привести пример кода –

Не удается найти внешний модуль «угловой2/угловой2» - Angular2 w/Typcript

ответ

Смежные вопросы