如何将Xel-toolkit集成到Angular-Electron应用程序中？

Question

我是角和电子领域的新手，我正在建立我的第一个应用程序。我找到了一个很酷的名为Xel的小部件工具包。我想将其与angular集成，所以我按照他们页面上的描述进行设置，但是由于某种原因，我收到一个错误消息，提示它无法找到js文件（正是它在寻找它的位置），并且CSS的MIME类型是text / html。

我试图使用express和ejs在一个简单的应用程序中执行相同的操作，但是遇到了同样的问题。因此，我使用express将js和css文件作为静态文件提供，然后一切正常。但是，我无法使用电子+角度应用程序执行相同的操作。

我该如何使用它？

Answer 1

我也遇到了同样的问题...但是我终于使它起作用了。有两个问题：

1. Webcomonents。 Xel工具箱使用它们，而Angular 9不知道它们是什么。通过让Angular知道正在使用Web组件，可以轻松解决此问题。

   • 在app.module.ts中，您需要从@ angular / core导入CUSTOM_ELEMENTS_SCHEMA并将其作为架构添加到@NgModule。这是一个例子：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA // Tells Angular we will have custom tags in our templates
  ]
})
export class AppModule {}

2. 您需要在项目顶部的Angular.json中添加主题css和javascript。我的看起来像这样：（我也在尝试光子）

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular-electron": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico",
              "src/favicon.png",
              "src/favicon.icns",
              "src/favicon.256x256.png",
              "src/favicon.512x512.png"
            ],
            "styles": [
              "photon/css/photon.css",
              "node_modules/xel/themes/macos.css",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/xel/xel.min.js"
            ],

3. 有一个主题必须链接的顺序，然后是xel.min.js。我还没有对此进行挖掘，但是可能会发生乱序，结果是有一个CSS选择器隐藏了所有内容。看看“ node_modules / xel / themes / macos.css”

*:not(:defined) {
 display: none;
}

这使所有内容都不显示。现在，我只是将其注释掉，以查看是否要使用它。