Visual Studio 2015, Typescript и angular2 с tsconfig.json

Я пробовал последнюю сборку Angular2 (2.0.0-alpha.44) вместе с Visual Studio 2015. Вот версии всего, что я использую, что имеет отношение к этой проблеме:

  • Визуальная студия 2015
  • Asp.NET 5
  • Машинопись 1.6
  • Решарпер 10
  • Угловой 2.0.0-альфа.44

Вот мое решение:

обозреватель решений

Весь мой машинописный текст находится в каталоге /Ts, в котором также есть файл tsconfig.json. Это заставляет Visual Studio отображать «виртуальный проект машинописного текста».

tsconfig.json решение с виртуальным проектом ts

Как только я помещаю строку import {Component, bootstrap} from "angular2/angular2"; в мой main.ts, он находит файлы библиотеки angular2 в моем каталоге node_modules и также отображает их (хотя я не уверен, что такое плоская структура каталогов)

предупреждение ts resharper

На этом этапе компилятор машинописного текста скомпилирует этот единственный файл (main.ts). Однако он больше не компилирует какие-либо другие файлы .ts в этой папке (что было до добавления angular2) и не помещает выходные данные в указанное outFile расположение из моего tsconfig.json.

Resharper указывает, что есть проблема с поиском ссылок Component и bootstrap, но всплывающая подсказка, похоже, также понимает, что это за сигнатуры. Не уверен, как оба могут быть правдой.

Если я уберу angular2 из уравнения, машинописный текст с радостью выполнит все настройки в моем tsconfig.json, скомпилирует все файлы .ts в app.js и поместит его в ../wwwroot/js/app.js

предупреждение ts resharper с всплывающей подсказкой

Кому-нибудь удалось заставить VS2015, typescript и angular2 хорошо работать вместе?


typescript angular tsconfig visual-studio-2015
person Twicetimes    schedule 04.11.2015    source источник
comment
Большая всплывающая подсказка, которую вы показываете, на самом деле представляет собой комбинацию всплывающей подсказки Resharper (символ «Компонент» не может быть...) и всплывающей подсказки VS. VS успешно нашел файл. R# жалуется. Вы можете проверить это, отключив R#   -  person nickspoon    schedule 27.01.2016

Ответы (3)


arrow_upward
2
arrow_downward

Из Руководства по TypeScript:

В TypeScript, как и в ECMAScript 2015, любой файл, содержащий импорт или экспорт верхнего уровня, считается модулем.

и

Точно так же, как между JS-файлами и модулями существует однозначное соответствие, TypeScript имеет взаимно-однозначное соответствие между исходными файлами модулей и их созданными JS-файлами. Одним из последствий этого является то, что невозможно использовать параметр компилятора --outFile для объединения нескольких исходных файлов модулей в один файл JavaScript.

Я считаю, что это причина, по которой у вас есть вывод, когда вы «удаляете angular2 из уравнения». Модули и outFile несовместимы. Вместо этого используйте outDir.

Кроме того, я попытался поместить файл tsconfig в подпапку, но Visual Studio не приняла его во внимание, поэтому я переместил его обратно в корень проекта.

person Hristo    schedule 10.11.2015
comment
Спасибо, @Христо. Это одна из многих вещей, которые я понял из множества разрозненных руководств/образцов. Мне не пришло в голову просто прочитать руководство по Typescript :) - person Twicetimes; 10.11.2015
comment
Typescript 1.8.10, кажется, отлично работает с --outfile, но только когда мой tsconfig находится на корневом уровне проекта. - person ps2goat; 18.05.2016
comment
Похоже, что TypeScript значительно изменился с тех пор, как был написан текст, приведенный выше. По состоянию на 2016 год это предложение неверно. Совершенно определенно возможно и используется в дикой природе в масштабе, чтобы написать код TypeScript на основе модуля, а затем вывести один файл, используя параметр компоновки системного пакета. - person Kyle Cordes; 29.05.2016

arrow_upward
1
arrow_downward

Уже пару недель пытаюсь. Кажется, что файлы d.ts все еще неверны. Если вы заметили, файлы определений все еще находятся в альфа-версии 38 или 39.

Даже если бы файлы определений не были в альфа-версии 38 или 39 и были созданы из правильной версии, я все равно не думаю, что вы могли бы заставить их работать, поскольку они никоим образом не имеют формы или формы, и в них по-прежнему отсутствует куча вещей я верю.

Ошибку, которую вы получаете, я еще не видел, и я не использую resharper (хотя я не думаю, что это действительно должно вызывать ваши проблемы). Что я могу сказать, так это то, что я добился успеха с альфой 26, найденной здесь:

https://github.com/microsoft/ngconf2015demo

Это, вероятно, не поможет вам, так как это такая ранняя альфа-версия.

Кроме того, в более новых альфа-версиях они начали создавать UpdateAdapter, и пример можно найти здесь:

http://blog.thoughtram.io/angular/2015/10/24/upgrading-apps-to-angular-2-using-ngupgrade.html

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

Я тоже не могу заставить это работать (хотя это супер новая альфа-сборка). Файлов определений по-прежнему всего 39, и между ними есть некоторое несоответствие. Даже если я импортирую весь его проект как есть, будет много отсутствующих ссылок и экспортов. С этим мало что можно сделать, кроме как попытаться изменить файлы d.ts самостоятельно, чтобы устранить ошибки сборки.

Кроме того, я считаю, что модульные системы должны быть установлены на AMD. Это поможет вам приблизиться к победе над ошибками времени компиляции. Кроме того, в визуальной студии вам нужно установить стандарт на es5, я полагаю, чтобы запустить angular2 в данный момент (но я не уверен, это были только шаги, которые я использовал, чтобы запустить пример alpha 26).

Я все еще стараюсь каждый день на работе, поэтому, если я смогу запустить его (что я не думаю, что смогу сделать, не погрузившись в кодовую базу angular2 и не изучив ее, что я мог бы сделать в следующем пару недель), я отредактирую этот ответ и дам вам знать. А пока продолжайте подключаться и посмотрите, сможете ли вы заставить его работать, и дайте мне знать!

На мой взгляд, внедрение angular2 должно произойти как можно скорее для всех лидеров отрасли, поскольку преимущества использования angular2 не могут быть выражены достаточно. К сожалению, поскольку многие директивы, которые абсолютно необходимы в любом приложении, все еще используют angular 1.4, UpgradeAdapter (ngUpgrade) необходимо использовать, прежде чем angular2 будет полезен с точки зрения бизнеса.

Редактировать:

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

person Magn3s1um    schedule 06.11.2015
comment
Сейчас мне больше повезло с компиляцией, но результаты, похоже, различаются в зависимости от того, позволяю ли я это делать Visual Studio или настраиваю свои собственные задачи gulp для вызова tsc вручную. Visual Studio, похоже, не учитывает все возможные настройки tsconfig.json. Что касается вещей angular2, я думаю, что отчасти это было из-за моего непонимания того, как работают модули и файлы определений, с всплеском, ну, это все еще в альфа-версии, разберитесь с этим. Как вы упомянули в своем редактировании - файлы .d.ts теперь связаны с angular2 - похоже, что для некоторых библиотек может быть тенденция отходить от репозитория определенноTyped - person Twicetimes; 07.11.2015

arrow_upward
0
arrow_downward

Настройка ASP.Net 5 с angular 2.0 выполните все шаги, как на странице. Это сработало для меня.

Чтобы скомпилировать файл all.ts в .js независимо от того, работает ли сервер.

Откройте PowerShell -> перенаправьте в корневую папку проекта и введите «tsc». Он скомпилирует все файлы.

Если вы хотите скомпилировать весь файл .js при сохранении/обновлении файла .ts, введите «tsc--watch» в PowerShell и не закрывайте его.

Вы должны установить Node.

Создайте следующий файл, и данные должны быть такими же, как из краткого запуска Angualr.

tsconfig.json
typings.json
package.json

Подключаемый модуль Visual Studio для открытия корневой папки проекта в CMD или PowerShell< /а>

person Anand    schedule 08.04.2016
comment
Да, я добился гораздо большего успеха с тех пор, как он перешел в бета-версию. Теперь намного проще. - person Twicetimes; 09.04.2016