Giter VIP home page Giter VIP logo

angular-electron's Introduction

Angular Logo Electron Logo

Maintained Make a pull request License

Linux Build MacOS Build Windows Build

Watch on GitHub Star on GitHub Tweet

Introduction

Bootstrap and package your project with Angular 17 and Electron 27 (Typescript + SASS + Hot Reload) for creating Desktop applications.

Currently runs with:

  • Angular v17.0.8
  • Electron v27.2.0

With this sample, you can:

  • Run your app in a local development environment with Electron & Hot reload
  • Run your app in a production environment
  • Execute your tests with Jest and Playwright (E2E)
  • Package your app into an executable file for Linux, Windows & Mac

/!\ Hot reload only pertains to the renderer process. The main electron process is not able to be hot reloaded, only restarted.

/!\ Angular CLI & Electron Builder needs Node 18.10 or later to work correctly.

Getting Started

Clone this repository locally:

git clone https://github.com/maximegris/angular-electron.git

Install dependencies with npm (used by Electron renderer process):

npm install

There is an issue with yarn and node_modules when the application is built by the packager. Please use npm as dependencies manager.

If you want to generate Angular components with Angular-cli , you MUST install @angular/cli in npm global context. Please follow Angular-cli documentation if you had installed a previous version of angular-cli.

npm install -g @angular/cli

Install NodeJS dependencies with npm (used by Electron main process):

cd app/
npm install

Why two package.json ? This project follow Electron Builder two package.json structure in order to optimize final bundle and be still able to use Angular ng add feature.

To build for development

  • in a terminal window -> npm start

Voila! You can use your Angular + Electron app in a local development environment with hot reload!

The application code is managed by app/main.ts. In this sample, the app runs with a simple Angular App (http://localhost:4200), and an Electron window.
The Angular component contains an example of Electron and NodeJS native lib import.
You can disable "Developer Tools" by commenting win.webContents.openDevTools(); in app/main.ts.

Project structure

Folder Description
app Electron main process folder (NodeJS)
src Electron renderer process folder (Web / Angular)

How to import 3rd party libraries

This sample project runs in both modes (web and electron). To make this work, you have to import your dependencies the right way. \

There are two kind of 3rd party libraries :

  • NodeJS's one - Uses NodeJS core module (crypto, fs, util...)
    • I suggest you add this kind of 3rd party library in dependencies of both app/package.json and package.json (root folder) in order to make it work in both Electron's Main process (app folder) and Electron's Renderer process (src folder).

Please check providers/electron.service.ts to watch how conditional import of libraries has to be done when using NodeJS / 3rd party libraries in renderer context (i.e. Angular).

  • Web's one (like bootstrap, material, tailwind...)
    • It have to be added in dependencies of package.json (root folder)

Add a dependency with ng-add

You may encounter some difficulties with ng-add because this project doesn't use the defaults @angular-builders.
For example you can find here how to install Angular-Material with ng-add.

Browser mode

Maybe you only want to execute the application in the browser with hot reload? Just run npm run ng:serve:web.

Included Commands

Command Description
npm run ng:serve Execute the app in the web browser (DEV mode)
npm run web:build Build the app that can be used directly in the web browser. Your built files are in the /dist folder.
npm run electron:local Builds your application and start electron locally
npm run electron:build Builds your application and creates an app consumable based on your operating system

Your application is optimised. Only /dist folder and NodeJS dependencies are included in the final bundle.

You want to use a specific lib (like rxjs) in electron main thread ?

YES! You can do it! Just by importing your library in npm dependencies section of app/package.json with npm install --save XXXXX.
It will be loaded by electron during build phase and added to your final bundle.
Then use your library by importing it in app/main.ts file. Quite simple, isn't it?

E2E Testing

E2E Test scripts can be found in e2e folder.

Command Description
npm run e2e Execute end to end tests

Note: To make it work behind a proxy, you can add this proxy exception in your terminal
export {no_proxy,NO_PROXY}="127.0.0.1,localhost"

Debug with VsCode

VsCode debug configuration is available! In order to use it, you need the extension Debugger for Chrome.

Then set some breakpoints in your application's source code.

Finally from VsCode press Ctrl+Shift+D and select Application Debug and press F5.

Please note that Hot reload is only available in Renderer process.

Want to use Angular Material ? Ngx-Bootstrap ?

Please refer to HOW_TO file

Branch & Packages version

  • Angular 4 & Electron 1 : Branch angular4
  • Angular 5 & Electron 1 : Branch angular5
  • Angular 6 & Electron 3 : Branch angular6
  • Angular 7 & Electron 3 : Branch angular7
  • Angular 8 & Electron 7 : Branch angular8
  • Angular 9 & Electron 7 : Branch angular9
  • Angular 10 & Electron 9 : Branch angular10
  • Angular 11 & Electron 12 : Branch angular11
  • Angular 12 & Electron 16 : Branch angular12
  • Angular 13 & Electron 18 : Branch angular13
  • Angular 14 & Electron 21 : Branch angular14
  • Angular 15 & Electron 24 : Branch angular15
  • Angular 16 & Electron 25 : Branch angular16
  • Angular 17 & Electron 27 : (main)

angular-electron's People

Contributors

artemv avatar arunredhu avatar behroozbc avatar bsrinivasguptha avatar chenc041 avatar creadicted avatar cyluxx avatar dependabot[bot] avatar feliperfmarques avatar francescoborzi avatar heliomarpm avatar itreptau avatar jansivans avatar jczacharia avatar lazza avatar leo6104 avatar louich avatar maximegris avatar mrsurana avatar oliverlonghi avatar osmarcs avatar pallies avatar rajdeep97 avatar rm-code avatar sahan93knightz avatar theoomoregbee avatar thunder-coding avatar tomoyukiaota avatar whyboris avatar yannisgu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

angular-electron's Issues

Webpack error if there is a native module among the depedencies

I am trying to build a deskptop application with electron+ angular 4 + sqlite3 + sequelize

I have added sqlite3 as a dependency. Since it is a native module, I modified the package.js file so that the module will be rebuilt:

var electronRebuild =  require('electron-rebuild');
.
.
.
const opts = Object.assign({}, DEFAULT_OPTS, {
        platform: plat,
        arch,
        prune: true,
        overwrite: true,
        all: shouldBuildAll,
        out: `app-builds`,
        afterCopy: [(buildPath, electronVersion, platform, arch, callback) => {
          electronRebuild.rebuild(buildPath, electronVersion, arch)
            .then(() => callback())
            .catch((error) => callback(error));
        }],
    });

Since then when running npm start, I get the following errors:

WARNING in ./~/sqlite3/lib/sqlite3.js
4:14-35 Critical dependency: the request of a dependency is an expression

WARNING in ./~/sqlite3/~/node-pre-gyp/lib/pre-binding.js
19:22-48 Critical dependency: the request of a dependency is an expression

WARNING in ./~/sqlite3/~/node-pre-gyp/lib/util/versioning.js
15:20-67 Critical dependency: the request of a dependency is an expression
ERROR in ./~/sqlite3/~/node-pre-gyp/lib/info.js
Module not found: Error: Can't resolve 'aws-sdk' in '/home/alwin/WORK/videonik/node_modules/sqlite3/node_modules/node-pre-gyp/lib'
 @ ./~/sqlite3/~/node-pre-gyp/lib/info.js 14:14-32
 @ ./~/sqlite3/~/node-pre-gyp/lib ^\.\/.*$
 @ ./~/sqlite3/~/node-pre-gyp/lib/node-pre-gyp.js
 @ ./~/sqlite3/lib/sqlite3.js
 @ ./~/sequelize/lib/dialects/sqlite/connection-manager.js
 @ ./~/sequelize/lib/dialects/sqlite/index.js
 @ ./~/sequelize/lib/sequelize.js
 @ ./~/sequelize/index.js
 @ ./src/app/models/index.ts
 @ ./src/app/components/home/home.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

ERROR in ./~/sqlite3/~/node-pre-gyp/lib/publish.js
Module not found: Error: Can't resolve 'aws-sdk' in '/home/alwin/WORK/videonik/node_modules/sqlite3/node_modules/node-pre-gyp/lib'
 @ ./~/sqlite3/~/node-pre-gyp/lib/publish.js 17:14-32
 @ ./~/sqlite3/~/node-pre-gyp/lib ^\.\/.*$
 @ ./~/sqlite3/~/node-pre-gyp/lib/node-pre-gyp.js
 @ ./~/sqlite3/lib/sqlite3.js
 @ ./~/sequelize/lib/dialects/sqlite/connection-manager.js
 @ ./~/sequelize/lib/dialects/sqlite/index.js
 @ ./~/sequelize/lib/sequelize.js
 @ ./~/sequelize/index.js
 @ ./src/app/models/index.ts
 @ ./src/app/components/home/home.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

ERROR in ./~/sqlite3/~/node-pre-gyp/lib/unpublish.js
Module not found: Error: Can't resolve 'aws-sdk' in '/home/alwin/WORK/videonik/node_modules/sqlite3/node_modules/node-pre-gyp/lib'
 @ ./~/sqlite3/~/node-pre-gyp/lib/unpublish.js 15:14-32
 @ ./~/sqlite3/~/node-pre-gyp/lib ^\.\/.*$
 @ ./~/sqlite3/~/node-pre-gyp/lib/node-pre-gyp.js
 @ ./~/sqlite3/lib/sqlite3.js
 @ ./~/sequelize/lib/dialects/sqlite/connection-manager.js
 @ ./~/sequelize/lib/dialects/sqlite/index.js
 @ ./~/sequelize/lib/sequelize.js
 @ ./~/sequelize/index.js
 @ ./src/app/models/index.ts
 @ ./src/app/components/home/home.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

ERROR in ./~/sqlite3/~/node-pre-gyp/~/rc/index.js
Module parse failed: /home/alwin/WORK/videonik/node_modules/sqlite3/node_modules/node-pre-gyp/node_modules/rc/index.js Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #! /usr/bin/env node
| var cc   = require('./lib/utils')
| var join = require('path').join
 @ ./~/sqlite3/~/node-pre-gyp/lib/info.js 11:13-26
 @ ./~/sqlite3/~/node-pre-gyp/lib ^\.\/.*$
 @ ./~/sqlite3/~/node-pre-gyp/lib/node-pre-gyp.js
 @ ./~/sqlite3/lib/sqlite3.js
 @ ./~/sequelize/lib/dialects/sqlite/connection-manager.js
 @ ./~/sequelize/lib/dialects/sqlite/index.js
 @ ./~/sequelize/lib/sequelize.js
 @ ./~/sequelize/index.js
 @ ./src/app/models/index.ts
 @ ./src/app/components/home/home.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

If I run npm electron-rebuild command directly on the terminal, it works and a binding for electron is and another for the host machine architecture is created in node_modules/sqlite3/lib/bindings folder.

But when I run npm start, I get the above errors and when I check dist/node_modules/sqlite3/lib/bindings folder, there is only one binding generated (for the host os) and nothing for electron.

Am I doing something wrong?

Error while using node core modules

When I try to use any of the node core modules and then run npm start, it throws an error saying that it can't find the desired module.

I went through the README and I saw that the in the externals all the node core modules are included. I really can't figure out what's missing... here's my webpack config:

const path = require('path');
const webpack = require('webpack');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const postcssUrl = require('postcss-url');

const { NoEmitOnErrorsPlugin, LoaderOptionsPlugin, DefinePlugin, HashedModuleIdsPlugin } = require('webpack');
const { GlobCopyWebpackPlugin, BaseHrefWebpackPlugin } = require('@angular/cli/plugins/webpack');
const { CommonsChunkPlugin, UglifyJsPlugin } = require('webpack').optimize;
const { AotPlugin } = require('@ngtools/webpack');

const nodeModules = path.join(process.cwd(), 'node_modules');
const entryPoints = ["inline", "polyfills", "sw-register", "styles", "vendor", "main"];
const baseHref = "";
const deployUrl = "";

const isProd = (process.env.NODE_ENV === 'production');

function getPlugins() {
  var plugins = [];

  // Always expose NODE_ENV to webpack, you can now use `process.env.NODE_ENV`
  // inside your code for any environment checks; UglifyJS will automatically
  // drop any unreachable code.
  plugins.push(new DefinePlugin({
    "process.env.NODE_ENV": "\"production\""
  }));

  plugins.push(new NoEmitOnErrorsPlugin());

  plugins.push(new GlobCopyWebpackPlugin({
    "patterns": [
      "assets",
      "favicon.ico"
    ],
    "globOptions": {
      "cwd": process.cwd() + "/src",
      "dot": true,
      "ignore": "**/.gitkeep"
    }
  }));

  plugins.push(new ProgressPlugin());

  plugins.push(new HtmlWebpackPlugin({
    "template": "./src/index.html",
    "filename": "./index.html",
    "hash": false,
    "inject": true,
    "compile": true,
    "favicon": false,
    "minify": false,
    "cache": true,
    "showErrors": true,
    "chunks": "all",
    "excludeChunks": [],
    "title": "Webpack App",
    "xhtml": true,
    "chunksSortMode": function sort(left, right) {
      let leftIndex = entryPoints.indexOf(left.names[0]);
      let rightindex = entryPoints.indexOf(right.names[0]);
      if (leftIndex > rightindex) {
        return 1;
      }
      else if (leftIndex < rightindex) {
        return -1;
      }
      else {
        return 0;
      }
    }
  }));

  plugins.push(new BaseHrefWebpackPlugin({}));

  plugins.push(new CommonsChunkPlugin({
    "name": "inline",
    "minChunks": null
  }));

  plugins.push(new CommonsChunkPlugin({
    "name": "vendor",
    "minChunks": (module) => module.resource && module.resource.startsWith(nodeModules),
    "chunks": [
      "main"
    ]
  }));

  plugins.push(new ExtractTextPlugin({
    "filename": "[name].bundle.css",
    "disable": true
  }));

  plugins.push(new LoaderOptionsPlugin({
    "sourceMap": false,
    "options": {
      "postcss": [
        autoprefixer(),
        postcssUrl({
          "url": (obj) => {
            // Only convert root relative URLs, which CSS-Loader won't process into require().
            if (!obj.url.startsWith('/') || obj.url.startsWith('//')) {
              return obj.url;
            }
            if (deployUrl.match(/:\/\//)) {
              // If deployUrl contains a scheme, ignore baseHref use deployUrl as is.
              return `${deployUrl.replace(/\/$/, '')}${obj.url}`;
            }
            else if (baseHref.match(/:\/\//)) {
              // If baseHref contains a scheme, include it as is.
              return baseHref.replace(/\/$/, '') +
                `/${deployUrl}/${obj.url}`.replace(/\/\/+/g, '/');
            }
            else {
              // Join together base-href, deploy-url and the original URL.
              // Also dedupe multiple slashes into single ones.
              return `/${baseHref}/${deployUrl}/${obj.url}`.replace(/\/\/+/g, '/');
            }
          }
        })
      ],
      "sassLoader": {
        "sourceMap": false,
        "includePaths": []
      },
      "lessLoader": {
        "sourceMap": false
      },
      "context": ""
    }
  }));

  if (isProd) {
    plugins.push(new HashedModuleIdsPlugin({
      "hashFunction": "md5",
      "hashDigest": "base64",
      "hashDigestLength": 4
    }));

    plugins.push(new AotPlugin({
      "mainPath": "main.ts",
      "hostReplacementPaths": {
        "environments/index.ts": "environments/index.prod.ts"
      },
      "exclude": [],
      "tsConfigPath": "src/tsconfig.app.json"
    }));

    plugins.push(new UglifyJsPlugin({
      "mangle": {
        "screw_ie8": true
      },
      "compress": {
        "screw_ie8": true,
        "warnings": false
      },
      "sourceMap": false
    }));

  } else {
    plugins.push(new AotPlugin({
      "mainPath": "main.ts",
      "hostReplacementPaths": {
        "environments/index.ts": "environments/index.ts"
      },
      "exclude": [],
      "tsConfigPath": "src/tsconfig.app.json",
      "skipCodeGeneration": true
    }));
  }

  return plugins;
}

module.exports = {
  "devtool": "source-map",
  "externals": {
    "electron": "require('electron')",
    "child_process": "require('child_process')",
    "crypto": "require('crypto')",
    "events": "require('events')",
    "fs": "require('fs')",
    "http": "require('http')",
    "https": "require('https')",
    "assert": "require('assert')",
    "dns": "require('dns')",
    "net": "require('net')",
    "os": "require('os')",
    "path": "require('path')",
    "querystring": "require('querystring')",
    "readline": "require('readline')",
    "repl": "require('repl')",
    "stream": "require('stream')",
    "string_decoder": "require('string_decoder')",
    "url": "require('url')",
    "util": "require('util')",
    "zlib": "require('zlib')"
  },
  "resolve": {
    "extensions": [
      ".ts",
      ".js",
      ".scss",
      ".json"
    ],
    "aliasFields": [],
    "alias": { // WORKAROUND See. angular-cli/issues/5433
      "environments": isProd ? path.resolve(__dirname, 'src/environments/index.prod.ts') : path.resolve(__dirname, 'src/environments/index.ts')
    },
    "modules": [
      "./node_modules"
    ]
  },
  "resolveLoader": {
    "modules": [
      "./node_modules"
    ]
  },
  "entry": {
    "main": [
      "./src/main.ts"
    ],
    "polyfills": [
      "./src/polyfills.ts"
    ],
    "styles": [
      "./src/styles.scss"
    ]
  },
  "output": {
    "path": path.join(process.cwd(), "dist"),
    "filename": "[name].bundle.js",
    "chunkFilename": "[id].chunk.js"
  },
  "module": {
    "rules": [
      {
        "enforce": "pre",
        "test": /\.(js|ts)$/,
        "loader": "source-map-loader",
        "exclude": [
          /\/node_modules\//,
          path.join(__dirname, 'node_modules', '@angular/compiler')
        ]
      },
      {
        "test": /\.html$/,
        "loader": "html-loader"
      },
      {
        "test": /\.(eot|svg)$/,
        "loader": "file-loader?name=[name].[hash:20].[ext]"
      },
      {
        "test": /\.(jpg|png|gif|otf|ttf|woff|woff2|cur|ani)$/,
        "loader": "url-loader?name=[name].[hash:20].[ext]&limit=10000"
      },
      {
        "exclude": [
          path.join(process.cwd(), "src/styles.scss")
        ],
        "test": /\.css$/,
        "loaders": [
          "exports-loader?module.exports.toString()",
          "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
          "postcss-loader"
        ]
      },
      {
        "exclude": [
          path.join(process.cwd(), "src/styles.scss")
        ],
        "test": /\.scss$|\.sass$/,
        "loaders": [
          "exports-loader?module.exports.toString()",
          "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
          "postcss-loader",
          "sass-loader"
        ]
      },
      {
        "exclude": [
          path.join(process.cwd(), "src/styles.scss")
        ],
        "test": /\.less$/,
        "loaders": [
          "exports-loader?module.exports.toString()",
          "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
          "postcss-loader",
          "less-loader"
        ]
      },
      {
        "exclude": [
          path.join(process.cwd(), "src/styles.scss")
        ],
        "test": /\.styl$/,
        "loaders": [
          "exports-loader?module.exports.toString()",
          "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
          "postcss-loader",
          "stylus-loader?{\"sourceMap\":false,\"paths\":[]}"
        ]
      },
      {
        "include": [
          path.join(process.cwd(), "src/styles.scss")
        ],
        "test": /\.css$/,
        "loaders": ExtractTextPlugin.extract({
          "use": [
            "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
            "postcss-loader"
          ],
          "fallback": "style-loader",
          "publicPath": ""
        })
      },
      {
        "include": [
          path.join(process.cwd(), "src/styles.scss")
        ],
        "test": /\.scss$|\.sass$/,
        "loaders": ExtractTextPlugin.extract({
          "use": [
            "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
            "postcss-loader",
            "sass-loader"
          ],
          "fallback": "style-loader",
          "publicPath": ""
        })
      },
      {
        "include": [
          path.join(process.cwd(), "src/styles.scss")
        ],
        "test": /\.less$/,
        "loaders": ExtractTextPlugin.extract({
          "use": [
            "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
            "postcss-loader",
            "less-loader"
          ],
          "fallback": "style-loader",
          "publicPath": ""
        })
      },
      {
        "include": [
          path.join(process.cwd(), "src/styles.scss")
        ],
        "test": /\.styl$/,
        "loaders": ExtractTextPlugin.extract({
          "use": [
            "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
            "postcss-loader",
            "stylus-loader?{\"sourceMap\":false,\"paths\":[]}"
          ],
          "fallback": "style-loader",
          "publicPath": ""
        })
      },
      {
        "test": /\.ts$/,
        "loader": "@ngtools/webpack"
      }
    ]
  },
  "plugins": getPlugins(),
  "node": {
    fs: "empty",
    global: true,
    crypto: "empty",
    tls: "empty",
    net: "empty",
    process: true,
    module: false,
    clearImmediate: false,
    setImmediate: false,
    __dirname: false,
    __filename: false
  },
  target: 'electron-renderer'
};

I also read the other issue opened for the same exact problem, closed when the externals were added to the webpack config... how is it possible that it throws this error again?

Any help is really appreciated! By the way, great job with this boilerplate!

Image Url in electron's main.js

If you are using images in the main.js file of electron, the images are not included in the /dist folder. E.g.:

const iconPath = path.join(__dirname, 'icon.png');
appIcon = new Tray(iconPath);

'require is not defined' error in web mode

I have an error when i launch the app on web mode

npm install
npm run start:web

external "require('url')":1 Uncaught ReferenceError: require is not defined
at Object. (external "require('url')":1)
at webpack_require (bootstrap c843660…:54)
at Object. (client:2)
at Object.module.exports (client?ffdb:184)
at webpack_require (bootstrap c843660…:54)
at Object. (polyfills.bundle.js:4837)
at webpack_require (bootstrap c843660…:54)
at webpackJsonpCallback (bootstrap c843660…:25)
at polyfills.bundle.js:1

[feature request] native Typescript support

It would be nice to extend typescript build using same config as for angular, but for main.js (.ts) process, so both view and backend could be set in the same shared enviroment

Documentation

Hi ! I Just like to ask how to include the some npm modules and call it in the components (e.g. mysql - for connecting database).I already read the documentation but I need more detailed information on calling node modules in the component/services.Thank you

https://github.com/mysqljs/mysql
How can I achieve this one in your boilerplate?

var mysql = require('mysql');
var connection = mysql.createConnection({
host : 'localhost',
user : 'me',
password : 'secret',
database : 'my_db'
});

connection.connect();

connection.query('SELECT 1 + 1 AS solution', function (error, results, fields) {
if (error) throw error;
console.log('The solution is: ', results[0].solution);
});

connection.end();

scss files in styles block of angular-cli.json not being injected into html

I have been trying to use angular-bootstrap-md following the instructions here https://www.npmjs.com/package/angular-bootstrap-md .

I updated package.json to solve unmet dependency problems.

no error raised for running npm start and npm run electron:serve.

I deleted the content of styles.scss and home.component.scss.
And changed home.component.html to

<h1 class="title">
    {{title}}
</h1>
<button type="button" class="btn btn-primary">btn</button>

Here screen shot of the result
angular_electron_mdb

updated styles bloc in angular-cli.json:

"styles": [
    "../node_modules/font-awesome/scss/font-awesome.scss",
    "../node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
    "../node_modules/angular-bootstrap-md/scss/mdb.scss",
    "./styles.scss"
],

app.module.ts now looks like

...
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
...
import { MDBBootstrapModule } from 'angular-bootstrap-md';

@NgModule({
    ...
  imports: [
    ...
    MDBBootstrapModule.forRoot()
  ],
  schemas: [ NO_ERRORS_SCHEMA ],
  ...
})
export class AppModule { }

thank you!

Node Modules

How to use native node modules?

import { Component } from '@angular/core';
import * as c from 'child_process';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app works!';

  constructor() {
    console.log('c', c);
  }
}

Webpack error:

$ npm run build

> [email protected] build C:\Users\daniel\projects\angular-electron
> ng build && copyfiles main.js dist

Hash: f817a55010bbe497b5df
Time: 8290ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 3.98 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.89 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.07 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in C:/Users/daniel/projects/angular-electron/src/app/app.component.ts (2,20): Cannot find module 'child_process'.

ERROR in C:/Users/daniel/projects/angular-electron/src/app/app.component.ts (2,20): Cannot find module 'child_process'.

ERROR in ./src/app/app.component.ts
Module not found: Error: Can't resolve 'child_process' in 'C:\Users\daniel\projects\angular-electron\src\app'
 @ ./src/app/app.component.ts 11:0-35
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

Third party packages

I'm trying to create a service to use jsforce. But when I lunch the app, I get an error

Uncaught TypeError: Cannot read property 'prototype' of undefined
    at Object.inherits (inherits_browser.js:5)
    at Object.<anonymous> (index.js:388)
    at Object.module.exports.100 (index.js:610)
    at __webpack_require__ (bootstrap 1209468…:54)
    at Object.<anonymous> (request.js:8)
    at Object.<anonymous> (request.js:1565)
    at __webpack_require__ (bootstrap 1209468…:54)
    at Object.<anonymous> (index.js:144)
    at __webpack_require__ (bootstrap 1209468…:54)
    at Object.<anonymous> (transport.js:10)
inherits @ inherits_browser.js:5
(anonymous) @ index.js:388
module.exports.100 @ index.js:610
__webpack_require__ @ bootstrap 1209468…:54
(anonymous) @ request.js:8
(anonymous) @ request.js:1565
__webpack_require__ @ bootstrap 1209468…:54
(anonymous) @ index.js:144
__webpack_require__ @ bootstrap 1209468…:54
(anonymous) @ transport.js:10
(anonymous) @ transport.js:233
__webpack_require__ @ bootstrap 1209468…:54
(anonymous) @ oauth2.js:10
__webpack_require__ @ bootstrap 1209468…:54
(anonymous) @ connection.js:14
(anonymous) @ connection.js:1384
__webpack_require__ @ bootstrap 1209468…:54
(anonymous) @ core.js:11
__webpack_require__ @ bootstrap 1209468…:54
(anonymous) @ analytics.js:9
__webpack_require__ @ bootstrap 1209468…:54
(anonymous) @ index.js:1
__webpack_require__ @ bootstrap 1209468…:54
(anonymous) @ jsforce.js:8
__webpack_require__ @ bootstrap 1209468…:54
(anonymous) @ index.js:1
__webpack_require__ @ bootstrap 1209468…:54
461 @ navigation.component.ts:14
__webpack_require__ @ bootstrap 1209468…:54
198 @ main.bundle.js:30
__webpack_require__ @ bootstrap 1209468…:54
459 @ app.component.ts:14
__webpack_require__ @ bootstrap 1209468…:54
449 @ main.bundle.js:144
__webpack_require__ @ bootstrap 1209468…:54
1088 @ main.bundle.js:20
__webpack_require__ @ bootstrap 1209468…:54
webpackJsonpCallback @ bootstrap 1209468…:25
(anonymous) @ main.bundle.js:1

My service is the following one :

import { Injectable } from '@angular/core';

import { BehaviorSubject } from 'rxjs/Rx'

import * as jsforce from 'jsforce';

@Injectable()
export class SalesforceService {

  private connection;
  public connected = new BehaviorSubject(false);

  constructor() {
    const url = 'https://xxxxxx.my.salesforce.com';
    const login = '[email protected]';
    const password = 'xxxxxxxxx';
    const token = 'xxxxxxxxxxxx';

    this.connection = new jsforce.Connection({
      loginUrl: url
    });

    this.connection.login(login, password.concat(token))
      .then((res) => {
        this.connected.next(true);
        console.log('Connected');
        return;
      }, (err) => {
        console.error(err);
      });
  }

  dashboard(): Promise<any> {
    return this.connection.query('SELECT ForecastCategoryName, sum(Amount) amount FROM Opportunity WHERE CloseDate = THIS_FISCAL_YEAR AND ForecastCategoryName != \'Omitted\' AND Id in (SELECT OpportunityId FROM OpportunityTeamMember WHERE Name = \'Antonin Bruneau\') GROUP BY ForecastCategoryName');
  }

}

Cant use Rxjs module in mainProcess

Using rx js gives errors when trying to include in the mainProccess

import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
node_modules/rxjs/Observable.d.ts(69,60): error TS2693: 'Promise' only refers to a type, but is being used as a value here.
node_modules/rxjs/operator/toPromise.d.ts(3,79): error TS2693: 'Promise' only refers to a type, but is being used as a value here.

Repro steps

$ git clone https://github.com/maximegris/angular-electron.git
$ cd angular-electron/
$ npm i

Add the following lines to main.ts at top.

import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
$ npm start
$ npm run electon:serve

Require 3rd party npm packages in main.js

Requiring 3rd party modules in electron's main.js results in an error messages "Cannot find modle xy" after building for a plattform and starting the application. For example I require nedb in main.js

//Require nedb here to make sure we have a file instead of IndexDB
const Datastore = require('nedb'),
    db = new Datastore({ filename: path.join(app.getPath('userData'), './data.db'), autoload: true });
global.datastore = db;

To solve this I run npm install in the /dist folder. Maybe there is a better solution?

Cannot find module 'html-webpack-plugin'

I got an error 'Cannot find module 'html-webpack-plugin', when i enter npm start

[email protected] start D:\xhhm\desktop
webpack --watch

module.js:471
throw err;
^

Error: Cannot find module 'html-webpack-plugin'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (D:\xhhm\desktop\webpack.config.js:4:27)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: webpack --watch
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\lerry\AppData\Roaming\npm-cache_logs\2017-07-07T03_34_16_751Z-debug.log

Here's the 2017-07-07T03_34_16_751Z-debug.log:
0 info it worked if it ends with ok
1 verbose cli [ 'D:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Users\lerry\AppData\Roaming\npm\node_modules\.npm_npminstall\npm\5.1.0\npm\bin\npm-cli.js',
1 verbose cli 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]prestart: [email protected]
6 info lifecycle [email protected]
start: [email protected]
7 verbose lifecycle [email protected]start: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]
start: PATH: C:\Users\lerry\AppData\Roaming\npm\node_modules.npm_npminstall\npm\5.1.0\npm\bin\node-gyp-bin;D:\xhhm\desktop\node_modules.bin;C:\Program Files\Docker\Docker\Resources\bin;C:\tools\ruby22\bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\Program Files\Microsoft SQL Server\120\Tools\Binn;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\110\Tools\Binn;C:\Program Files (x86)\Microsoft SQL Server\120\Tools\Binn;C:\Program Files\Microsoft SQL Server\120\DTS\Binn;C:\Program Files\Microsoft SQL Server\130\Tools\Binn;C:\Program Files (x86)\Microsoft SQL Server\120\Tools\Binn\ManagementStudio;C:\Program Files (x86)\Microsoft SQL Server\120\DTS\Binn;C:\Program Files (x86)\Microsoft SQL Server\80\Tools\Binn;C:\Program Files\Microsoft SQL Server\90\DTS\Binn;C:\Program Files\Microsoft SQL Server\90\Tools\binn;C:\Program Files (x86)\Microsoft SQL Server\90\Tools\binn;C:\Program Files (x86)\Microsoft SQL Server\90\DTS\Binn;C:\Program Files (x86)\Microsoft SQL Server\90\Tools\Binn\VSShell\Common7\IDE;C:\Program Files (x86)\Microsoft Visual Studio 8\Common7\IDE\PrivateAssemblies;D:\Program Files\TortoiseSVN\bin;d:\Program Files\Git\cmd;C:\Program Files (x86)\Java\jdk1.7.0_55\bin;D:\Android\android-sdk\tools;D:\Android\android-sdk\platform-tools;C:\Users\lerry\AppData\Roaming\npm;C:\ProgramData\chocolatey\bin;C:/git-tf;C:\Program Files (x86)\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn;C:\Program Files (x86)\Microsoft SQL Server\130\Tools\Binn;C:\Program Files (x86)\Microsoft SQL Server\130\DTS\Binn;C:\Program Files (x86)\Microsoft SQL Server\130\Tools\Binn\ManagementStudio;C:\Program Files (x86)\Skype\Phone;C:\Program Files\dotnet;D:\Program Files\nodejs;%SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem;%SYSTEMROOT%\System32\WindowsPowerShell\v1.0;C:\Users\lerry.dnx\bin;D:\Program Files (x86)\Microsoft VS Code\bin;C:\Users\lerry\AppData\Local\Microsoft\WindowsApps;C:\Users\lerry\AppData\Roaming\npm;
9 verbose lifecycle [email protected]start: CWD: D:\xhhm\desktop
10 silly lifecycle [email protected]
start: Args: [ '/d /s /c', 'webpack --watch' ]
11 silly lifecycle [email protected]start: Returned: code: 1 signal: null
12 info lifecycle [email protected]
start: Failed to exec start script
13 verbose stack Error: [email protected] start: webpack --watch
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (C:\Users\lerry\AppData\Roaming\npm\node_modules.npm_npminstall\npm\5.1.0\npm\lib\utils\lifecycle.js:289:16)
13 verbose stack at emitTwo (events.js:106:13)
13 verbose stack at EventEmitter.emit (events.js:191:7)
13 verbose stack at ChildProcess. (C:\Users\lerry\AppData\Roaming\npm\node_modules.npm_npminstall\npm\5.1.0\npm\lib\utils\spawn.js:40:14)
13 verbose stack at emitTwo (events.js:106:13)
13 verbose stack at ChildProcess.emit (events.js:191:7)
13 verbose stack at maybeClose (internal/child_process.js:891:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
14 verbose pkgid [email protected]
15 verbose cwd D:\xhhm\desktop
16 verbose Windows_NT 10.0.15063
17 verbose argv "D:\Program Files\nodejs\node.exe" "C:\Users\lerry\AppData\Roaming\npm\node_modules\.npm_npminstall\npm\5.1.0\npm\bin\npm-cli.js" "start"
18 verbose node v6.11.0
19 verbose npm v5.1.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] start: webpack --watch
22 error Exit status 1
23 error Failed at the [email protected] start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Electron reload not working

Hi. First of all thanks for this great repository. Im pretty new working with Angular 4 so this problem may be because of that.
The issue is that live reloading my app after changes in the code are done is not possible until i change app-routing.module.ts to this:

@NgModule({
    imports: [RouterModule.forRoot(routes, {useHash: true})],
    exports: [RouterModule]
})

Also i had to change index.html base href tag to be empty:
<base href="">
all this to tell angular to work with hashbang style routes instead of html5 style routes.

The solution came from here.

¿is this the right solution or i'm missing something?

Thanks in advance, gr33ts from Chile.

Angular cli not working

This is a nice repository. Exactly the thing i searched for so long. But is there a way to use the angular cli?

When i try to create a new component i get this error message;

You have to be inside an angular-cli project in order to use the generate command.

Import a node module

I want to use mysql(https://github.com/mysqljs/mysql - Node module.Not the database) for my electron app. I just like to ask how to import it in components/services.

Is using the code below(which is written in your documentation) applicable to my concern?

"externals": {
"electron": 'require('electron')',
"child_process": 'require('child_process')',
"fs": 'require('fs')'
...
}
Need a reply. Thanks!!!

package.json

Hi

First of all, thank you for this fabulous angular-electron bootstrap.

I think there's a typo i package.json "electron:dist" script - "ru1" instead of "run".

To build an app on mac/os, I've to change "." to "dist" in "electron:mac" script. This also makes it equal build scripts for other platforms. I'm not sure how it's ment to work, but for me this is the only way I can make the app work on mac.

Regards
Jacob

NPM packages installation error

Hey. When I run npm install after cloning the repo, I get next error:
image
The Angular part (the CLI process) works, when I run npm start, but the Electron part doesn't.

process.platform return undefined

I'm using some npm packages that rely on process.platform
The problem is that this command returns undefined when run in angular context.
But when I run it in the developper tool console, I get the right information.

Am I missing something ?

[feature request] Separated angular serve

ng cli doenst work after eject. Also npm start runs webpack without server.
Can you and equivalent for ng serve --open?

The reason why I ask is very buggy behavior of electron serve and actually every time webpack rebuilds changes, electron crashes... Cant find reason why.

Writing and reading files

I'm trying writing and reading the database of my application, but the application is returning message error:

Pb: (e) code:"J" g:undefined message:"No such file or directory" o:2

If database doesn't exist, I get message "No such file or directory", if database already exist I get message:

TypeError: t.forEach is not a function at l.GetAll (main.bundle.js:1) at l.GetAllBooks (main.bundle.js:1) at Object.handleEvent (main.bundle.js:1) at Object.m [as handleEvent] (vendor.bundle.js:302) at Object.handleEvent (vendor.bundle.js:302) at Ue (vendor.bundle.js:260) at vendor.bundle.js:267 at HTMLButtonElement.<anonymous> (vendor.bundle.js:691) at t.invokeTask (polyfills.bundle.js:36) at Object.onInvokeTask (vendor.bundle.js:344)

I have been tried everything, nedb, install prebuilder, move function to main... and doesn't work

I'm using getPath to get userData for database:
const pathDatabase = path.resolve(remote.app.getPath("userData"), "MyDb.db");

How I add a new type definition in this project?

Hello guys.

I'm trying to add an electron type definition for my TS, but VS Code don't recognize it.

I'm doing npm command:

npm i @types/electron --save-dev

is There another way to do that?

Thanks

production mode

Is it possible to build for production mode with npm run electron:dist? This way the environment vars are loaded from environment.prod.ts

[feature-request] Add support for auto updates

@maximegris it would be really nice if you could add support for "auto updates" ! Maybe using something like electron-builder that accordingly to their documentation *A complete solution to package and build a ready for distribution Electron app with “auto update” support out of the box * I am still new to Electron but learning fast maybe i can help with something

Import Fonts and assets

I'm having trouble importing fonts and assets.
I'm having the error URL.startsWith is not a function
When I print the URL I get this :

{ url: '~ionicons/dist/fonts/ionicons.eot?v=3.0.0-alpha.3',
  pathname: '~ionicons/dist/fonts/ionicons.eot',
  absolutePath: '/Users/abruneau/GitHub/Cmp2_Angular4/src/app/~ionicons/dist/fonts/ionicons.eot',
  relativePath: '~ionicons/dist/fonts/ionicons.eot',
  search: '?v=3.0.0-alpha.3',
  hash: '' }

This is when I try to do @import "~ionicons/dist/scss/ionicons";

Images in template html / webpack problem

Hello thx for your previous answer :) ,

I also have others issues :

I have a custom js script and unfortunately I need to reuse it in a template. How can I import it without using a : <script src="myscripts.js"></script> in the template.

The second problem is also related to the tempale : I want to know how can I display images in my template. For example in index.html I want to add a svg and a png image from my assets folder. But when I put the <img> tag with the correct path after a webpack --watch the image is not found. Webpack don't add my image to the dist folder. My assets are in src/assets.

Thank you by advance for your answer,

Style Sheets

I've created a new style sheet named 'test.css' in the 'src' folder and I've added it to the styles array in the .angular-cli.json file but it isn't being loaded. What am I doing wrong?

Importing css from node modules

I am trying to import bootstrap css file from npm module.

In angular-cli.json:

 "styles": [
        "styles.scss",
        "../node_modules/admin-lte/bootstrap/css/bootstrap.css"
]

In webpack.config

 "styles": [
      "./src/styles.scss",
      "./node_modules/admin-lte/bootstrap/css/bootstrap.min.css"
]

Styles are in the style.bundle but don't applied on the DOM

Can someone help me?

Regards

Can't build in prod mode

When trying to build in prod mode getting module note found error :

ERROR in ./src/main.ts Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Applications/MAMP/htdocs/abc/src' resolve './$$_gendir/app/app.module.ngfactory' in '/Applications/MAMP/htdocs/abc/src' using description file: /Applications/MAMP/htdocs/abc/package.json (relative path: ./src) after using description file: /Applications/MAMP/htdocs/abc/package.json (relative path: ./src) using description file: /Applications/MAMP/htdocs/abc/package.json (relative path: ./src/$$_gendir/app/app.module.ngfactory) no extension /Applications/MAMP/htdocs/abc/src/$$_gendir/app/app.module.ngfactory doesn't exist .ts /Applications/MAMP/htdocs/abc/src/$$_gendir/app/app.module.ngfactory.ts doesn't exist .js /Applications/MAMP/htdocs/abc/src/$$_gendir/app/app.module.ngfactory.js doesn't exist .scss /Applications/MAMP/htdocs/abc/src/$$_gendir/app/app.module.ngfactory.scss doesn't exist .json /Applications/MAMP/htdocs/abc/src/$$_gendir/app/app.module.ngfactory.json doesn't exist as directory /Applications/MAMP/htdocs/abc/src/$$_gendir/app/app.module.ngfactory doesn't exist

Unable to run start:web on macOS

So yesterday I was working on my Windows PC and I was able to setup the web environnement. I save my repo and today I try to use it with my mac. But the Web version isn't working (but the electron:mac work)

Here the output of the console if it mean something to you.
__Note : __ I was using 1.3.2 but it not working on the most recent code too.

Here some highlight that could help :

WARNING in ./~/node-gyp/lib/Find-VS2017.cs
Module parse failed: /Users/maxime/Downloads/angular-electron-1.3.2/node_modules/node-gyp/lib/Find-VS2017.cs Unexpected token (7:6)
You may need an appropriate loader to handle this file type.
| // Usage:
| // powershell -ExecutionPolicy Unrestricted -Version "2.0" -Command "&{Add-Type -Path Find-VS2017.cs; [VisualStudioConfiguration.Main]::Query()}"

Here the full version :

npm run start:web

> [email protected] start:web /Users/maxime/Downloads/angular-electron-1.3.2
> webpack-dev-server . --port 4200

 10% building modules 3/3 modules 0 activeProject is running at http://localhost:4200/
webpack output is served from /
Hash: dc1a6629e9604aa57cd4
Version: webpack 2.4.1
Time: 18135ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 151 kB {4} [initial] [rendered]
   [83] ./~/core-js/modules/_core.js 117 bytes {0} [built]
  [241] ./~/zone.js/dist/zone.js 87.2 kB {0} {3} [built]
  [430] ./src/polyfills.ts 2.45 kB {0} [built]
  [500] ./~/core-js/es6/reflect.js 717 bytes {0} [built]
  [501] ./~/core-js/es7/reflect.js 510 bytes {0} [built]
  [527] ./~/core-js/modules/es6.reflect.apply.js 640 bytes {0} [built]
  [539] ./~/core-js/modules/es6.reflect.set-prototype-of.js 376 bytes {0} [built]
  [544] ./~/core-js/modules/es7.reflect.delete-metadata.js 750 bytes {0} [built]
  [545] ./~/core-js/modules/es7.reflect.get-metadata-keys.js 861 bytes {0} [built]
  [546] ./~/core-js/modules/es7.reflect.get-metadata.js 796 bytes {0} [built]
  [547] ./~/core-js/modules/es7.reflect.get-own-metadata-keys.js 400 bytes {0} [built]
  [548] ./~/core-js/modules/es7.reflect.get-own-metadata.js 417 bytes {0} [built]
  [549] ./~/core-js/modules/es7.reflect.has-metadata.js 713 bytes {0} [built]
  [550] ./~/core-js/modules/es7.reflect.has-own-metadata.js 417 bytes {0} [built]
  [947] multi (webpack)-dev-server/client?http://localhost:4200 ./src/polyfills.ts 40 bytes {0} [built]
     + 88 hidden modules
chunk    {1} main.bundle.js, main.bundle.js.map (main) 13.7 kB {3} [initial] [rendered]
  [242] ./src/app/components/home/home.component.ts 1.3 kB {1} [built]
  [243] ./src/app/providers/electron.service.ts 1.41 kB {1} [built]
  [427] ./src async 160 bytes {1} [built]
  [429] ./src/main.ts 353 bytes {1} [built]
  [432] ./main.js 2 kB {1} [built]
  [438] ./src/app/app-routing.module.ts 1.15 kB {1} [built]
  [439] ./src/app/app.component.ts 1.91 kB {1} [built]
  [440] ./src/app/app.module.ts 1.55 kB {1} [built]
  [441] ./src/environments/index.ts 326 bytes {1} [built]
  [556] ./~/electron-reload 160 bytes {1} [built]
  [560] ./src/app/app.component.scss 240 bytes {1} [built]
  [561] ./src/app/components/home/home.component.scss 523 bytes {1} [built]
  [717] ./src/app/app.component.html 53 bytes {1} [built]
  [718] ./src/app/components/home/home.component.html 62 bytes {1} [built]
  [946] multi (webpack)-dev-server/client?http://localhost:4200 ./src/main.ts . 52 bytes {1} [built]
     + 10 hidden modules
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 14.5 kB {4} [initial] [rendered]
  [117] ./~/css-loader/lib/css-base.js 1.46 kB {2} {3} [built]
  [431] ./src/styles.scss 1.28 kB {2} [built]
  [552] ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./~/sass-loader/lib/loader.js!./src/styles.scss 235 bytes {2} [built]
  [877] ./~/style-loader/addStyles.js 8.51 kB {2} [built]
  [878] ./~/style-loader/fixUrls.js 3.01 kB {2} [built]
  [948] multi (webpack)-dev-server/client?http://localhost:4200 ./src/styles.scss 40 bytes {2} [built]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 6.02 MB [initial] [rendered]
    [4] ./~/path-browserify/index.js 6.18 kB {3} [built]
   [18] ./~/rxjs/Observable.js 5.64 kB {3} [built]
   [27] ./~/@angular/core/@angular/core.es5.js 460 kB {3} [built]
  [117] ./~/css-loader/lib/css-base.js 1.46 kB {2} {3} [built]
  [155] ./~/@angular/common/@angular/common.es5.js 131 kB {3} [built]
  [241] ./~/zone.js/dist/zone.js 87.2 kB {0} {3} [built]
  [433] ./~/@angular/compiler/@angular/compiler.es5.js 983 kB {3} [built]
  [434] ./~/@angular/forms/@angular/forms.es5.js 204 kB {3} [built]
  [435] ./~/@angular/http/@angular/http.es5.js 72.7 kB {3} [built]
  [436] ./~/@angular/platform-browser-dynamic/@angular/platform-browser-dynamic.es5.js 6.09 kB {3} [built]
  [494] ./~/chokidar/index.js 23 kB {3} [built]
  [557] ./~/electron-reload/main.js 2.1 kB {3} [optional] [built]
  [826] ./~/reflect-metadata/Reflect.js 48 kB {3} [built]
  [851] ./~/rxjs/observable/merge.js 128 bytes {3} [built]
  [864] ./~/rxjs/operator/share.js 923 bytes {3} [built]
     + 659 hidden modules
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 545 kB [entry] [rendered]
    [0] ./~/process/browser.js 5.42 kB {4} [built]
    [2] ./~/node-libs-browser/mock/empty.js 0 bytes {4} [built]
    [8] (webpack)/buildin/global.js 509 bytes {4} [built]
   [12] ./~/url/url.js 23.3 kB {4} [built]
   [42] ./~/querystring-es3/index.js 127 bytes {4} [built]
   [80] (webpack)-dev-server/client?http://localhost:4200 5.68 kB {4} [built]
  [147] ./~/strip-ansi/index.js 161 bytes {4} [built]
  [472] ./~/ansi-html/index.js 4.26 kB {4} [built]
  [473] ./~/ansi-regex/index.js 135 bytes {4} [built]
  [713] ./~/html-entities/index.js 231 bytes {4} [built]
  [891] ./~/url/util.js 314 bytes {4} [built]
  [898] (webpack)-dev-server/client/overlay.js 3.73 kB {4} [built]
  [899] (webpack)-dev-server/client/socket.js 897 bytes {4} [built]
  [903] (webpack)-dev-server/~/sockjs-client/lib/entry.js 244 bytes {4} [built]
  [930] (webpack)/hot/emitter.js 77 bytes {4} [built]
     + 128 hidden modules

WARNING in ./~/fsevents/~/node-pre-gyp/lib/util/compile.js
Module not found: Error: Can't resolve 'npm' in '/Users/maxime/Downloads/angular-electron-1.3.2/node_modules/fsevents/node_modules/node-pre-gyp/lib/util'
 @ ./~/fsevents/~/node-pre-gyp/lib/util/compile.js 39:27-49
 @ ./~/fsevents/~/node-pre-gyp/lib ^\.\/.*$
 @ ./~/fsevents/~/node-pre-gyp/lib/node-pre-gyp.js
 @ ./~/fsevents/fsevents.js
 @ ./~/chokidar/lib/fsevents-handler.js
 @ ./~/chokidar/index.js
 @ ./~/electron-reload/main.js
 @ ./main.js
 @ multi (webpack)-dev-server/client?http://localhost:4200 ./src/main.ts .

WARNING in ./~/node-gyp/lib/Find-VS2017.cs
Module parse failed: /Users/maxime/Downloads/angular-electron-1.3.2/node_modules/node-gyp/lib/Find-VS2017.cs Unexpected token (7:6)
You may need an appropriate loader to handle this file type.
| // Usage:
| // powershell -ExecutionPolicy Unrestricted -Version "2.0" -Command "&{Add-Type -Path Find-VS2017.cs; [VisualStudioConfiguration.Main]::Query()}"
| using System;
| using System.Text;
| using System.Runtime.InteropServices;
 @ ./~/node-gyp/lib ^\.\/.*$
 @ ./~/node-gyp/lib/node-gyp.js
 @ ./~/fsevents/~/node-pre-gyp/lib/util/compile.js
 @ ./~/fsevents/~/node-pre-gyp/lib ^\.\/.*$
 @ ./~/fsevents/~/node-pre-gyp/lib/node-pre-gyp.js
 @ ./~/fsevents/fsevents.js
 @ ./~/chokidar/lib/fsevents-handler.js
 @ ./~/chokidar/index.js
 @ ./~/electron-reload/main.js
 @ ./main.js
 @ multi (webpack)-dev-server/client?http://localhost:4200 ./src/main.ts .

WARNING in ./~/electron-reload/main.js
40:17-60 Critical dependency: the request of a dependency is an expression

WARNING in ./~/fsevents/fsevents.js
14:13-71 Critical dependency: the request of a dependency is an expression

WARNING in ./~/fsevents/~/node-pre-gyp/lib/pre-binding.js
19:22-48 Critical dependency: the request of a dependency is an expression

WARNING in ./~/fsevents/~/node-pre-gyp/lib/util/versioning.js
15:20-67 Critical dependency: the request of a dependency is an expression

WARNING in ./~/ajv/lib/async.js
96:20-33 Critical dependency: the request of a dependency is an expression

WARNING in ./~/ajv/lib/async.js
119:15-28 Critical dependency: the request of a dependency is an expression

WARNING in ./~/ajv/lib/compile/index.js
13:21-34 Critical dependency: the request of a dependency is an expression

ERROR in ./~/fsevents/~/node-pre-gyp/lib/info.js
Module not found: Error: Can't resolve 'aws-sdk' in '/Users/maxime/Downloads/angular-electron-1.3.2/node_modules/fsevents/node_modules/node-pre-gyp/lib'
 @ ./~/fsevents/~/node-pre-gyp/lib/info.js 14:14-32
 @ ./~/fsevents/~/node-pre-gyp/lib ^\.\/.*$
 @ ./~/fsevents/~/node-pre-gyp/lib/node-pre-gyp.js
 @ ./~/fsevents/fsevents.js
 @ ./~/chokidar/lib/fsevents-handler.js
 @ ./~/chokidar/index.js
 @ ./~/electron-reload/main.js
 @ ./main.js
 @ multi (webpack)-dev-server/client?http://localhost:4200 ./src/main.ts .

ERROR in ./~/fsevents/~/node-pre-gyp/lib/publish.js
Module not found: Error: Can't resolve 'aws-sdk' in '/Users/maxime/Downloads/angular-electron-1.3.2/node_modules/fsevents/node_modules/node-pre-gyp/lib'
 @ ./~/fsevents/~/node-pre-gyp/lib/publish.js 17:14-32
 @ ./~/fsevents/~/node-pre-gyp/lib ^\.\/.*$
 @ ./~/fsevents/~/node-pre-gyp/lib/node-pre-gyp.js
 @ ./~/fsevents/fsevents.js
 @ ./~/chokidar/lib/fsevents-handler.js
 @ ./~/chokidar/index.js
 @ ./~/electron-reload/main.js
 @ ./main.js
 @ multi (webpack)-dev-server/client?http://localhost:4200 ./src/main.ts .

ERROR in ./~/fsevents/~/node-pre-gyp/lib/unpublish.js
Module not found: Error: Can't resolve 'aws-sdk' in '/Users/maxime/Downloads/angular-electron-1.3.2/node_modules/fsevents/node_modules/node-pre-gyp/lib'
 @ ./~/fsevents/~/node-pre-gyp/lib/unpublish.js 15:14-32
 @ ./~/fsevents/~/node-pre-gyp/lib ^\.\/.*$
 @ ./~/fsevents/~/node-pre-gyp/lib/node-pre-gyp.js
 @ ./~/fsevents/fsevents.js
 @ ./~/chokidar/lib/fsevents-handler.js
 @ ./~/chokidar/index.js
 @ ./~/electron-reload/main.js
 @ ./main.js
 @ multi (webpack)-dev-server/client?http://localhost:4200 ./src/main.ts .

ERROR in ./~/fsevents/~/rc/index.js
Module parse failed: /Users/maxime/Downloads/angular-electron-1.3.2/node_modules/fsevents/node_modules/rc/index.js Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #! /usr/bin/env node
| var cc   = require('./lib/utils')
| var join = require('path').join
 @ ./~/fsevents/~/node-pre-gyp/lib/info.js 11:13-26
 @ ./~/fsevents/~/node-pre-gyp/lib ^\.\/.*$
 @ ./~/fsevents/~/node-pre-gyp/lib/node-pre-gyp.js
 @ ./~/fsevents/fsevents.js
 @ ./~/chokidar/lib/fsevents-handler.js
 @ ./~/chokidar/index.js
 @ ./~/electron-reload/main.js
 @ ./main.js
 @ multi (webpack)-dev-server/client?http://localhost:4200 ./src/main.ts .

ERROR in ./~/node-gyp/lib/node-gyp.js
Module not found: Error: Can't resolve '../package' in '/Users/maxime/Downloads/angular-electron-1.3.2/node_modules/node-gyp/lib'
 @ ./~/node-gyp/lib/node-gyp.js 67:16-37
 @ ./~/fsevents/~/node-pre-gyp/lib/util/compile.js
 @ ./~/fsevents/~/node-pre-gyp/lib ^\.\/.*$
 @ ./~/fsevents/~/node-pre-gyp/lib/node-pre-gyp.js
 @ ./~/fsevents/fsevents.js
 @ ./~/chokidar/lib/fsevents-handler.js
 @ ./~/chokidar/index.js
 @ ./~/electron-reload/main.js
 @ ./main.js
 @ multi (webpack)-dev-server/client?http://localhost:4200 ./src/main.ts .
Child html-webpack-plugin for "index.html":
    chunk    {0} ./index.html 351 bytes [entry] [rendered]
        [0] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 351 bytes {0} [built]
webpack: Failed to compile.

By the way sorry to post all of this cause I'm not able to make it work myself...

Debugging main process

I tried console logging from the main process, but I don't see it in my command console nor developer tool.

Any way of displaying the console logs from the main process?

App icon is broken

It appears you're not overwriting 'DEFAULT_OPTS.icon' with the new icon path (so that it includes the extension). Also, as it is currently architected, you need to prefix the initial path with 'src/' => 'src/assets/favicon'.

angular-cli file don't import css/js files

Hello,

First thanks for your nice job for having embedded angular 4 into electron. I currently have a problem for adding js and css script to my project using the angular-cli file.

I think nothing is detecting in angular-cli even I remove all the content. I tried to clone again your project but nothing work.

"styles": [ "styles.scss", "./node_modules/materialize-css/bin/materialize.css" ],
even this to :
"styles": [ "styles.scss", "../node_modules/materialize-css/bin/materialize.css" ],

"scripts": [ "test.js" ],

Thx by advance for you help,

Image Url in ts files

First of all thank you for the great repo. I discovered some img url issues using this boilerplate. I hope you don't mind posting some tickets about that.


If you use image url in an angular component typescript file, the image is not included in the dist folder. E.g.:

@Component({...})
export class AppComponent {
  backgroundUrl = '../assets/bg.jpg';
}

I think similar to #8 we need a ts-loader.

Random crash when hot reloading

I tried multiple times to change files and see the results with hot reloading, but it randomly crashes after a few changes, or sometimes even at the first change.

I get the following errors in cmd:

npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "electron:serve"
npm ERR! node v6.10.3
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] electron:serve: electron . --serve
npm ERR! Exit status 3221225477
npm ERR!
npm ERR! Failed at the [email protected] electron:serve script 'electron . --serve'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular-electron package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! electron . --serve
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular-electron
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular-electron
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Coddo\Desktop\Angular4Tutorial\angular-electron\npm-debug.log

The npm-debug.log file contains the following: https://pastebin.com/z7RLt6tw

And I'm not sure if this helps or what actually it is implying, but I get Electron could not be found. No hard resets for you! each time I run npm run electron:serve.

I have 2 consoles and I've run the app as described in the readme file:

  • cmd1: npm start
  • cmd2: npm run electron:serve

The crash occurs in cmd2

Packaging Issue

This application has been packaged successfully. When opening .exe file it displays the below error, kindly advice on this☺

package_error

[suggested improvement] use node os for arch/platform

Consider using node os for arch/platform:

const os = require('os');
const arch = os.arch();
const platform = os.platform();

This way you won't need separate package.json commands for each platform/arch (especially considering electron may not build correctly for any platform/arch outside of the one running the build).

require is not defined

Hi,

I am getting below error in the browser. (npm run start:web)

Uncaught ReferenceError: require is not defined
at Object. (polyfills.bundle.js:244)
at webpack_require (inline.bundle.js:55)
at Object. (inline.bundle.js:3321)
at Object.module.exports (inline.bundle.js:3505)
at webpack_require (inline.bundle.js:55)
at Object. (polyfills.bundle.js:4840)
at webpack_require (inline.bundle.js:55)
at webpackJsonpCallback (inline.bundle.js:26)
at polyfills.bundle.js:1

Please suggest.

Thanks

build:electron:main

The new build process includes;
npm install --prod

I work on a disconnected environment from the internet.

Can I skip this step ?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.