如何搭建初始Electron Angular项目（含Angular4+TypeScript指引）

Hey there! I’ve walked through this setup a few times, so let’s break it down step by step to get your Electron + Angular 4 TypeScript project up and running smoothly.

Prerequisites #

First, make sure you have these installed:

• Node.js: Go for v8.x or v10.x (these versions play nicely with Angular 4 and the compatible Electron version we’ll use).
• npm or Yarn: Either works—we’ll use npm here, but feel free to swap in Yarn commands if that’s your preference.

Step 1: Install Angular CLI for Angular 4 #

Angular 4 requires an older version of the Angular CLI. Install it globally with:

npm install -g @angular/cli@1.4.10

This CLI version is specifically tied to Angular 4.x releases.

Step 2: Create Your Angular 4 Project #

Generate a new Angular project (we’ll skip routing and use CSS for simplicity):

ng new electron-angular4-demo --style=css --routing=false
cd electron-angular4-demo

Test that the Angular app works first:

ng serve

Open http://localhost:4200 in your browser—if you see the default Angular welcome page, you’re good to go. Hit Ctrl+C to stop the dev server.

Step 3: Add Electron Dependencies #

We’ll use an Electron version compatible with Angular 4’s Node environment. Install it along with TypeScript type definitions:

npm install --save-dev electron@1.8.8
npm install --save-dev @types/electron

The @types/electron package gives us TypeScript intellisense for Electron APIs, which is essential for a TypeScript-based project.

Step 4: Create the Electron Main Process File #

In your project root, create a main.ts file (this is Electron’s entry point):

import { app, BrowserWindow } from 'electron';
import * as path from 'path';
import * as url from 'url';

let mainWindow: Electron.BrowserWindow | null;

function createWindow() {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // Enable Node.js integration in the renderer
      contextIsolation: false, // Required for older Electron versions with nodeIntegration
    },
  });

  // Load the Angular app's bundled index.html
  mainWindow.loadURL(
    url.format({
      pathname: path.join(__dirname, '../dist/index.html'),
      protocol: 'file:',
      slashes: true,
    })
  );

  // Open DevTools (optional, for debugging)
  mainWindow.webContents.openDevTools();

  // Handle window close event
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

// Electron app lifecycle events
app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

Step 5: Configure TypeScript for Electron #

Since Electron uses CommonJS modules (different from Angular’s setup), create a separate TypeScript config file for Electron: tsconfig-electron.json in the root:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist-electron",
    "strict": true,
    "types": ["electron"]
  },
  "include": ["main.ts"]
}

Then, update your root package.json with these changes:

1. Set the main field to point to the compiled Electron entry:

   "main": "dist-electron/main.js"
   

2. Add these scripts to your scripts section:

   "scripts": {
     // ... existing scripts ...
     "electron-build": "ng build --prod --base-href ./ && tsc -p tsconfig-electron.json",
     "electron-start": "electron ./dist-electron/main.js"
   }
   

The --base-href ./ flag ensures Angular’s bundled assets use relative paths, which is required for Electron to load them correctly from the local file system.

Step 6: Run the Electron + Angular 4 App #

Now let’s build and launch the app:

1. Build both the Angular app and Electron main process:

   npm run electron-build
   

2. Start the Electron app:

   npm run electron-start
   

You should see an Electron window pop up with your Angular 4 app running inside it! 🎉

Extra Tips #

• Debugging: If you need to debug the Electron main process, you can add the --inspect flag to the electron-start script: "electron-start": "electron --inspect ./dist-electron/main.js"—then attach a debugger via Chrome’s chrome://inspect page.
• Packaging: To package your app into a desktop installer, use tools like electron-packager or electron-builder. For compatibility, install older versions of these tools (e.g., electron-packager@12.2.0) since newer versions may not support Electron 1.8.8.
• Type Issues: If you run into TypeScript type errors, double-check that @types/electron matches your Electron version (for Electron 1.8.8, use @types/electron@1.6.10 if needed).

内容的提问来源于stack exchange，提问作者Hell Bell