Настройка проекта ASP.NET MVC 4 или 5 с помощью Angular 2

Я изучаю angular 2 с Typescript.

Я использую следующий ресурс. QuickStart с angular 2

Теперь оттуда и другие примеры я обнаружил, что они говорят создать файл package.json, в котором перечислены все зависимости для проекта.

Я думаю, что создание этого файла package.json и перечисление всех пакетов зависимостей, этот вид структуры выполняется в проекте .NetCore.

В MVC 4 или 5 у нас есть файл packages.config, в котором перечислены пакеты, которые мы будем использовать.

Я не говорю, что мы не можем использовать файл package.json, когда у нас есть файл package.config.

Но есть ли простой способ интегрировать angular 2 с typescript в проект MVC Webapplication с использованием пакетов NUGet и начать?

Если не доступно, пожалуйста, дайте мне знать, как я могу настроить angular 2 с типом script в ASP.Net MVC 4 или 5?

Ответ 1

Как вы сказали, в приложении ASP.NET MVC у вас есть файл package.config. В этом файле содержится информация о пакетах NuGet, которые вы установили в своем приложении. Этот файл связан с пакетами на стороне сервера.

Файл

package.json связан с интерфейсной частью вашего приложения. Он также содержит список пакетов, которые вы установили в своем приложении. На этот раз npm пакеты. Он также содержит информацию о вашем приложении и многое другое. Вы можете прочитать об этом здесь.

Вы не можете смешивать эти файлы и не хотите. Во-первых, эти файлы имеют разный формат (XML и JSON). Кроме того, как я уже говорил, они содержат информацию о различных частях вашего приложения. Наконец, и это мое личное мнение, когда вы создаете приложение с богатым пользовательским интерфейсом и используете Angular2, было бы лучше разделить части вашего приложения на 2 разных проекта. Один из них - с веб-интерфейсами, а второй - с частью пользовательского интерфейса. В такой структуре вам не понадобится packages.config в проекте пользовательского интерфейса и не требуется package.json в проекте веб-API.

Для последнего вопроса вы можете начать с здесь. Вы также можете посмотреть это примерное приложение.

Ответ 2

Чтобы запустить Angular 2 в ASP.NET MVC 4.5 (VS 2015):

1) установите Node.js(не менее 4.4.x), npm (не менее 3.x.x) и TypeScript для Visual Studio 2015 (VS → Инструменты → Расширения и обновления → В сети). Вы можете проверить свою версию node и npm, запустив в терминале следующее: "node -v" и "npm -v".

2) скопируйте файлы QuickStart (все, что заставляет quickstart-master, а не сама папка) в ваш проект (в папку, содержащую файл .csproj) - вы можете загрузить файлы QuickStart из: https://github.com/angular/quickstart

3) В обозревателе решений нажмите "показать все файлы" (возможно, третий значок справа, чуть выше строки поиска). Выберите следующие файлы/папки и включите их в проект:

папка приложения (ответ Нет, если его попросят найти TypeScript Типики)
styles.css
index.html
package.json
tsconfig.json
typings.json

4) В Visual Studio щелкните правой кнопкой мыши на "package.json" и выберите "Restore Packages" - это установит все пакеты, определенные в package.json, в ваш проект.

Результат этой операции такой же, как запуск "npm install" в вашем местоположении проекта из терминала.

Вероятно, в окне "Вывод" появятся некоторые предупреждения - проигнорируйте их. Будет создана новая папка с именем "node_modules" (вам нужно обновить обозреватель решений, чтобы увидеть ее). Совет не должен включать эту папку в проект.

5) В файле tsconfig.json рядом с "compilerOptions" добавьте следующее:

"compileOnSave": true

как показано ниже

{
  "compilerOptions": {
    ...
  },
  "compileOnSave": true
}

Перезапустить Visual Studio.

6) В Visual Studio щелкните правой кнопкой мыши на "index.html" и нажмите "Установить как стартовую страницу".

В качестве справочной информации здесь приведена официальная документация для запуска Angular2 (быстрый запуск) в ASP.NET 4.x(Visual Studio 2015): https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html

Ответ 3

Также проверьте ссылку, которая включает шаги для запуска.

Вам нужно включить package.json(Angular 2 устанавливается с помощью NPM)
Запустите установку NPM
Запустите задачи GULP
Запустите F5, чтобы увидеть результаты.

https://github.com/mithunvp/ng2Mvc5Demo

Как уже было принято, это будет альтернативный способ начать работу

Ответ 4

Если вы хотите установить Angular4 в консоль менеджера пакетов nuget, вы можете использовать Install-Package Angular4 -Version 1.1.0 и выполните следующие действия:

Angular 4
*********

Prerequisites
`````````````
1. Download and Install Node js
2. Install Visual studio 2015 update 3 or above
3. Download and Install TypeScript 2.6.1 for Visual Studio 2015 (https://www.typescriptlang.org/#download-links)

Follow the steps to install package.
````````````````````````````````````
1. Create an new project with empty template and include dependencies for MVC and WebApi to the project
2. Install the package using command 'Install-Package Angular4 -Version 1.1.0'

Follow the steps after package installation
```````````````````````````````````````````
1. Open Node.js Command Prompt
2. Navigate to project location(use commands such as pushd,cd etc)
3. Run the command 'npm install'