CODEWITHSUNDEEP
node.jsangularelectronnightmare
Evgheny Kalkutin
Evgheny Kalkutin

Reputation: 207

How to import Nightmarejs into angular-cli component

I'm going to make GUI scraper with Electron & Nightmare. However when I use just plain html/js as described in Electron quickstart, all works well. But I'd like to make Electron app nicely by using Anugular2(angular-cli webpack). I created project ng new Scraper then made some routes for components e.g. HomeComponent, SettingsComponent. I installed nightmare in angular project folder by npm install --save nightmare and I would like import it in SettingsComponent like:

import {Nightmare} from 'nightmare';

and use it like:

ngOnInit{
  this.nightmare = new Nightmare({
    show: true,
    electronPath: require('node_modules/electron')
  })
}

What have I tryied:

  1. in index.html including

<script src="node_modules/nightmare/lib/nightmare.js"></script>

  1. then in my component
declare var Nightmare: any;

  1. ngOnInit(){

    this.nightmare = new Nightmare({})

  2. Gettings errors about missing other js files inside node_modules/nightmare/lib/*.js

CODE:

index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Scrape</title>
  <base href="/">
  <link rel="stylesheet" href="assets/semantic.min.css">
  <script src="assets/require.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

component:
import { Component, OnInit } from '@angular/core';
declare var require: any;
var Nightmare = require('nightmare');
@Component({
  selector: 'app-work',
  templateUrl: './work.component.html',
  styleUrls: ['./work.component.css']
})
export class WorkComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

error:

Failed to compile.

./~/nightmare/lib/nightmare.js
Module not found: Error: Can't resolve 'child_process' in 'C:\Users\admin\Desktop\Scrape\node_modules\nightmare\lib'
 @ ./~/nightmare/lib/nightmare.js 18:11-35
 @ ./src/app/work/work.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

It is possible to interact with Angular2/Nightmare inside Electron App?

Upvotes: 3

Views: 586

Answers (0)

Related Questions