Fatal编程技术网
  • javascript/
  • Javascript 带有angular cli的ASP.NET WebApi

Javascript 带有angular cli的ASP.NET WebApi

javascript asp.net angularjs asp.net-web-api

Javascript 带有angular cli的ASP.NET WebApi,javascript,asp.net,angularjs,asp.net-web-api,angular-cli,Javascript,Asp.net,Angularjs,Asp.net Web Api,Angular Cli,我有一个纯ASP.NETWebAPI项目（MVC5，而不是.NETCore），我想将它与AngularCLI结合起来。Angular cli项目位于WebApi项目之外的单独目录中ng build命令将所有脚本放入WebApiProject/App。 我希望将WebApi项目保持为纯WebApi（仅限WebApi控制器-不含MVC控制器）。内容、脚本和布局应仅位于angular cli创建的/App目录中 问题：从/app/index.html访问shows文件时如何使其工作，并且/app中的所

我有一个纯ASP.NETWebAPI项目（MVC5，而不是.NETCore），我想将它与AngularCLI结合起来。Angular cli项目位于WebApi项目之外的单独目录中
ng build
命令将所有脚本放入
WebApiProject/App
。 我希望将WebApi项目保持为纯WebApi（仅限WebApi控制器-不含MVC控制器）。内容、脚本和布局应仅位于angular cli创建的
/App
目录中

问题：从
/app/index.html
访问shows文件时如何使其工作，并且
/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

WebAPI项目（不带MVC控制器）
--控制器
----值控制器
--web.config
--应用程序
----index.html//src地址无法更改，它是由angular cli生成的
----main.js
如果您是从IIS提供Web API，那么您也可以从IIS提供Angular应用程序。 您可以使用单独的MVC应用程序添加，也可以将MVC控制器添加到Web API应用程序中

请参见此处的详细解决方案：

Assaf在mvc应用程序中创建一个子目录，如“Angular5”

使用ng命令在子文件夹“Angular5”中创建angular应用程序

在.angular-ci.json文件中，将out dir编辑为类似“outDir”：“./MyDistFiles” 这将使您的分布式文件位于“Angular5”源文件目录之外。 不要将mvc应用程序的主文件夹用作输出“./”，否则angular cli将删除所有mvc应用程序文件，而不使用撤消功能，因此请确保使用子文件夹

备选案文1： 在源文件中，将Index.html更改为

<base href="/MyDistFiles/">
在RouteConfig.cs中，将其添加到中的顶部（而不是底部）

在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>
}
您会注意到，在cshtml的prod版本中，我在javascript和css文件中附加了一个应用程序版本id。我这样做是为了防止在浏览器中缓存旧版本。 在应用程序属性/程序集信息/程序集版本中，您可以使用1.0.*。。这将在每次重建时创建一个新的生成编号

ConfigSettings.cs类中的方法为

public static string AppVersion
        {
            get
            {
                if (string.IsNullOrEmpty(appVersion))
                {
                    appVersion = System.Reflection.Assembly.GetExecutingAssembly()
                                           .GetName()
                                           .Version
                                           .ToString();
                }
                return appVersion;


            }
        }
我喜欢使用ng serve的功能，因为当你在angular应用程序上工作时，你可以在几秒钟内轻松看到你的更改，而不是每次都等待完全重建。不幸的是，如果您没有使用CORS应用程序，但可能使用forms auth，那么您将无法从其他端口号访问web api方法。解决方法是打开命令提示符CD到Angular5目录

运行命令ngbuild--watch。除了自动刷新浏览器外，--watch的功能与ng serve相同，但选择“在文件上保存”，然后选择“在浏览器上使用f5”会更快、更高效，因为几秒钟后，它会快速重建

您可以在Application/Properties/buildevents中设置生成后命令，以便在执行prod发布时不会忘记生成您的命令

cd "$(SolutionDir)MyMVCApp\Angular5"
if $(ConfigurationName) == Release (
ng build --prod -oh
) ELSE (
ng build
)

ng build --prod -oh

public static string AppVersion
        {
            get
            {
                if (string.IsNullOrEmpty(appVersion))
                {
                    appVersion = System.Reflection.Assembly.GetExecutingAssembly()
                                           .GetName()
                                           .Version
                                           .ToString();
                }
                return appVersion;


            }
        }

cd "$(SolutionDir)MyMVCApp\Angular5"
if $(ConfigurationName) == Release (
ng build --prod -oh
) ELSE (
ng build
)