如何在 `ng build` 期间保留 XHTML 属性大小写？

Question

我正在尝试将 Angular 12 应用程序集成到 ZK 应用程序中。

这是我的 index.zhtml:

<?xml version="1.0"?>
<!DOCTYPE html>
<html xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:z="zul" xmlns="native" lang="fr">
  <head>
    <meta charset="utf-8">
    <title>ZK + Angular 12</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
  <body>
    <z:div
      apply="org.zkoss.bind.BindComposer"
      viewModel="@id('vm')@init('com.c4_soft.zk_angular_demo.MyViewModel')"
      validationMessages="@id('vmsgs')">
        ...
        <z:button label="ZK ++" onClick="@command('cmd')"></z:button>
    </z:div>
    <app-root></app-root>
  </body>
</html>

我的问题（其实是第一个，估计还有很多）： “zul”命名空间中的属性区分大小写（例如 z:div viewModel 和 z:button onClick）但 ng build 将其转换为小写。

如何防止 ng build 处理它不知道的名称空间中 xml 标记的属性大小写？

Answer 1

由于我来自 ZK 方面，所以我实际上并不知道是否有编译器flag/switch 请禁用自动小写。

我认为 angular 试图在这里编译太多。 zhtml/zul-files 是 ZK 特定格式，需要在运行时由 ZK 的 DHtmlLayoutServlet 在服务器端进行 parsed/executed。如果你用 ng build 处理这些文件，看起来这个编译器不知道 ZK 的语法和 changes/breaks 事情根据它自己的约定默认值（内部 angular 使用 parse5 html 解析器deliberately switches all tag/attribute names to lowercase)

底线：你不能用ng build.

编译zhtml/zul文件

相反，我们可以将您的 angular 应用程序编译成 JS，然后使用脚本标记将其包含到 zhtml 页面中。

<?xml version="1.0"?>
<!DOCTYPE html>
<html xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:z="zul" xmlns="native" lang="fr">
  <head>
    <meta charset="utf-8">
    <title>ZK + Angular 12</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <script src="yourlibs.js"></script>
    <script src="morelibs.js"></script>
    <script>/*script initializing app-root*/</script>

  </head>
  <body>
    <z:div
      apply="org.zkoss.bind.BindComposer"
      viewModel="@id('vm')@init('com.c4_soft.zk_angular_demo.MyViewModel')"
      validationMessages="@id('vmsgs')">
        ...
        <z:button label="ZK ++" onClick="@command('cmd')"></z:button>
    </z:div>
    <app-root></app-root>
  </body>
</html>

这里有几个基于 angular 2 和 8 的现有集成示例的链接：

在这两种情况下，JS 文件都明确添加到 zhtml/zul 文件中，与实际构建过程无关。

https://github.com/zkoss-demo/zkangular2/blob/master/src/main/webapp/hero/index.zhtml

https://github.com/zkoss-demo/client-binding-demo-angular/blob/master/src/main/resources/web/hello.zul

以上是针对 ZK 作为 main 应用程序并允许添加嵌套 angular components/pages.

如果您希望 angular 应用程序成为主要应用程序，那么您可以查看 zk-embedded，它提供了一个 JS api将 zul 页面集成到任意 html 个页面 ()

如何在 `ng build` 期间保留 XHTML 属性大小写？

How to preserve XHTML attributes case during `ng build`?

zk

angular