如何将Angular项目打包为.exe文件？无需安装Angular CLI即可运行

当然可以实现！要让你的Angular项目无需依赖Angular CLI就能在任意Windows电脑上运行，核心思路是先把Angular项目编译成纯静态的HTML/CSS/JS文件，再用桌面应用打包工具把这些静态资源封装成可执行程序。下面是最常用、最可靠的实现方案：

步骤1：先构建Angular项目为静态资源 #

首先在你的开发电脑上（需要暂时装一次Angular CLI用来打包项目），在项目根目录运行构建命令：

# Angular 12+ 推荐使用
ng build --configuration production

# 旧版本Angular可兼容使用
ng build --prod

执行完成后，项目根目录会生成一个dist文件夹，里面就是可以直接运行的静态网站资源——这一步是把Angular的动态代码编译成浏览器能直接解析的静态文件。

步骤2：用Electron打包成.exe #

Electron是目前最流行的把网页转成桌面应用的工具，它内置了Chromium内核和Node.js，打包出来的exe可以直接在Windows上运行，不需要用户安装任何额外环境。

具体操作： #

1. 安装Electron依赖
   在项目根目录执行：

npm install electron electron-packager --save-dev

electron是核心运行库，electron-packager是用来打包成exe的工具。

2. 创建Electron的主入口文件
   在项目根目录新建一个main.js文件，内容如下（记得替换[你的项目名称]为实际项目名——就是dist文件夹里的子文件夹名称）：

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

let mainWindow;

// 创建应用窗口
function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1024,
    height: 768,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  // 加载Angular打包后的静态文件
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, './dist/[你的项目名称]/index.html'),
    protocol: 'file:',
    slashes: true
  }));

  // 窗口关闭时的清理
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

// Electron生命周期钩子
app.on('ready', createWindow);

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

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

3. 配置package.json的脚本
   打开项目根目录的package.json，在scripts里添加以下内容：

"scripts": {
  // 保留你原来的Angular脚本，新增下面两个
  "electron": "electron .",
  "package-exe": "electron-packager . 我的Angular应用 --platform=win32 --arch=x64 --out=dist-exe --overwrite"
}

这里的我的Angular应用是你最终生成的exe文件名，可以自定义；--platform=win32指定打包Windows版本，--arch=x64对应64位系统。

4. 打包生成exe
   先确保已经完成了Angular的构建（步骤1），然后在终端执行：

npm run package-exe

执行完成后，项目根目录会生成dist-exe文件夹，里面的我的Angular应用-win32-x64目录里就有你要的.exe文件了！这个文件可以直接拷贝到任何Windows电脑上运行，完全不需要安装Angular CLI或Node.js。

关键注意事项 #

如果你的Angular项目用了路由功能，默认的PathLocationStrategy（不带#的路由）在本地文件协议下会失效，导致刷新页面404。解决办法是改成HashLocationStrategy：
打开app-routing.module.ts，在RouterModule.forRoot里添加配置：

RouterModule.forRoot(routes, { useHash: true })

这样路由会带上#，就能在Electron的本地文件环境下正常工作了。

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