Question

我正在使用Typescript学习角度2。

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

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

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

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

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

但是有没有简单的方法可以使用NUGet包在MVC Webapplication项目中将Angular 2与typescript集成并开始使用？

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

Answer 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。

Answer 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 - ＆gt;工具 - ＆gt;扩展和更新 - ＆gt;在线）。您可以通过在终端中运行以下命令来检查您的节点版本和npm：＆＃34; node -v＆＃34;和＆＃34; npm -v＆＃34;。

2）将QuickStart文件（quickstart-master constains，而不是文件夹本身）复制到项目中（包含.csproj文件的文件夹） - 您可以从以下网址下载QuickStart文件：https://github.com/angular/quickstart < / p>

3）在解决方案资源管理器中，单击＆＃34;显示所有文件＆＃34; （可能是右边的第三个图标，就在搜索栏的上方）。选择以下文件/文件夹并将其包含在项目中：

app文件夹（如果要求搜索TypeScript类型，请回答“否”）
styles.css的
的index.html
的package.json
tsconfig.json
typings.json

4）在Visual Studio中，右键单击＆＃34; package.json＆＃34;并选择＆＃34;恢复包＆＃34; - 这会将package.json中定义的所有包安装到您的项目中。

此操作的结果与运行＆＃34; npm install＆＃34;相同。在您的项目位置从终端。

可能会在“输出”窗口中出现一些警告 - 忽略它们。一个名为＆＃34; node_modules＆＃34;的新文件夹将生成（您需要刷新解决方案资源管理器才能看到它） - 建议不要在项目中包含此文件夹。

5）在tsconfig.json文件中，＆＃34; compilerOptions＆＃34;添加以下内容：

＆＃34; compileOnSave＆＃34;：true

如下图所示

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

重新启动Visual Studio。

6）在Visual Studio中，右键单击＆＃34; index.html＆＃34;然后单击＆＃34;设置为起始页＆＃34;。

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

Answer 3

另请查看包含要运行的步骤的链接。

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

https://github.com/mithunvp/ng2Mvc5Demo

由于它已被接受，它仍然是另一种开始的方式

Answer 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'

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

4 个答案: