Question

我使用angular-cli设置了角度2项目，它对我有效。有没有办法将这个项目添加到visual studio的asp.net核心

Answer 1

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

这很合适，因为src用于客户端应用程序，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构建输出设置为wwwroot。然后，您必须配置npm任务绑定，以使cli构建与asp构建一起运行，并使用另一个测试任务。这将允许您在构建服务器上使用cli项目（但您仍然必须将构建服务器配置为具有npm和节点，以按照其GitHub页面上描述的方式更新cli全局和本地程序包。为了能够在调试中并行运行调试项目，您可能需要在开发期间手动执行ng服务并为asp应用程序设置CORS，因为ng服务将在不同的地址运行。您可以使用环境检查在asp配置中使用CORS的条件启用。

Answer 4

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

1-使用angular-cli（ng new your-app-name）或从Git克隆您的网络包。

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

3-找到.angular-cli.json并编辑＆＃34; outDir＆＃34;。您需要输入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目录或项目，然后使用此命令将角度发布到MVC wwwroot / app目录中。

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

ng build --dev

和此命令以相关模式发布您的应用

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

6-在MVC控制器中创建一个Action。我创建了一个名为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来托管您的角度应用。

为避免使用我创建2 .bat文件的命令

1 - DebugBuild.bat

%cd%
ng build --dev

2 - ReleaseBuild.bat

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

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

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

4 个答案: