电子角度库错误

Question

我正在与 Angular 和 Electron 合作尝试一些事情。我已经设置了所有东西，使用 cli 生成并使用电子启动的标准项目工作正常。

然后我添加了一些东西，这就是我到目前为止的内容。

来自 angular.cli 的脚本和样式

 "scripts": [
      "../node_modules/jquery/dist/jquery.min.js",
      "../node_modules/toastr/build/toastr.min.js",
      "../node_modules/bootstrap/dist/js/bootstrap.bundle.js"
    ],
    "styles": [
      "styles.css",
      "../node_modules/bootstrap/dist/css/bootstrap.min.css",
      "../node_modules/toastr/build/toastr.min.css"
    ],

主要组件.ts

import * as toastr from 'toastr';

import { Component } from '@angular/core';
import { toBase64String } from '@angular/compiler/src/output/source_map';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app';
    constructor() {
        toastr.error('Helllo world!');
    }
}

html 基础，如果 bootstrap 有效，请尝试：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <h1>
        Electron App
      </h1>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <button routerLink="/customers">Customers</button>
    </div>
    <div class="col-md-4">
      <button routerLink="/orders">Orders</button>
    </div>
    <div class="col-md-4">
      <button routerLink="">Home</button>
    </div>
  </div>
</div>

<router-outlet></router-outlet>

我设法让 toastr 与我的 component.ts 顶部的包含一起工作。如果我用经典的 'ng s' 来服务它，效果很好。但是，如果我尝试使用运行脚本“ng build && electron”的电子启动它。我看到应用程序运行良好，但在控制台中显示错误：

bootstrap.bundle.js:121 Uncaught TypeError: Cannot read property 'fn' of undefined
    at setTransitionEndSupport (bootstrap.bundle.js:121)
    at bootstrap.bundle.js:199
    at bootstrap.bundle.js:201
    at bootstrap.bundle.js:9
    at bootstrap.bundle.js:10

据我所知，Angular6 不会导出模块（？）我相信。那么有谁知道如何解决这个问题？

• • • • 编辑/已解决(?) - - - -

好的，我已经找到了问题所在。我做了什么：

1) 将 package.json 文件中的引导程序版本更改为 4.0.0（然后删除 package-lock.json 文件 rm -rf node_modules 并使用 npn i 重新安装模块）。 2）以这种方式编辑tsconfig文件：

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "types": [
      "toastr"
    ]
  }
}

3) 以这种方式编辑组件：

import { Component } from '@angular/core';
import { toBase64String } from '@angular/compiler/src/output/source_map';
declare const toastr: any;

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app';
    constructor() {
        toastr.success('Helllo world!');
    }
}

4) 在 index.html 的头部添加了这个

 <script>
    if (typeof require !== 'undefined') {
      window.$ = window.jQuery = require('jquery');
    }
  </script>

这解决了我的问题，我现在可以用电子完美地包装我的应用程序并将其与 ng serve 一起使用。

Answer 1

我认为这是 bootstrap 4 beta 2 的错误。

这将在下一个版本中修复。

https://github.com/twbs/bootstrap/issues/24439

让我们升级你的版本