Integration with angular 2 material about angular-electron

[manishsingh10895]

New package.json looks nice, will try it out

[Strik777]

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.

[joaogarin]

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]

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
[email protected] /home/hp/Documents/Electron/Angular2Electron
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- @angular/[email protected] 
| `-- @types/[email protected] 
+-- [email protected]
| `-- [email protected]
|   `-- [email protected] 
+-- [email protected]
| `-- [email protected]
|   `-- [email protected] 
+-- [email protected]
| `-- [email protected]
|   +-- [email protected]
|   | `-- [email protected]
|   |   `-- [email protected] 
|   `-- [email protected] 
|     `-- [email protected] 
+-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| |   +-- [email protected]
| |   | `-- [email protected] 
| |   `-- [email protected]
| |     `-- [email protected] 
| `-- [email protected]
|   +-- [email protected] 
|   `-- [email protected]
|     `-- [email protected] 
+-- [email protected]
| `-- [email protected] 
+-- [email protected]
| `-- [email protected]
|   +-- [email protected] 
|   +-- [email protected]
|   | +-- [email protected] 
|   | +-- [email protected] 
|   | `-- [email protected]
|   |   `-- [email protected] 
|   `-- [email protected] 
+-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| |   +-- [email protected] 
| |   `-- [email protected] 
| |     `-- [email protected] 
| +-- [email protected] 
| `-- [email protected]
|   `-- [email protected]
|     `-- [email protected] 
+-- [email protected]
| `-- [email protected] 
+-- [email protected]
| +-- [email protected] 
| `-- [email protected]
|   `-- [email protected] 
|     `-- [email protected] 
|       `-- [email protected] 
+-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| |   `-- [email protected]
| |     +-- [email protected]
| |     | `-- [email protected] 
| |     `-- [email protected]
| |       `-- [email protected] 
| +-- [email protected]
| | `-- [email protected] 
| +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected] 
| | `-- [email protected] 
| +-- [email protected]
| | `-- [email protected]
| |   `-- [email protected] 
| `-- [email protected]
|   `-- [email protected]
|     `-- [email protected]
|       `-- [email protected] 
+-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| |   `-- [email protected]
| |     `-- [email protected] 
| +-- [email protected]
| | +-- [email protected] 
| | `-- [email protected] 
| `-- [email protected]
|   `-- [email protected]
|     `-- [email protected] 
+-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected] 
| | | `-- [email protected]
| | |   `-- [email protected] 
| | +-- [email protected] 
| | `-- [email protected]
| |   `-- [email protected]
| |     `-- [email protected] 
| `-- [email protected]
|   `-- [email protected]
|     `-- [email protected]
|       `-- [email protected]
|         +-- [email protected]
|         | `-- [email protected] 
|         |   `-- [email protected] 
|         `-- [email protected] 
|           `-- [email protected] 
+-- UNMET PEER DEPENDENCY [email protected]
| +-- [email protected] 
| +-- [email protected]
| | `-- [email protected] 
| +-- [email protected] 
| | `-- [email protected] 
| |   `-- [email protected] 
| +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected] 
| | +-- [email protected] 
| | | `-- [email protected] 
| | +-- [email protected]
| | | `-- [email protected] 
| | |   `-- [email protected] 
| | `-- [email protected]
| |   `-- [email protected] 
| +-- [email protected] 
| +-- [email protected] 
| | `-- [email protected] 
| `-- [email protected]
|   `-- [email protected] 
+-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| |   +-- [email protected]
| |   | `-- [email protected] 
| |   |   `-- [email protected] 
| |   `-- [email protected] 
| |     `-- [email protected] 
| `-- [email protected] 
`-- [email protected]
  `-- [email protected] 
    +-- [email protected] 
    +-- [email protected] 
    +-- [email protected] 
    | `-- [email protected] 
    |   `-- [email protected] 
    +-- [email protected] 
    | +-- [email protected] 
    | +-- [email protected] 
    | | +-- [email protected] 
    | | +-- [email protected] 
    | | `-- [email protected] 
    | +-- [email protected] 
    | +-- [email protected] 
    | +-- [email protected] 
    | | `-- [email protected] 
    | +-- [email protected] 
    | | `-- [email protected] 
    | |   `-- [email protected] 
    | `-- [email protected] 
    |   `-- [email protected] 
    +-- [email protected] 
    +-- [email protected] 
    | `-- [email protected] 
    +-- [email protected] 
    | +-- [email protected] 
    | `-- [email protected] 
    `-- [email protected] 
      `-- [email protected] 

This happens after

 npm install --save @angular/material

This may be helpful

[atburghardt]

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

[Strik777]

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

[manishsingh10895]

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
[email protected]
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 [email protected]

[manishsingh10895]

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]

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.

[joaogarin]

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

[manishsingh10895]

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]

@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]

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

[manishsingh10895]

@Strik777 Thanks, It worked.