4

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

4

4 回答 4

6

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

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

于 2016-06-23T10:46:25.033 回答
2

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

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

这是迄今为止我看到的这个问题的最佳答案。 将 angular-cli 与 asp.net 核心相结合

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

于 2016-08-15T16:42:13.977 回答
0

我将 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 文件来发布你的 Angular 应用程序。您还可以使用 ng serve 或 npm start 命令从 angular 目录运行 Angular 应用程序。

于 2017-04-12T11:10:31.720 回答
0

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

于 2016-11-11T16:14:30.070 回答