Как я могу получить angular2 для работы в Visual Studio 2015 с помощью TypeScript?

Я пытаюсь получить Angular 2 для работы в Visual Studio 2015 с Typescript. Я пытаюсь получить самый простой пример для работы в веб-проекте типа MVC 5 (web.config вместо config.json):

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

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
class AppComponent { }
bootstrap(AppComponent);

Я пробую самые минимальные вещи, необходимые для выполнения этой работы. Поэтому я загрузил последний Angular 2 (alpha.45) и скопировал все Typescript в загруженной папке modules. Включая все подпапки ( минус docs и examples).

Я уверен, что это будет работать за пределами Visual Studio, как я это делал раньше, но я пытаюсь заставить его работать в Visual Studio, и он дает мне более 3000 ошибок, и похоже, что это потому, что Мне не хватает других модулей или чего-то еще.

Вот несколько вещей, которые мне не хватает:

Карта (default_keyvalue_differ.ts и многие другие):

export class DefaultKeyValueDiffer implements KeyValueDiffer {
  private _records: Map<any, any> = new Map();

assert (lexer.ts):

  scanCharacter(start: number, code: number): Token {
    assert(this.peek == code);

Установить (command_compiler.ts):

function removeKeyValueArrayDuplicates(keyValueArray: string[]): string[] {
  var knownPairs = new Set();

начинается с (shadow_css.ts)

rule.selector.startsWith('@page')

требуется (parse5_adapter.ts)

var parse5 = require('parse5/index');

@reactivex/rxjs/dist/cjs/Rx (async.ts)

export {Subject} from '@reactivex/rxjs/dist/cjs/Rx';

Существует гораздо больше. Поэтому мой первый вопрос: действительно ли мне нужно все это, или некоторые из них не требуются. 2-й и, что более важно, как мне получить Visual Studio для создания моего решения?

Примечание. Я думаю, что этот "очень длинный пример/учебник" - это то, что я искал, за исключением того, что он предназначен для MVC 6 (.NET Core) вместо MVC 5: http://chsakell.com/2016/01/01/cross-platform-single-page-applications-with-asp-net-5-angular-2-typescript/

Ответы

Ответ 1

Я знаю, что SO не увлекается вставкой ссылок на материал, но это довольно большой учебник для подражания, чтобы просто скопировать туда сюда... и все его биты имеют значение для ответа на вопрос. В любом случае, здесь учебник, предоставленный командой Angular 2, чтобы получить NG2, работающий в Visual Studio MVC 5:

https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html

Ответ 2

Я предполагаю, что у вас есть проблема со старой версией npm, которая использует Visual Studio 2015. Я рекомендую вам открыть окно вывода Visual Studio и выбрать "Показать вывод" с "Bower/npm". На следующем рисунке вы увидите что-то вроде:

введите описание изображения здесь

Самая импортированная строка вывода длинна и разрезана. Я включаю его в сепареты:

npm ERR! команда "C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\\ node\node" "C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Инструменты\Внешний\npm\node_modules\npm\bin\npm-cli.js" "установить"

Другими словами, важно понимать, что Visual Studio 2015 использует некоторые инструменты, включая npm из каталога C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External. Angular2 имеют пакет зависимостей reactivex/rxjs, для которого требуется "npm":"~2.0.0", но Visual Studio вместо этого использует старую версию 1.4.9 (вы можете проверить version of "C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm\node_modules\npm\package.json"). Даже если вы установили последнюю версию Nodejs и npm, это не поможет, потому что Visual Studio 2015 будет использовать ту же старую версию npm.

Чтобы устранить проблему, я предлагаю вам сделать следующее:

  • установите последнюю версию NodeJ. Вы можете скачать его из https://nodejs.org/en/. Если вы предпочитаете использовать x64-версию, я рекомендую вам проверить, что вы уже установили x86 в C:\Program Files (x86)\nodejs. Если версия x86 существует, удалите ее перед началом установки x64-версии. После этого вы можете установить Nodejs. Сегодня это будет NodeJs 5.0.0 от node-v5.0.0-x64.msi.
  • тогда вы можете запустить Command Prompt в режиме администратора (это не mandotory) и использовать npm update -g для обновления npm или использовать npm install -g [email protected] для установки последней версии. Я рекомендую вам использовать npm -v до и после установки, чтобы убедиться, что вы устанавливаете последнюю версию. Сегодня это версия 3.3.12. В зависимости от того, как вы установили/обновили npm, вы можете установить его либо в C:\Program Files\nodejs\node_modules\npm, либо в %AppData%\npm (например, в директиве C:\Users\Oleg\AppData\Roaming\npm) или в обоих назначениях.
  • вы должны запустить текстовый редактор под правами администратора (например, меню "Пуск", поиск, введите notepad.exe и нажмите Ctrl+Shift+Enter)). После этого вы должны изменить файл C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm.cmd и установить в качестве содержимого что-то вроде @"C:\Program Files\nodejs\node.exe" "%AppData%\npm\node_modules\npm\bin\npm-cli.js" %* или @"C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" %*

После этого вы можете просто сохранить package.json, имеющий запись типа "angular2": "^2.0.0-alpha.45" в разделе "devDependencies" или "dependencies", и установка будет успешной. Вероятно, вы увидите только предупреждение, например

введите описание изображения здесь

потому что теперь вы используете "слишком хорошую" версию npm: версию 3.3.12 вместо некоторой версии 2.x.x (на основе правила "npm":"~2.0.0" пакета зависимостей reactivex/rxjs).

P.S. Вероятно, у вас есть другая ошибка, если вы используете MVC5 вместо предварительной версии MVC6 (ASP.NET 5), но основная проблема такая же. Вы должны установить новую версию node и npm и изменить C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm.cmd, чтобы использовать новую версию npm.

Ответ 3

Мой ответ для MVC6 (не видел, что MVC5 необходим)

Я рекомендую использовать стартовый шаблон. Я могу порекомендовать шаблон, который также использует HMR и Angular Universal (рендеринг на стороне сервера для SEO и более быстрая загрузка страниц):

https://github.com/aspnet/JavaScriptServices

Начало работы: http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/

Ответ 4

У меня это работало.

npm install. из папки node_modules удалите все папки, кроме angular2 и systemjs. в папке angular2 удалите все, кроме пучков. в папке bundles/typings удалите все, кроме angular2.

структура папки выглядит следующим образом:

node_modules
  -- angular2
     -- bundles
        -- typings
           --angular2
  -- systemjs