Question

我创建了一个与ASP.NET集成并由IIS提供服务的Angular2应用程序。此应用程序将由多个客户端使用，他们希望能够自定义应用程序的外观以适应其品牌。我正在使用ASP.NET MVC5框架的某些方面来实现这一点。

应用程序在大多数情况下都按预期工作，但我有两个利用cli的绊脚石，我似乎无法弄清楚。

以下是应用程序的基本文件夹结构（还有其他文件和目录，但我将其排除在外，因为我认为它们与问题无关）：

Solution.sln
Web
  Controllers
  dist
  Models
  src
  Views
    Shared
      _Layout.cshtml
  .angular-cli.json
  package.json
  Web.config
  Global.asax

我对.angular-cli.json文件进行的唯一相关更新是我将{ apps: { index: '' } }值更改为"../Views/Shared/_Layout.cshtml"而非默认"index.html"。

当我从ng build目录中运行Web时，应用程序将在关闭{{1}之前编译并在script文件中放置正确的_Layout.cshtml标记标签符合预期。

我不确定这些问题是否源于相同的根本原因。我认为他们这样做是为什么我把两者放在这里，但如果他们似乎是单独的问题，我可以将它们分开。

第1期 如果我多次运行body，它不会按预期删除并替换它在ng build文件中创建的script标记，而是在结束之前继续附加新的脚本标记{ {1}}标记。因此，如果我在开发模式下运行_Layout.cshtml两次，我会在文件中获得相同的body个标记集两次。

关于我需要更改哪些内容才能从ng build获取预期功能的任何想法？

第2期 现在，当我运行script时，构建似乎最终处于无限循环中。它继续一遍又一遍地打包资产。

关于可能导致无限循环的原因以及如何使ng build能够正常使用此设置的任何想法？

我在ng build --watch文件中没有遇到这些问题，但不幸的是，我需要使用ng build --watch文件作为我的索引文件。我可以创建一个自定义index.html npm任务来清理脚本标记，但似乎不应该这样做。我还没有找到解决手表任务问题的方法。

更新我怀疑这与它是_Layout.cshtml文件这一事实无关，而是由于prebuild位置在src文件夹之外的事实。

重现的步骤：

*.cshtml
apps/index
将npm install @angular/cli移至node_modules/.bin/ng new test-custom-index
更新test-custom-index/src/index.html所以索引属性为test-custom-index/index.html而不是“index”：“index.html”
从.angular-cli.json目录连续两次运行"index": "../index.html"，您将在test-custom-index文件中看到重复的脚本条目。或者运行node_modules/.bin/ng build并观察它是否陷入无限循环。

非常感谢任何帮助!!!

Answer 1

我通过使角度索引页面成为局部并加载到剃刀布局中来解决这个问题。

在cli配置中：

"index": "index.cshtml",

但该文件实际上是空白的。然后，在使用您想要的布局的剃刀文件中：

@section scripts
{
    <base href="~/">
    @Html.Partial("~/js/dist/index.cshtml")
}

您也可以将该部分直接放入布局中。唯一的问题是，如果index.cshtml位于View文件夹之外，则需要将其从MvcWebPage继承，最简单的方法是从View复制web.config文件将文件夹放入index.cshtml文件中的文件夹中。

Answer 2

目前，如果其他人遇到同样的问题，我还有一份工作要跟我分享。

我仍然想知道是否有更好的方法可以解决这个问题，因为它对我来说似乎有点笨拙。

在与src目录相同的级别，我创建了一个build目录。在其中，我有两个文件：

<强> prebuild.js

var fs = require('fs');
var path = require('path');
var inputFilePath = path.join(__dirname, '../Views/Shared/_Layout.cshtml');
var outputFilePath = path.join(__dirname, '../src/_Layout.cshtml');

fs.readFile(inputFilePath, 'utf8', function (err,data) {
  if (err) {
    return console.log(err);
  }
  var result = data.replace(/<\/app-faculty-profile>[\s\S]*<\/body>/g, '</app-faculty-profile>\n\r</body>');

  fs.writeFile(outputFilePath, result, 'utf8', function (err) {
     if (err) return console.log(err);
  });
});

<强> postbuild.js

var fs = require('fs');
var path = require('path');
var inputFilePath = path.join(__dirname, '../dist/_Layout.cshtml');
var outputFilePath = path.join(__dirname, '../Views/Shared/_Layout.cshtml');

fs.readFile(inputFilePath, 'utf8', function (err,data) {
  if (err) {
    return console.log(err);
  }

  fs.writeFile(outputFilePath, data, 'utf8', function (err) {
     if (err) return console.log(err);
  });
});

然后在我的package.json文件中添加了一些脚本：

"ng": "ng",
"prebuild": "node build/prebuild.js",
"build": "ng build",
"postbuild": "node build/postbuild.js",
"watch": "npm run build && ng build --watch"

现在，当我从命令行运行npm run watch时，它将执行build脚本。按照惯例，npm脚本将在执行prebuild脚本和build脚本之后运行postbuild。 prebuild脚本从中删除脚本标记，然后将_Layout.cshtml文件复制到src目录中。然后postbuild脚本将_Layout.cshtml文件复制回ASP.NET期望它所在的位置。在所有这些之后，npm脚本使用{启动ng build命令。 {1}}标志。这会迫使角度构建过程在手表实际生效之前执行两次，但这是我迄今为止能够使其工作的唯一方式。

Answer 3

@user917170

<块引用>

唯一的问题是如果 index.cshtml 位于外面您需要使其从 MvcWebPage 继承的 View 文件夹，以及最简单的方法是从您的视图中复制 web.config 文件文件夹从 index.cshtml 文件上移到一个文件夹。

你可以在 index.cshtml 中添加一行：

@inherits System.Web.Mvc.WebViewPage

如何使用自定义index.html位置配置Angular2？

3 个答案: