web-dev-qa-db-ja.com

Uncaught TypeError：undefined、electron2のプロパティ 'fn'を読み取れませんangular 6？

私は次のpackage.jsonでAngular 6.0.3、electronjs2.0.2を使用しています

{
  "name": "test",
  "version": "1.0.0",
  "license": "MIT",
  "main": "electron-main.js",
  "author": {
    "name": "Mohammad Dayyan @mdssoft",
    "email": ""
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve --open",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "electron": "electron .",
    "electron-build": "ng build --prod && electron ."
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/cdk": "^6.1.0",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/material": "^6.1.0",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "bootstrap": "^4.1.1",
    "core-js": "^2.5.6",
    "hammerjs": "^2.0.8",
    "highcharts": "^6.1.0",
    "jquery": "^3.3.1",
    "material-design-icons": "^3.0.1",
    "popper.js": "^1.14.3",
    "rxjs": "^6.2.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.6.5",
    "@angular/cli": "^6.0.5",
    "@angular/compiler-cli": "^6.0.3",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "^2.8.7",
    "@types/jasminewd2": "^2.0.3",
    "@types/node": "^10.1.2",
    "codelyzer": "^4.3.0",
    "electron": "^2.0.2",
    "jasmine-core": "^3.1.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^2.0.2",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.1",
    "karma-jasmine": "^1.1.2",
    "karma-jasmine-html-reporter": "^1.1.0",
    "protractor": "^5.3.2",
    "ts-node": "^6.0.5",
    "tslint": "^5.10.0",
    "TypeScript": "~2.7.2"
  }
}

および次のelectron-main.jsファイル：

const {
  app,
  BrowserWindow
} = require('electron');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1024,
    height: 768,
    title: 'Test',
    backgroundColor: '#fff',
    icon: `file://${__dirname}/dist/Test/assets/images/logo.png`
  })
  mainWindow.setMenu(null);
  mainWindow.on('ready-to-show', function(){    
    mainWindow.show();
  });
  mainWindow.on('closed', function () {
    mainWindow = null
  });  
  mainWindow.loadURL(`file://${__dirname}/dist/Test/index.html`);
  mainWindow.webContents.openDevTools();
}
// Create window on electron intialization
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On macOS specific close process
  if (process.platform !== 'darwin') {
    app.quit();
  }
})
app.on('activate', function () {
  // macOS specific close process
  if (mainWindow === null) {
    createWindow();
  }
})

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "Test": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/Test",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/@angular/material/prebuilt-themes/Indigo-pink.css",
              "node_modules/material-design-icons/iconfont/material-icons.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/bootstrap-custom.css",
              "src/materials-custom.css",
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "Test:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "Test:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "Test:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "node_modules/@angular/material/prebuilt-themes/Indigo-pink.css",
              "node_modules/material-design-icons/iconfont/material-icons.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "Test-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "Test:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "Test"
}

npm startまたはng serve --openコマンド（ブラウザ内）で問題ありませんが、electronに切り替えるたびに、次のエラーが発生しました。

Uncaught TypeError: Cannot read property 'fn' of undefined

Uncaught TypeError: Cannot read property 'fn' of undefined

どうしましたか？

javascriptangularelectronangular6
4
Mohammad Dayyan

これをhtmlファイルに追加します。これにより、jqueryの関数が呼び出される前にjqueryが確実に読み込まれます。

<script>
window.$ = window.jQuery = require('jquery');
</script>
4
Divyansh Jamuaar

Angular 6アプリケーションでも同様の問題がありました。headタグに以下のスクリプトを追加した後、それを取り除きました。

<script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
1
user2243747