search

joaogarin / angular-electron

Angular2 and Electron starter using webpack
149 stars 53 forks source link

Integration with angular 2 material #6

Closed manishsingh10895 closed 7 years ago

manishsingh10895 commented 8 years ago

Integration with angular2 material doesn't seem to work, npm run build gives an error

webpack --progress --profile

0% compiling/home/hp/Documents/Electron/Template/node_modules/webpack-target-electron-renderer/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:37 if(externals === dependency.request) { ^

TypeError: Cannot read property 'request' of undefined at handleExternals (/home/hp/Documents/Electron/Template/node_modules/webpack-target-electron-renderer/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:37:33) at next (/home/hp/Documents/Electron/Template/node_modules/webpack-target-electron-renderer/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:46:8) at handleExternals (/home/hp/Documents/Electron/Template/node_modules/webpack-target-electron-renderer/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:59:7) at ExternalModuleFactoryPlugin. (/home/hp/Documents/Electron/Template/node_modules/webpack-target-electron-renderer/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:79:5) at /home/hp/Documents/Electron/Template/node_modules/webpack/lib/NormalModuleFactory.js:177:3 at NormalModuleFactory.applyPluginsAsyncWaterfall (/home/hp/Documents/Electron/Template/node_modules/webpack/node_modules/tapable/lib/Tapable.js:123:70) at NormalModuleFactory.create (/home/hp/Documents/Electron/Template/node_modules/webpack/lib/NormalModuleFactory.js:161:8) at Compilation.process as _addModuleChain at Compilation.process as addEntry at SingleEntryPlugin. (/home/hp/Documents/Electron/Template/node_modules/webpack/lib/SingleEntryPlugin.js:22:15) at Compiler.applyPluginsParallel (/home/hp/Documents/Electron/Template/node_modules/webpack/node_modules/tapable/lib/Tapable.js:156:14) at Compiler.compile (/home/hp/Documents/Electron/Template/node_modules/webpack/lib/Compiler.js:431:7) at Compiler. (/home/hp/Documents/Electron/Template/node_modules/webpack/lib/Compiler.js:191:10) at Compiler.readRecords (/home/hp/Documents/Electron/Template/node_modules/webpack/lib/Compiler.js:339:10) at Compiler. (/home/hp/Documents/Electron/Template/node_modules/webpack/lib/Compiler.js:188:9) at next (/home/hp/Documents/Electron/Template/node_modules/webpack/node_modules/tapable/lib/Tapable.js:81:11) at Compiler. (/home/hp/Documents/Electron/Template/node_modules/webpack/lib/CachePlugin.js:34:58) at Compiler.applyPluginsAsync (/home/hp/Documents/Electron/Template/node_modules/webpack/node_modules/tapable/lib/Tapable.js:85:13) at Compiler. (/home/hp/Documents/Electron/Template/node_modules/webpack/lib/Compiler.js:185:8) at next (/home/hp/Documents/Electron/Template/node_modules/webpack/node_modules/tapable/lib/Tapable.js:81:11) at Compiler. (/home/hp/Documents/Electron/Template/node_modules/webpack/lib/node/NodeEnvironmentPlugin.js:23:3) at Compiler.applyPluginsAsync (/home/hp/Documents/Electron/Template/node_modules/webpack/node_modules/tapable/lib/Tapable.js:85:13) at Compiler.run (/home/hp/Documents/Electron/Template/node_modules/webpack/lib/Compiler.js:182:7) at processOptions (/home/hp/Documents/Electron/Template/node_modules/webpack/bin/webpack.js:312:12) at Object. (/home/hp/Documents/Electron/Template/node_modules/webpack/bin/webpack.js:316:1) at Module._compile (module.js:425:26) at Object.Module._extensions..js (module.js:432:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:313:12) at Function.Module.runMain (module.js:457:10)

npm ERR! Linux 4.4.0-38-generic npm ERR! argv "/home/hp/.nvm/versions/node/v5.1.0/bin/node" "/home/hp/.nvm/versions/node/v5.1.0/bin/npm" "run" "build:dev" npm ERR! node v5.1.0 npm ERR! npm v3.3.12 npm ERR! code ELIFECYCLE npm ERR! angular2-electron@0.0.0 build:dev: webpack --progress --profile npm ERR! Exit status 1 npm ERR!

joaogarin commented 8 years ago

Hello,

Sorry havent had time to test out material design yet. But sounds like an interesting integration. It should work pretty much out of the box I dont see anything that would conflict. Do you have time to make a test repo or find out what causes the issue?

manishsingh10895 commented 8 years ago

I don't know much about webpack, but I think that the latest angular material alpha isn't compatible with the angular 2.0.2 which you are using. I couldn't find much about the compatibility in material2's changelog. And Also I think installing angular material 2 changes some webpack dependencies. 

npm WARN install Couldn't install optional dependency: Unsupported
angular2-electron@0.0.0 /home/hp/Documents/Electron/Angular2Electron
+-- UNMET PEER DEPENDENCY @angular/common@2.0.2
+-- UNMET PEER DEPENDENCY @angular/core@2.0.2
+-- @angular/material@2.0.0-alpha.9-3 
| `-- @types/hammerjs@2.0.33 
+-- awesome-typescript-loader@0.15.10
| `-- enhanced-resolve@0.9.1
|   `-- graceful-fs@4.1.9 
+-- css-loader@0.25.0
| `-- postcss@5.2.4
|   `-- supports-color@3.1.2 
+-- electron@1.4.3
| `-- extract-zip@1.5.0
|   +-- concat-stream@1.5.0
|   | `-- readable-stream@2.0.6
|   |   `-- isarray@1.0.0 
|   `-- mkdirp@0.5.0 
|     `-- minimist@0.0.8 
+-- electron-packager@8.1.0
| +-- asar@0.12.3
| | `-- mksnapshot@0.3.0
| |   +-- decompress-zip@0.3.0
| |   | `-- graceful-fs@4.1.9 
| |   `-- fs-extra@0.26.7
| |     `-- graceful-fs@4.1.9 
| `-- fs-extra@0.30.0
|   +-- graceful-fs@4.1.9 
|   `-- jsonfile@2.4.0
|     `-- graceful-fs@4.1.9 
+-- extract-text-webpack-plugin@1.0.1
| `-- async@1.5.2 
+-- istanbul-instrumenter-loader@0.2.0
| `-- istanbul@0.4.5
|   +-- async@1.5.2 
|   +-- handlebars@4.0.5
|   | +-- async@1.5.2 
|   | +-- source-map@0.4.4 
|   | `-- uglify-js@2.7.3
|   |   `-- async@0.2.10 
|   `-- supports-color@3.1.2 
+-- karma@0.13.22
| +-- chokidar@1.6.0
| | `-- readdirp@2.1.0
| |   +-- graceful-fs@4.1.9 
| |   `-- readable-stream@2.1.5 
| |     `-- isarray@1.0.0 
| +-- graceful-fs@4.1.9 
| `-- log4js@0.6.38
|   `-- readable-stream@1.0.34
|     `-- isarray@0.0.1 
+-- karma-sourcemap-loader@0.3.7
| `-- graceful-fs@4.1.9 
+-- karma-webpack@1.7.0
| +-- async@0.9.2 
| `-- webpack-dev-middleware@1.8.4
|   `-- memory-fs@0.3.0 
|     `-- readable-stream@2.1.5 
|       `-- isarray@1.0.0 
+-- node-sass@3.10.1
| +-- meow@3.7.0
| | `-- read-pkg-up@1.0.1
| |   `-- read-pkg@1.1.0
| |     +-- load-json-file@1.1.0
| |     | `-- graceful-fs@4.1.9 
| |     `-- path-type@1.1.0
| |       `-- graceful-fs@4.1.9 
| +-- mkdirp@0.5.1
| | `-- minimist@0.0.8 
| +-- node-gyp@3.4.0
| | +-- fstream@1.0.10
| | | `-- graceful-fs@4.1.9 
| | `-- graceful-fs@4.1.9 
| +-- npmlog@4.0.0
| | `-- are-we-there-yet@1.1.2
| |   `-- readable-stream@1.1.14 
| `-- request@2.75.0
|   `-- bl@1.1.2
|     `-- readable-stream@2.0.6
|       `-- isarray@1.0.0 
+-- remap-istanbul@0.6.4
| +-- gulp-util@3.0.7
| | `-- through2@2.0.1
| |   `-- readable-stream@2.0.6
| |     `-- isarray@1.0.0 
| +-- istanbul@0.4.3
| | +-- async@1.5.2 
| | `-- supports-color@3.1.2 
| `-- through2@2.0.1
|   `-- readable-stream@2.0.6
|     `-- isarray@1.0.0 
+-- typings@1.4.0
| +-- typings-core@1.6.0
| | +-- configstore@2.1.0
| | | +-- graceful-fs@4.1.9 
| | | `-- write-file-atomic@1.2.0
| | |   `-- graceful-fs@4.1.9 
| | +-- graceful-fs@4.1.9 
| | `-- object.pick@1.1.2
| |   `-- isobject@2.1.0
| |     `-- isarray@1.0.0 
| `-- update-notifier@1.0.2
|   `-- latest-version@2.0.0
|     `-- package-json@2.4.0
|       `-- got@5.6.0
|         +-- read-all-stream@3.1.0
|         | `-- readable-stream@2.1.5 
|         |   `-- isarray@1.0.0 
|         `-- readable-stream@2.1.5 
|           `-- isarray@1.0.0 
+-- UNMET PEER DEPENDENCY webpack@2.1.0-beta.22
| +-- async@1.5.2 
| +-- enhanced-resolve@2.3.0
| | `-- graceful-fs@4.1.9 
| +-- memory-fs@0.3.0 
| | `-- readable-stream@2.1.5 
| |   `-- isarray@1.0.0 
| +-- node-libs-browser@1.0.0
| | +-- buffer@4.9.1
| | | `-- isarray@1.0.0 
| | +-- readable-stream@2.1.5 
| | | `-- isarray@1.0.0 
| | +-- stream-browserify@2.0.1
| | | `-- readable-stream@2.1.5 
| | |   `-- isarray@1.0.0 
| | `-- url@0.11.0
| |   `-- punycode@1.3.2 
| +-- supports-color@3.1.2 
| +-- uglify-js@2.6.4 
| | `-- async@0.2.10 
| `-- watchpack@1.1.0
|   `-- graceful-fs@4.1.9 
+-- webpack-dev-server@2.1.0-beta.9
| +-- spdy@3.4.4
| | `-- spdy-transport@2.0.15
| |   +-- hpack.js@2.1.6
| |   | `-- readable-stream@2.1.5 
| |   |   `-- isarray@1.0.0 
| |   `-- readable-stream@2.1.5 
| |     `-- isarray@1.0.0 
| `-- supports-color@3.1.2 
`-- webpack-target-electron-renderer@0.4.0
  `-- webpack@1.13.2 
    +-- async@1.5.2 
    +-- interpret@0.6.6 
    +-- memory-fs@0.3.0 
    | `-- readable-stream@2.1.5 
    |   `-- isarray@1.0.0 
    +-- node-libs-browser@0.6.0 
    | +-- constants-browserify@0.0.1 
    | +-- crypto-browserify@3.2.8 
    | | +-- pbkdf2-compat@2.0.1 
    | | +-- ripemd160@0.2.0 
    | | `-- sha.js@2.2.6 
    | +-- https-browserify@0.0.0 
    | +-- os-browserify@0.1.2 
    | +-- readable-stream@1.1.14 
    | | `-- isarray@0.0.1 
    | +-- stream-browserify@1.0.0 
    | | `-- readable-stream@1.1.14 
    | |   `-- isarray@0.0.1 
    | `-- url@0.10.3 
    |   `-- punycode@1.3.2 
    +-- supports-color@3.1.2 
    +-- uglify-js@2.6.4 
    | `-- async@0.2.10 
    +-- watchpack@0.2.9 
    | +-- async@0.9.2 
    | `-- graceful-fs@4.1.9 
    `-- webpack-core@0.6.8 
      `-- source-map@0.4.4

This happens after 

 npm install --save @angular/material

This may be helpful

atburghardt commented 7 years ago

I have the same Issue, any results in your research?

Strik777 commented 7 years ago

This error occurs right after npm install --save @angular/material and some other packages.

manishsingh10895 commented 7 years ago

I think the problem is that installing @angular/material causes installing some other webpack dependencies and also newer versions of webpack and webpack-dev-server than that of specified in this repo's package.json as you can see in the npm install log I have given above.

Repo's package.json webpack: "2.1.0-beta.22", webpack-dev-server: "^2.1.0-beta.2"

After installing @angular/material webpack: 1.13.2 webpack-dev-server@2.1.0-beta.9 webpack-core: 0.6.8

I don't know if this could affect the installation like this, but it seems possible also the above log says UNMET PEER DEPENDENCY webpack@2.1.0-beta.22

manishsingh10895 commented 7 years ago

I tried a workaround for this problem, by using angular-cli. I load the localhost:4200 in browserWindow's loadURL method and run electron . and ng serve concurrently. It makes it possible to work with the latest angular versions for now.

joaogarin commented 7 years ago

Hello all,

Just sent out an update integrating material2. https://github.com/joaogarin/angular2-electron/commit/48e19a0d8146fc9b64a93e0ccedc6f4551022977

Its just a basic integration, I want the starterkit to be as simple and small as possible for people jumping in into angular2 and / or electron.

joaogarin commented 7 years ago

I will close this one. Feel free to reopen it case needed ;)

manishsingh10895 commented 7 years ago

New package.json looks nice, will try it out

manishsingh10895 commented 7 years ago

Hey @joaogarin , integration with angular material 2 works fine, but installing any other npm module results in same error, I have checked with jquery and some other modules

Strik777 commented 7 years ago

@manishsingh10895, I think that reason of this error is webpackTargetElectronRenderer and its outdated dependencies . Try to modify webpack.config.json by this way

...
externals: [
        (function () {
        var IGNORES = [
            'electron',
            //any node specific packages, e.g. 'mongoose' or 'mssql'
        ];
        return function (context, request, callback) {
            if (IGNORES.indexOf(request) >= 0) {
            return callback(null, "require('" + request + "')");
            }
            return callback();
        };
        })()
    ],
    // we need this due to problems with es6-shim
    node: {
        global: true,
        progress: false,
        crypto: 'empty',
        module: false,
        clearImmediate: false,
        setImmediate: false
    }
};

/**
 * Target Electron
 */
//config.target = webpackTargetElectronRenderer(config);
module.exports = config;
joaogarin commented 7 years ago

Maybe you can try and target electron directly then without using webpackTargetElectronRenderer. I will try it soon as I have some time : http://webpack.github.io/docs/configuration.html#target

Strik777 commented 7 years ago

I have tried it already. You will get an error on angular modules if I'm right. Any way you need some how to mark node specific modules as Externals and ignore them.

manishsingh10895 commented 7 years ago

@Strik777 Thanks, It worked.