带angular-cli的ASP.NET WebApi
我有一个纯ASP.NET核心项目(MVC5，而不是.NET核心)，我想把它和angular-cli结合起来。Angular-cli项目位于WebApi项目之外的单独目录中。ng build命令将所有脚本放入WebApiProject/App。我想保持WebApiProject作为一个纯WebApi (只有WebApiControllers-没有MVC控制器)。内容、脚本和布局只能在由angular-cli创建的/App目录中。
问:当从/app/index.html访问http://localhost:5000显示文件以及/app中所有引用的脚本都正常工作时，如何使其工作。
简单的例子：
WebApiProject(without MVC controllers)
--Controllers
----ValuesController
--web.config
--App
----index.html <script src="main.js" /> //src address cannot be changed, it is generated by angular-cli
----main.js回答 2
Stack Overflow用户
发布于 2018-05-19 01:54:15
在你的mvc应用中创建一个子目录，比如"Angular5“。
使用ng命令在"Angular5“子文件夹中创建您的angular应用程序。
在.angular-ci.json文件中，将输出目录编辑为类似于“outDir”的内容：“../MyDistFiles”这将把您的分布式文件放在"Angular5“源文件目录之外。不要使用mvc应用程序的主文件夹作为输出"../“，否则angular cli将删除所有没有撤消功能的mvc应用程序文件，因此请确保使用子目录。
选项1:在源文件中，将Index.html更改为
<base href="/MyDistFiles/">如果您的应用程序将在混合移动应用程序中，如果用户无法在您的页面上选择刷新，则此方法可以正常工作，但如果在浏览器中，如果用户点击刷新，则会得到404。
选项2:创建一个带有简单空白Index视图的空白MVC控制器。Call类似于MyAngularController.cs
您可以使用条件编译来使用--prod build而不是debug。prod版本的大小是调试版本的1/10，因此值得使用。
在web项目生成属性中，选择release配置。添加一个名为PROD的条件编译符号。
public ActionResult Index()
{
#if PROD
ViewBag.IsProd = true;
#endif
#if !PROD
ViewBag.IsProd = false;
#endif
return View();
}在RouteConfig.cs中，将此代码添加到顶部(而不是底部)
RegisterRoutes.
routes.MapRoute(
"Catch All",
"MyDistFiles/{*url}",
new { controller = "MyAngular", action = "Index", id = UrlParameter.Optional });在MyAngularController的index.cshtml中使用这个。
@{
Layout = null;
}
@if (ViewBag.IsProd)
{
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ClientApp</title>
<base href="~/MyDistFiles/">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="styles.bundle.css?@ConfigSettings.AppVersion" rel="stylesheet" />
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.bundle.js?@ConfigSettings.AppVersion"></script>
<script type="text/javascript" src="polyfills.bundle.js?@ConfigSettings.AppVersion"></script>
<script type="text/javascript" src="main.bundle.js?@ConfigSettings.AppVersion"></script>
</body>
</html>
}
@if (!ViewBag.IsProd)
{
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ClientApp</title>
<base href="~/MyDistFiles/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>
}现在，您可以导航到http://localhost:port/MyDistFiles并使用angular应用程序导航，选择f5，然后一切都会重新加载。
当你使用angular cli进行prod构建时，默认情况下，它会向文件名添加一个哈希，使它们始终不同，以进行缓存控制。您可以使用以下命令省略此哈希操作
ng build --prod -oh您将注意到，在cshtml的prod版本中，我将应用程序版本id附加到javascript和css文件中。我这样做是为了防止在浏览器中缓存旧版本。在应用程序属性/程序集信息/程序集版本中，您可以使用内部版本号，如1.0.*.这将在您每次重建时创建一个新的内部版本号。
ConfigSettings.cs类中的方法是
public static string AppVersion
{
get
{
if (string.IsNullOrEmpty(appVersion))
{
appVersion = System.Reflection.Assembly.GetExecutingAssembly()
.GetName()
.Version
.ToString();
}
return appVersion;
}
}我喜欢使用ng服务的特性，因为当你在你的angular应用上工作时，你可以很容易地在几秒钟内看到你的更改，而不是每次都要等待完整的重建。不幸的是，如果您没有使用CORS应用程序，但可能是表单身份验证，那么您将无法从另一个端口号访问您的web api方法。解决此问题的方法是在Angular5目录中打开命令提示符CD。
运行命令ng build --watch。除了自动刷新浏览器之外，--watch将执行与ng serve相同的操作，但是选择保存您的文件，然后在浏览器上执行f5会更快、更高效，因为几秒钟后它会重建得如此之快。
您可以在Application/Properties/Build Events中设置一个构建后命令，这样在进行prod发布时就不会忘记构建您的angular
cd "$(SolutionDir)MyMVCApp\Angular5"
if $(ConfigurationName) == Release (
ng build --prod -oh
) ELSE (
ng build
)Stack Overflow用户
发布于 2017-03-31 04:27:07
如果您从IIS为Web API提供服务，那么也从IIS为Angular应用程序提供服务是有意义的。您可以使用单独的MVC应用程序进行添加，或者将MVC控制器添加到您的Web API应用程序中。
请在此处查看详细的解决方案：https://stackoverflow.com/a/43127291/3787891
Assaf
https://stackoverflow.com/questions/42805304
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号