Question

我在最新版本的核心2.1中包含的.NET Core 2.1 + Angular 5模板之上为我们的团队构建模板，我们将应用程序部署到虚拟文件夹中，例如/ it / myapp，或者/ AA / myotherapp

在2.0模板上，基本href属性将自动设置，我假设因为它是用剃刀构建的，如下所示：

<base href="~/" />

然而，对于2.1模板不是这样，我假设它是因为模板实际上只使用静态文件，而新的app.UseSpa（）

关于如何自动填充基础href标签的任何想法？

谢谢

Answer 1

是的，我知道这是一个古老的问题，但是我希望这对其他人有帮助。答案是关于Angular 6和.NET Core 2.1的。建议：解释有点大（抱歉）

在Core 2.1中，我们有一个典型的Startup.cs

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
     }
     app.UseHttpsRedirection();
     app.UseStaticFiles();
     app.UseMvc(routes =>
     {
          routes.MapRoute(
          name: "default",
          template: "{controller}/{action=Index}/{id?}");
      });
      app.UseSpa(spa =>
      {
           // To learn more about options for serving an Angular SPA from ASP.NET Core,
           // see https://go.microsoft.com/fwlink/?linkid=864501

           spa.Options.SourcePath = "ClientApp";
           spa.Options.DefaultPage = $"/index.html";

           if (env.IsDevelopment())
           {
               spa.UseAngularCliServer(npmScript: "start");
           }
      });
  }

重要的是

   spa.UseAngularCliServer(npmScript: "start");

这告诉.NET使用package.json中定义的脚本

{
  "name": "client-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --base-href=/ --serve-path=/", //<--this line
    "build": "ng build",
     ...
  },
  ....
}

看到我们有两个选择。 --base-href和--serve-path

当我们执行应用程序时，我们收到了一个index.html之类的

<!DOCTYPE html>
<html>
<head>
  <title>Angular i18n example</title>
  <base href="/"
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <app-root>Loading...</app-root>
    <script type="text/javascript" src="runtime.js"></script>
    <script type="text/javascript" src="polyfills.js"></script>
    <script type="text/javascript" src="styles.js"></script>
    <script type="text/javascript" src="vendor.js"></script>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>

我们可以更改基本href更改我们的package.json。但是，如果不按照--serve-path进行更改，则我们的应用程序将失败，因为我们正在根据基本href查找脚本。

想法是脚本不依赖于基本href。我希望脚本的src在绝对路径中。这就是脚本，就像

    <script type="text/javascript" src="/<serve-path>/runtime.js"></script>
    <script type="text/javascript" src="/<serve-path>/polyfills.js"></script>
    <script type="text/javascript" src="/<serve-path>/styles.js"></script>
    <script type="text/javascript" src="/<serve-path>/vendor.js"></script>
    <script type="text/javascript" src="/<serve-path>/main.js"></script>

因此，如果我们在.html中写一些类似的内容

<head>
  <title>Angular i18n example</title>
  <script>
     var str = document.location.href;
     ...
     document.write('<base href="' + str+ '" />');
  </script>
  <!--we remove base href="/"
      <base href="/"
  -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

我们的脚本正在从正确的路径中寻找并且该应用程序可以运行。 ¿如何更改添加脚本的方式？好吧，我们必须在两个文件中进行一些更改：

index-html-webpack-plugin.js node_modules \ @ angular-devkit \ build-angular \ src \ angular-cli-files \ plugins
browser.js node_modules \ @ angular-devkit \ build-angular \ src \ angular-cli-files \ models \ webpack-configs

首先请参阅index-html-webpack-plugin.js中的类IndexHtmlWebpackPlugin

class IndexHtmlWebpackPlugin {
    constructor(options) {
        this._options = Object.assign({ input: 'index.html', output: 'index.html', entrypoints: ['polyfills', 'main'], sri: false }, options);
    }
    apply(compiler) {
      ....
        const scriptElements = treeAdapter.createDocumentFragment();
        for (const script of scripts) {
            const attrs = [
                { name: 'type', value: 'text/javascript' },
                //change the line
                //{ name: 'src', value: (this._options.deployUrl || '') + script },
                //by 
                { name: 'src', value: (this._options.baseHref)+(this._options.deployUrl || '') + script },
            ];
            if (this._options.sri) {
                const content = compilation.assets[script].source();
                attrs.push(...this._generateSriAttributes(content));
            }
            const element = treeAdapter.createElement('script', undefined, attrs);
            treeAdapter.appendChild(scriptElements, element);
        }

了解如何将this._options.baseHref添加到脚本中好吧，实际上在构造函数中我们没有baseHref，这是因为我们必须更改文件browser.js 在

plugins: extraPlugins.concat([
    new index_html_webpack_plugin_1.IndexHtmlWebpackPlugin({
        input: path.resolve(root, buildOptions.index),
        output: path.basename(buildOptions.index),
        baseHref: buildOptions.baseHref,
        entrypoints: package_chunk_sort_1.generateEntryPoints(buildOptions),
        deployUrl: buildOptions.deployUrl,
        //we add this line
        servePath: buildOptions.servePath,
        sri: buildOptions.subresourceIntegrity,
    }),
]),

又一步。当我们在index.html中使用javascript编写基本标签时，我们不希望angular-cli添加此标签。为此，我们唯一需要更改的就是注释index-html-webpack-plugin.js中的行

// Adjust base href if specified
if (typeof this._options.baseHref == 'string') {
    let baseElement;
    for (const headChild of headElement.childNodes) {
        if (headChild.tagName === 'base') {
            baseElement = headChild;
        }
    }
    const baseFragment = treeAdapter.createDocumentFragment();
    if (!baseElement) {
        baseElement = treeAdapter.createElement('base', undefined, [
            { name: 'href', value: this._options.baseHref },
        ]);
//coment the two lines below
//        treeAdapter.appendChild(baseFragment, baseElement);
//        indexSource.insert(headElement.__location.startTag.endOffset + 1, parse5.serialize(baseFragment, { treeAdapter }));
    }

仅此而已！

另外两个有趣的地方

当我们使用javascript创建基本标记时，我们只需要基本即可。否则，如果我们刷新页面，基本href更改，并且例如在页面首页中，则我们的网址将类似于http：// www.dominio.com///home。我们希望该基地将继续在 / 上。看一下脚本，然后按自己的意愿进行操作，例如

  <script>
    var items = document.location.href.split('/');
    while (items.length>4)
      items.pop();
    document.write('<base href="' + items.join('/') + '" />');
  </script>

最后一点，如果使仅有效的URL作为SPA服务器。为此，我们修改了startup.cs，使只有有效的URL是服务器。（否则，诸如http://www.dominio.com/patata/patata之类的网址会提供给我们的SPA）在app.UseMvc和app.UseSpa之间添加中间件

   app.UseMvc(routes =>
   {
    ...
    });
   //Add this Middleware
    app.Use(async (context, next) =>
    {
        string path = context.Request.Path.Value.Substring(1);
        bool encontrado = path.EndsWith(".js") || path.EndsWith(".css") || path.EndsWith(".map") || path.StartsWith("sockjs");
        if (!encontrado)
        {
            //make here the check for the pages
            //"silly" e.g.
            encontrado==(path=="es/adminitrator" || path=="it/administrator")
        }
        if (encontrado)
            await next.Invoke();
        else
        {
            context.Response.ContentType = "text/html";
            await context.Response.SendFileAsync(Path.Combine(env.WebRootPath, "error404.html"));
        }
        app.UseSpa(spa=>
        {
              ....
        }
    });

更新

使用Java脚本添加标签页是一个非常丑陋的解决方法。更好地使用BASE_REF提供程序

import {Component, NgModule} from '@angular/core';
import {APP_BASE_HREF} from '@angular/common';

@NgModule({
  providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]
})
class AppModule {}

Angular模板上的.NET core 2.1 base href标记

1 个答案: