使用 Angular 2 设置 ASP.NET MVC 4 或 5 项目答案

【问题标题】：Setup ASP.NET MVC 4 or 5 project with Angular 2使用 Angular 2 设置 ASP.NET MVC 4 或 5 项目
【发布时间】：2016-07-12 11:52:08
【问题描述】：

我正在使用 Typescript 学习 Angular 2。

我正在使用以下资源。 QuickStart with Angular 2

现在从那里和其他示例中，我发现他们告诉创建 package.json 文件，其中列出了项目的所有依赖项。

我认为创建这个 package.json 文件并列出所有依赖包这种结构是在 .NetCore 项目中遵循的。

在 MVC 4 或 5 中，我们有 packages.config 文件，其中列出了我们将要使用的包。

我并不是说当我们有 package.config 文件时我们不能使用 package.json 文件。

但是有没有什么简单的方法可以使用 NUGet Packages 将 Angular 2 与 typescript 集成到 MVC Web 应用程序项目中并开始使用？

如果不可用，请告诉我如何在 ASP.Net MVC 4 或 5 中使用类型脚本设置 Angular 2？

【问题讨论】：

我建议您查看 VSCode 以了解 Angular 2 方面的内容。如果只是由于不断的发布节奏，它会更快，而且长期使用 Angular 2 会更好。你已经可以看到使用 React 的改进。在您甚至需要打开 VS 来构建您的后端之前，您就可以深入了解您的客户端开发。
好吧，我在这里为 Angular 2 和 ASP.NET MVC 找到了一个很好的开始。目前我们的项目正在从 Angular 1 迁移到 Angular 2，对于我们如何设置项目结构有同样的问题。 mithunvp.com/using-angular-2-asp-net-mvc-5-visual-studio

标签： asp.net-mvc asp.net-mvc-4 angular

【解决方案1】：

正如您所说，在 ASP.NET MVC 应用程序中，您有一个 package.config 文件。此文件包含有关已在应用中安装的 NuGet 包的信息。该文件与服务端包相关。

package.json 文件与您应用的前端部分相关。它还包含您在应用程序中安装的软件包列表。这次是npm 包。它还包含有关您的应用程序等的信息。你可以阅读更多关于它的信息here。

您不能混合这些文件，也不想这样做。首先，这些文件具有不同的格式（XML 和 JSON）。此外，正如我之前所说，它们包含有关应用程序不同部分的信息。最后，这是我个人的看法，当您创建具有丰富 UI 的应用程序并使用 Angular2 时，最好将应用程序的各个部分拆分为 2 个不同的项目。其中一个带有 Web API，第二个带有 UI 部分。有了这样的结构，UI项目就不需要packages.config，Web API项目也不需要package.json。

最后一个问题，你可以从here开始。你也可以看看这个sample app。

【讨论】：

你是说我不能将 Angular 2 集成到 MVC 4 或 MVC 应用程序中？
这不是我要说的。当然你可以做到。我不喜欢这种方法，但你绝对可以做到。无论如何，如果您选择将 Angular2 集成到 ASP.NET MVC 中，您应该保留两个包文件。
是的，我已经知道了。您能否提供任何实施我的方法的示例或示例。这真的很有帮助。谢谢。

【解决方案2】：

为了在 ASP.NET MVC 4.5 (VS 2015) 中运行 Angular 2：

1) 安装 Node.js（至少 4.4.x）、npm（至少 3.x.x）和 TypeScript for Visual Studio 2015（VS -> 工具 -> 扩展和更新 -> 在线）。您可以通过在终端中运行以下命令来检查您的 node 和 npm 版本：“node -v”和“npm -v”。

2) 将 QuickStart 文件（quickstart-master 包含的所有内容，而不是文件夹本身）复制到您的项目中（复制到包含 .csproj 文件的文件夹中） - 您可以从以下位置下载 QuickStart 文件：https://github.com/angular/quickstart

3) 在解决方案资源管理器中单击“显示所有文件”（可能是右侧第三个图标，就在搜索栏上方）。选择以下文件/文件夹并将它们包含在项目中：

app 文件夹（如果要求搜索 TypeScript Typings，请回答否）
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”：真

如下图

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

重新启动 Visual Studio。

6) 在 Visual Studio 中，右键单击“index.html”并单击“设置为起始页”。

作为参考，这里是运行 Angular 的官方文档 ASP.NET 4.x (Visual Studio 2015) 中的 2（快速入门）： https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html

【讨论】：

可靠的答案！但是对于第 3 步，我不太清楚这是如何完成的。我在解决方案资源管理器中找不到 .csproj。另外我不知道如何将提取的 zip 中的所有文件复制到 .csproj 中。他们是为此的 cmd 命令吗？
@RyeGuy 你事先创建了一个 asp.net mvc 项目吗？在 VS15 中，您需要转到：文件 -> 新建 -> 项目 ->（在左侧）Web -> ASP.NET Web 应用程序（.NET Framework）。然后设置名称、模板（在下一个屏幕中；我使用 MVC）并单击 OK。要复制文件，您可以简单地使用文件资源管理器并像系统中的任何其他文件一样复制。
知道了。我想多了。谢谢！

【解决方案3】：

还可以查看包含运行步骤的链接。

您需要包含 package.json（Angular 2 使用 NPM 安装）
运行 NPM 安装
运行 GULP 任务
运行 F5 查看结果。

https://github.com/mithunvp/ng2Mvc5Demo

由于它已经被接受，它将成为另一种开始方式

【讨论】：

【解决方案4】：

如果您想在 nuget 包管理器控制台上安装 Angular4，您可以使用 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'

【讨论】：