如何在 Visual Studio 2015 中使用 Angular-Cli 和 ASP.NET Core 设置 asp.net angular 2 项目？

Question

我使用 angular-cli 设置了 angular 2 项目，它对我很有效。有什么方法可以将此项目添加到 Visual Studio 中的 asp.net 核心

Answer 1

我会将 Angular 2 项目移动到 ASP.NET Core 项目的根目录中，然后将 Angular 项目的 src 文件夹的内容移动到 wwwroot - 并重命名对 src 文件夹的任何引用。

这很好地结合在一起，因为wwwroot 用于客户端应用程序，而 Angular 2 正是如此。

Answer 2

2017-06-16 现在这个场景中的玩家已经成熟，我最喜欢的设置解决方案是 Rick Strahl 的 AlbumViewer 应用程序。他将它用作他的大量博客文章的样本，这些文章介绍了这两种技术的持续发展。这是迄今为止最干净、适应性最强的解决方案。它使用 Angular cli 工具（构建在 Webpack 之上）来运行所有开发和生产工作流程。

开发是在解决方案中的一个单独的网站项目中完成的，生产构建过程将 Angular dist 文件夹的内容复制到 wwwroot 以进行最终的生产构建。干净、简单且易于理解。

这是迄今为止我看到的关于这个问题的最佳答案。 Combine angular-cli with asp.net core

从我对该主题所做的研究来看，两者在同一环境中相互发展并不容易。

Answer 3

我认为您必须将 cli 项目放在 asp 项目的根目录中，然后将 cli build 输出设置为 wwwroot。然后，您必须配置 npm 任务绑定以使 cli build 与 asp build 一起运行，并使用其他任务进行测试。这将允许您在构建服务器上使用 cli 项目（但您仍然必须将构建服务器配置为具有 npm 和节点，以按照其 GitHub 页面上描述的方式更新 cli 全局和本地包。 为了能够在调试中与 asp 调试并排运行项目，您可能需要在开发期间手动 ng serve 并为 asp 应用程序设置 CORS，因为 ng serve 将在不同的地址上运行。您可以使用环境检查在 asp 配置中使用条件启用 CORS。

Answer 4

我将 Angular2 应用程序与我的 asp.net MVC 核心 Web 应用程序分开。如果你愿意，你可以将它们放在你的 MVC 应用程序中，这是你个人的决定是否将它们分开，这个解决方案适用于 angular-cli 或 web-pack。

1- 使用 angular-cli(ng new your-app-name) 或从 Git 克隆您的 web-pack。

2- 在您的解决方案上创建一个新的类库，或者您可以在现有的 ASP.Net MVC Core 项目中创建一个文件夹。然后复制上一步下载的所有文件。

3- 找到 .angular-cli.json 并编辑“outDir”。您需要输入您的 MVC Core wwwroot 文件夹。

"apps": [
    {
      "root": "src",
      "outDir": "../Web.UI/wwwroot/app" //!if you separated your angular app from your MVC project,
      "outDir": "../wwwroot/app" //!if you have your angular and mvc app in a same project,
      "assets": [
        "assets"
      ],
      "index": "index.html",
      "main": "main.candidate.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app_andidate",
      "styles": [ "share/css/material.scss" ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
}

4- 打开一个命令并进入您的 Angular 目录或项目，并使用此命令将您的 Angular 发布到 MVC wwwroot/app 目录。

5- 您可以使用此命令在调试模式下发布您的应用。

ng build --dev

以及此命令以发布模式发布您的应用

ng build --output-hashing none --prod --aot 

6- 在你的 MVC 控制器中创建一个动作。 我创建了一个名为 AppController 的控制器，我的 views/App/Index.cshtml 是这样的。

@section Heads{
    <base href="/App/Index/">
}
@section Scripts{
    <script type="text/javascript" src="/app/inline.bundle.js"></script>
    <script type="text/javascript" src="/app/polyfills.bundle.js"></script>
    <script type="text/javascript" src="/app/vendor.bundle.js"></script>
    <script type="text/javascript" src="/app/main.bundle.js"></script>
}
<app-root>Loading...</app-root>

如果需要，您可以使用您的 views/Home/Index.html 来托管您的 Angular 应用程序。

为了避免使用命令，我创建了 2 个 .bat 文件

1 - DebugBuild.bat

%cd%
ng build --dev

2 - ReleaseBuild.bat

%cd%
ng build --output-hashing none --prod --aot

现在您可以简单地对 .bat 文件进行 dbclick 来发布您的 Angular 应用程序。 您还可以使用 ng serve 或 npm start 命令从 angular 目录运行 Angular 应用程序。