Простая настройка для работы Angular 4 с Electron Webpack, с загрузкой шаблона и дополнительной библиотекой CSS (Bulma). Я использую Yarn, но вы, вероятно, можете использовать npm. Зависимость Electron Builder рекомендует Yarn.
1. Базовая настройка
Сначала начните с пустого каталога и инициализируйте зависимости Angular:
yarn add @angular/common @angular/compiler @angular/core \ @angular/forms @angular/http @angular/platform-browser \ @angular/platform-browser-dynamic @angular/router \ core-js rxjs source-map-support zone.js
Затем добавьте --dev
зависимости для Electron Webpack (также включая Typescript и надстройку Electron Webpack Typescript):
yarn add --dev electron-webpack electron-webpack-ts electron \ webpack typescript @types/node
Чтобы использовать Electron Webpack, вам необходимо создать две точки входа. Основной поток и поток средства визуализации. В качестве основной точки входа я преобразовал пример из начального проекта Electron Webpack для использования Typescript. Создайте этот файл как src/main/index.ts
import { app, BrowserWindow } from 'electron' const isDevelopment = process.env.NODE_ENV !== 'production'; let mainWindow : BrowserWindow; function createMainWindow() { const window = new BrowserWindow(); // Set url for `win` // points to `webpack-dev-server` in development // points to `index.html` in production const url = isDevelopment ? `http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}` : `file://${__dirname}/index.html`; if (isDevelopment) { window.webContents.openDevTools(); } window.loadURL(url); window.on('closed', () => { mainWindow = null; }); window.webContents.on('devtools-opened', () => { window.focus(); setImmediate(() => { window.focus(); }) }); return window; } app.on('window-all-closed', () => { // On macOS it is common for applications to stay open // until the user explicitly quits if (process.platform !== 'darwin') app.quit() }); app.on('activate', () => { // On macOS it is common to re-create a window // even after all windows have been closed if (mainWindow === null) mainWindow = createMainWindow(); }); // Create main BrowserWindow when electron is ready app.on('ready', () => { mainWindow = createMainWindow(); });
Для рендерера я объединил polyfill.ts
, vendor.ts
и main.ts
Angular, чтобы создать src/renderer/index.ts
// Polyfills import "core-js/es7/reflect"; require("zone.js/dist/zone"); // Vendor import "@angular/platform-browser"; import "@angular/platform-browser-dynamic"; import "@angular/core"; import "@angular/common"; import "@angular/http"; import "@angular/router"; import "rxjs"; // main import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; import { enableProdMode } from "@angular/core"; import { AppModule } from "./app/app.module"; if(process.env.NODE_ENV === "production") { enableProdMode(); } platformBrowserDynamic().bootstrapModule(AppModule);
Electron Webpack создает индекс HTML. Он включает элемент с идентификатором #app
, который используется в качестве селектора в главном src/renderer/app/app.component.ts
import {Component, ViewEncapsulation} from "@angular/core"; @Component({ selector: '#app', template: '<h1>App works!</h1>', encapsulation: ViewEncapsulation.None }) export class AppComponent {}
AppModule
, который загружает Angular и загружает AppComponent
, определен в src/renderer/app/app.module.ts
с помощью:
import {NgModule} from "@angular/core"; import {BrowserModule} from "@angular/platform-browser"; import {FormsModule} from "@angular/forms"; import {HttpModule} from "@angular/http"; import {AppComponent} from "./app.component"; @NgModule({ imports: [ BrowserModule, FormsModule, HttpModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule {}
В корневом каталоге проекта создайте tsconfig.json
для настройки Typescript для компиляции Angular:
{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true, "typeRoots": [ "./node_modules/@types" ], "lib": [ "es2017", "dom" ] }, "include": [ "./**/*" ] }
Добавьте раздел scripts
в свой package.json
с командой для запуска Electron Webpack в режиме разработки:
"scripts": { "dev": "electron-webpack dev" }
Теперь вы готовы запустить минимальное приложение, используя следующую команду:
yarn dev
2. Добавление поддержки шаблонов Angular
В приведенном выше минимальном примере используются встроенные шаблоны Angular. Чтобы файлы шаблонов Angular работали, вам необходимо добавить правильный загрузчик веб-пакетов и настроить конфигурацию веб-пакетов.
Сначала добавьте в проект необходимые зависимости:
yarn add --dev angular2-template-loader
Создайте настраиваемый файл конфигурации веб-пакета с именем webpack-renderer-additions.js
со следующим содержимым:
module.exports = { module: { rules: [ { test: /\.tsx?$/, exclude: /node_modules/, use: [ { loader: "ts-loader" }, { loader: "angular2-template-loader" } ] } ] } };
И скажите Electron Webpack загрузить эту конфигурацию, добавив следующее в package.json
проекта
"electronWebpack": { "renderer": { "webpackConfig": "webpack.renderer.additions.js" } }
Теперь вы можете добавить шаблон для компонента приложения, создать src/renderer/app/app.component.html
со следующим содержимым:
<h1 class="title">App Works!</h1>
И обновите src/renderer/app/app.component.ts
, чтобы удалить встроенный шаблон и сослаться на этот файл шаблона:
import {Component, ViewEncapsulation} from "@angular/core"; @Component({ selector: '#app', templateUrl: './app.component.html', encapsulation: ViewEncapsulation.None }) export class AppComponent {}
3. Использование библиотеки CSS (Bulma)
Я добавляю Bulma, чтобы ускорить прототипирование разметки внешнего интерфейса за счет наличия минимальной библиотеки CSS, которую легко настраивать с помощью SASS. Чтобы это заработало, добавьте библиотеку в проект:
yarn add bulma
и --dev
зависимости для работы с SASS в Electron Webpack:
yarn add --dev sass-loader node-sass
Создайте в src/renderer/app/styles.scss
файл базовых стилей, который ссылается на Bulma, например:
// optionally configure variables to customise Bulma // before importing... @import "~bulma"; // optionally add extra SASS after importing Bulma
Импортируйте SASS в свое приложение, обновив src/renderer/app/app.component.ts
до:
import {Component, ViewEncapsulation} from "@angular/core"; import "./styles.scss"; @Component({ selector: '#app', templateUrl: './app.component.html', encapsulation: ViewEncapsulation.None }) export class AppComponent {}
Повторно запустите Electron Webpack с сервером разработки, выполнив команду:
yarn dev
Вот и все! Простой, минималистичный пример использования Angular 4 с Electron Webpack. Пример кода доступен на GitHub.
Бонус:
Если вы хотите использовать Angular Router, вам необходимо вставить тег <base />
в index.html, созданный Electron Webpack. Вы можете сделать это, добавив следующий код в src/renderer/index.ts
непосредственно перед строкой bootstrapModule(AppModule)
:
const base = document.createElement('base'); base.href = './'; document.head.appendChild(base);