Angular2和电子路线问题

Question

在讨论路由时，我无法理解 angular 和 electron 如何协同工作。 用电子创建主窗口后，我想要做的是，使用一条路线，用该路线打开一个新窗口，但返回如下错误：

    http://localhost:4200/test/inline.bundle.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:4200/test/polyfills.bundle.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:4200/test/scripts.bundle.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:4200/test/styles.bundle.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:4200/test/vendor.bundle.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:4200/test/main.bundle.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:4200/test/inline.bundle.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:4200/test/polyfills.bundle.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:4200/test/scripts.bundle.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:4200/test/styles.bundle.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:4200/test/vendor.bundle.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:4200/test/main.bundle.js Failed to load resource: the server responded with a status of 404 (Not Found)

电子 main.js 文件为：

'use strict';
const electron = require('electron');
// Module to control application life.
const { app, BrowserWindow, ipcMain } = electron;

let win;
let winAttendant;

ipcMain.on('supportRequest', (e, type, threadObjectId) => {
    // console.log(args[0]);
    // e.sender.send('channel1', 'ok got it');
    // console.log('1:' + e + '2:' + type + '3:'+ threadObjectId)
    if (type == 1) {
        attendantWindow(1, threadObjectId);
    } else if (type == 2) {
        attendantWindow(2, threadObjectId);
    } else {
        attendantWindow(0);
    }

})

function attendantWindow(type, threadObjectId) {
    if (type == 1) {
        winAttendant = new BrowserWindow({
            x: 500,
            y: 500,
            minWidth: 300,
            minHeight: 650
        });

        winAttendant.loadURL('http://localhost:4200/attendantpage/'+ threadObjectId);

        winAttendant.on('closed', () => {
            // Dereference the window object, usually you would store windows
            // in an array if your app supports multi windows, this is the time
            // when you should delete the corresponding element.
            win = null;
        });
    } else if (type == 2) {
        console.log('type is: 2 and id: ' + threadObjectId)
        winAttendant = new BrowserWindow({
            x: 500,
            y: 500,
            minWidth: 300,
            minHeight: 650
        });
        console.log('http://localhost:4200/test/');
        winAttendant.loadURL('http://localhost:4200/test/');

        winAttendant.on('closed', () => {
            // Dereference the window object, usually you would store windows
            // in an array if your app supports multi windows, this is the time
            // when you should delete the corresponding element.
            win = null;
        });
    } else {
        winAttendant.close();
    }
}

function createWindow() {

    let electronScreen = electron.screen;
    let size = electronScreen.getPrimaryDisplay().workAreaSize;

    // Create the browser window.
    win = new BrowserWindow({
        minWidth: 900,
        minHeight: 700,
        center: true
    });

    let url = 'file://' + __dirname + '/index.html';
    let Args = process.argv.slice(1);

    Args.forEach(function (val) {
        if (val === "--serve") {
            url = 'http://localhost:4200'
        }
    });

    // and load the index.html of the app.
    win.loadURL(url);

    // Open the DevTools.
    // win.webContents.openDevTools();

    // Emitted when the window is closed.
    win.on('closed', () => {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        win = null;
    });
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', () => {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    // On OS X it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (win === null) {
        createWindow();
    }
});

要在新窗口中打开的组件是一个使用 ng g c test 创建的简单的新组件。

有人可以帮我理解错误吗？

谢谢

Answer 1

由于尝试处理 Electron 和 angular2 的错误方式，我遇到了这个问题。

要以正确的方式处理并在 Electron 和 Angular2 之间传递参数，只需使用来自电子的 Angular2 ActivatedRoute + ipcMain：

在电子 main.js 中：

ipcMain.on('chat', (e, args) => {
  console.log('mainjs threadId: ', args);
  threadId = args;
  createChatWindow(threadId);
});

function createChatWindow(threadId) {
  // Initialize the window to our specified dimensions
  chatWin = new BrowserWindow({width: 400, height: 500});

  // Specify entry point
  chatWin.loadURL('http://localhost:4200/attendantsupportchat;threadId='+threadId.threadId+';type='+threadId.type);
  console.log(threadId.threadId);

  // Remove window once app is closed
  chatWin.on('closed', function () {
    win = null;
  });
};

在 Angular2 组件中：

import { ActivatedRoute } from '@angular/router';

然后像这样在构造函数中初始化：

public activatedRoute: ActivatedRoute;

并在需要的地方使用：

this.paramsFromElectron = this.activatedRoute.snapshot.params;
this.threadId = this.paramsFromElectron.threadId;
this.threadType = this.paramsFromElectron.type; 

希望对你有所帮助