Как я могу интегрировать Xel-toolkit в приложение Angular -Electron?

Question

Я новичок ie до angular и электрон, и я создаю свое первое приложение. Я нашел этот классный набор инструментов для виджетов под названием Xel . Я хотел интегрировать его с angular, поэтому я настроил его так, как описано на их странице, но по какой-то причине я получаю сообщение об ошибке, в котором говорится, что он не может найти файл js (именно там он ищет это) и что тип css 'MIME - это текст / html.

Я пытался сделать то же самое с простым приложением, используя express и e js, где я получил ту же проблему. Поэтому я подал файлы js и css как файлы * stati c с express, а затем все получилось. Однако я не могу сделать то же самое с приложением электрон + angular.

Как мне заставить это работать?

Answer 1

У меня была такая же проблема ... Но я наконец-то заставил ее работать. Были две проблемы:

1. Веб-компоненты. Инструментарий Xel использует их, и Angular 9 не знает, кто они. Это легко исправить, сообщив Angular, что используются веб-компоненты.

   • В вашем app.module.ts вам нужно импортировать CUSTOM_ELEMENTS_SCHEMA из @ angular / core и добавить его в виде схемы в @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 {}

Вам нужно добавить тему css и javascript в Angular. json в верхней части вашего проекта. Моя выглядит так: (я тоже пробую фотон)

{
  "$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"
            ],

Существует порядок, в котором тема должна быть связана с xel.min. js. Я не копался в этом, но это может произойти не по порядку, и в результате есть селектор CSS, который скрывает ВСЕ. Взгляните на "node_modules / xel / themes / macos. css"

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

Это заставляет все не отображаться. Сейчас я просто прокомментировал это, чтобы посмотреть, хочу ли я это использовать.