Integration with angular 2 material #6
Comments
|
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? |
|
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/materialThis may be helpful |
|
I have the same Issue, any results in your research? |
|
This error occurs right after |
|
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 After installing @angular/material I don't know if this could affect the installation like this, but it seems possible also the above log says |
|
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. |
|
Hello all, Just sent out an update integrating material2. 48e19a0 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. |
|
I will close this one. Feel free to reopen it case needed ;) |
|
New package.json looks nice, will try it out |
|
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 |
|
@manishsingh10895, I think that reason of this error is ...
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; |
|
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 |
|
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. |
|
@Strik777 Thanks, It worked. |
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 --profilenpm ERR! Exit status 1
npm ERR!
The text was updated successfully, but these errors were encountered: