Skip to content

Commit 67ab31c

Browse files
author
Maxime GRIS
committed
Ng not ejected anymore
1 parent 1ae6f7a commit 67ab31c

26 files changed

+473
-733
lines changed

Diff for: .angular-cli.json

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
{
22
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
33
"project": {
4-
"name": "angular-electron",
5-
"ejected": true
4+
"name": "angularelectron"
65
},
76
"apps": [
87
{
@@ -22,8 +21,7 @@
2221
"styles": [
2322
"styles.scss"
2423
],
25-
"scripts": [
26-
],
24+
"scripts": [],
2725
"environmentSource": "environments/environment.ts",
2826
"environments": {
2927
"dev": "environments/environment.ts",
@@ -38,13 +36,16 @@
3836
},
3937
"lint": [
4038
{
41-
"project": "src/tsconfig.app.json"
39+
"project": "src/tsconfig.app.json",
40+
"exclude": "**/node_modules/**"
4241
},
4342
{
44-
"project": "src/tsconfig.spec.json"
43+
"project": "src/tsconfig.spec.json",
44+
"exclude": "**/node_modules/**"
4545
},
4646
{
47-
"project": "e2e/tsconfig.e2e.json"
47+
"project": "e2e/tsconfig.e2e.json",
48+
"exclude": "**/node_modules/**"
4849
}
4950
],
5051
"test": {
@@ -54,7 +55,6 @@
5455
},
5556
"defaults": {
5657
"styleExt": "scss",
57-
"component": {
58-
}
58+
"component": {}
5959
}
6060
}

Diff for: README.md

+17-38
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ Bootstrap and package your project with Angular 5(+) and Electron (Typescript +
1515

1616
Currently runs with:
1717

18-
- Angular v5.2.0
18+
- Angular v5.2.5
1919
- Angular-CLI v1.6.4
20-
- Electron v1.7.8
21-
- Electron Builder v19.45.4
20+
- Electron v1.8.2
21+
- Electron Builder v20.0.4
2222

2323
With this sample, you can :
2424

@@ -42,6 +42,7 @@ npm install
4242

4343
There is an issue with `yarn` and `node_modules` that are only used in electron on the backend when the application is built by the packager. Please use `npm` as dependencies manager.
4444

45+
4546
If you want to generate Angular components with Angular-cli , you **MUST** install `@angular/cli` in npm global context.
4647
Please follow [Angular-cli documentation](https://github.com/angular/angular-cli) if you had installed a previous version of `angular-cli`.
4748

@@ -55,58 +56,36 @@ npm install -g @angular/cli
5556

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

58-
The application code is managed by `main.ts`. In this sample, the app runs with a simple Electron window and "Developer Tools" is open.
59-
The Angular component contains an example of Electron and NodeJS native lib import. See [Use NodeJS Native libraries](#use-nodejs-native-libraries) charpter if you want to import other native libraries in your project.
59+
The application code is managed by `main.ts`. In this sample, the app runs with a simple Angular App (http://localhost:4200) and an Electron window.
60+
The Angular component contains an example of Electron and NodeJS native lib import.
6061
You can desactivate "Developer Tools" by commenting `win.webContents.openDevTools();` in `main.ts`.
6162

62-
## To build for production
63-
64-
- Using development variables (environments/index.ts) : `npm run electron:dev`
65-
- Using production variables (environments/index.prod.ts) : `npm run electron:prod`
63+
## Manage your environment variables
6664

67-
Your built files are in the /dist folder.
65+
- Using local variables : `npm start` or `cross-env ENV=local npm start`
66+
- Using development variables : `cross-env ENV=dev npm start`
67+
- Using production variables : `cross-env ENV=rod npm start`
6868

6969
## Included Commands
7070

7171
|Command|Description|
7272
|--|--|
73-
|`npm run start:web`| Execute the app in the browser |
73+
|`npm run ng:serve`| Execute the app in the browser |
74+
|`npm run build`| Build the app. Your built files are in the /dist folder. |
75+
|`npm run build:prod`| Build the app with Angular aot. Your built files are in the /dist folder. |
76+
|`npm run electron:local`| Builds your application and start electron
7477
|`npm run electron:linux`| Builds your application and creates an app consumable on linux system |
7578
|`npm run electron:windows`| On a Windows OS, builds your application and creates an app consumable in windows 32/64 bit systems |
7679
|`npm run electron:mac`| On a MAC OS, builds your application and generates a `.app` file of your application that can be run on Mac |
7780

78-
**Your application is optimised. Only the files of /dist folder are included in the executable.**
79-
80-
## Use NodeJS Native libraries
81-
82-
Actually Angular-Cli doesn't seem to be able to import nodeJS native libs or electron libs at compile time (Webpack error). This is (one of) the reason why webpack.config was ejected of ng-cli.
83-
If you need to use NodeJS native libraries, you **MUST** add it manually in the file `webpack.config.js` in root folder :
84-
85-
```javascript
86-
"externals": {
87-
"electron": 'require(\'electron\')',
88-
"child_process": 'require(\'child_process\')',
89-
"fs": 'require(\'fs\')'
90-
...
91-
},
92-
```
93-
94-
Notice that all NodeJS v7 native libs are already added in this sample. Feel free to remove those you don't need.
81+
**Your application is optimised. Only /dist folder and node dependencies are included in the executable.**
9582

9683
## Browser mode
9784

98-
Maybe you want to execute the application in the browser (WITHOUT HOT RELOAD ACTUALLY...) ? You can do it with `npm run start:web`.
85+
Maybe you want to execute the application in the browser (WITHOUT HOT RELOAD ACTUALLY...) ? You can do it with `npm run ng:serve`.
9986
Note that you can't use Electron or NodeJS native libraries in this case. Please check `providers/electron.service.ts` to watch how conditional import of electron/Native libraries is done.
10087

101-
## Execute E2E tests
102-
103-
You can find end-to-end tests in /e2e folder.
104-
105-
You can run tests with the command lines below :
106-
- **in a terminal window** -> First, start a web server on port 4200 : `npm run start:web`
107-
- **in another terminal window** -> Then, launch Protractor (E2E framework): `npm run e2e`
108-
109-
# Contributors
88+
## Contributors
11089

11190
[<img alt="Maxime GRIS" src="https://avatars2.githubusercontent.com/u/10827551?v=3&s=117" width="117">](https://github.com/maximegris) |
11291
:---:

Diff for: electron-builder.json

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
{
22
"productName": "angular-electron",
33
"directories": {
4-
"app": "dist",
54
"output": "app-builds"
65
},
76
"win": {

Diff for: hooks/environments/README.md

+196
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
<!--
2+
#
3+
# Licensed to the Apache Software Foundation (ASF) under one
4+
# or more contributor license agreements. See the NOTICE file
5+
# distributed with this work for additional information
6+
# regarding copyright ownership. The ASF licenses this file
7+
# to you under the Apache License, Version 2.0 (the
8+
# "License"); you may not use this file except in compliance
9+
# with the License. You may obtain a copy of the License at
10+
#
11+
# http://www.apache.org/licenses/LICENSE-2.0
12+
#
13+
# Unless required by applicable law or agreed to in writing,
14+
# software distributed under the License is distributed on an
15+
# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
16+
# KIND, either express or implied. See the License for the
17+
# specific language governing permissions and limitations
18+
# under the License.
19+
#
20+
-->
21+
# Cordova Hooks
22+
23+
Cordova Hooks represent special scripts which could be added by application and plugin developers or even by your own build system to customize cordova commands. Hook scripts could be defined by adding them to the special predefined folder (`/hooks`) or via configuration files (`config.xml` and `plugin.xml`) and run serially in the following order:
24+
* Application hooks from `/hooks`;
25+
* Application hooks from `config.xml`;
26+
* Plugin hooks from `plugins/.../plugin.xml`.
27+
28+
__Remember__: Make your scripts executable.
29+
30+
__Note__: `.cordova/hooks` directory is also supported for backward compatibility, but we don't recommend using it as it is deprecated.
31+
32+
## Supported hook types
33+
The following hook types are supported:
34+
35+
after_build/
36+
after_compile/
37+
after_docs/
38+
after_emulate/
39+
after_platform_add/
40+
after_platform_rm/
41+
after_platform_ls/
42+
after_plugin_add/
43+
after_plugin_ls/
44+
after_plugin_rm/
45+
after_plugin_search/
46+
after_plugin_install/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being installed
47+
after_prepare/
48+
after_run/
49+
after_serve/
50+
before_build/
51+
before_compile/
52+
before_docs/
53+
before_emulate/
54+
before_platform_add/
55+
before_platform_rm/
56+
before_platform_ls/
57+
before_plugin_add/
58+
before_plugin_ls/
59+
before_plugin_rm/
60+
before_plugin_search/
61+
before_plugin_install/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being installed
62+
before_plugin_uninstall/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being uninstalled
63+
before_prepare/
64+
before_run/
65+
before_serve/
66+
pre_package/ <-- Windows 8 and Windows Phone only.
67+
68+
## Ways to define hooks
69+
### Via '/hooks' directory
70+
To execute custom action when corresponding hook type is fired, use hook type as a name for a subfolder inside 'hooks' directory and place you script file here, for example:
71+
72+
# script file will be automatically executed after each build
73+
hooks/after_build/after_build_custom_action.js
74+
75+
76+
### Config.xml
77+
78+
Hooks can be defined in project's `config.xml` using `<hook>` elements, for example:
79+
80+
<hook type="before_build" src="scripts/appBeforeBuild.bat" />
81+
<hook type="before_build" src="scripts/appBeforeBuild.js" />
82+
<hook type="before_plugin_install" src="scripts/appBeforePluginInstall.js" />
83+
84+
<platform name="wp8">
85+
<hook type="before_build" src="scripts/wp8/appWP8BeforeBuild.bat" />
86+
<hook type="before_build" src="scripts/wp8/appWP8BeforeBuild.js" />
87+
<hook type="before_plugin_install" src="scripts/wp8/appWP8BeforePluginInstall.js" />
88+
...
89+
</platform>
90+
91+
<platform name="windows8">
92+
<hook type="before_build" src="scripts/windows8/appWin8BeforeBuild.bat" />
93+
<hook type="before_build" src="scripts/windows8/appWin8BeforeBuild.js" />
94+
<hook type="before_plugin_install" src="scripts/windows8/appWin8BeforePluginInstall.js" />
95+
...
96+
</platform>
97+
98+
### Plugin hooks (plugin.xml)
99+
100+
As a plugin developer you can define hook scripts using `<hook>` elements in a `plugin.xml` like that:
101+
102+
<hook type="before_plugin_install" src="scripts/beforeInstall.js" />
103+
<hook type="after_build" src="scripts/afterBuild.js" />
104+
105+
<platform name="wp8">
106+
<hook type="before_plugin_install" src="scripts/wp8BeforeInstall.js" />
107+
<hook type="before_build" src="scripts/wp8BeforeBuild.js" />
108+
...
109+
</platform>
110+
111+
`before_plugin_install`, `after_plugin_install`, `before_plugin_uninstall` plugin hooks will be fired exclusively for the plugin being installed/uninstalled.
112+
113+
## Script Interface
114+
115+
### Javascript
116+
117+
If you are writing hooks in Javascript you should use the following module definition:
118+
```javascript
119+
module.exports = function(context) {
120+
...
121+
}
122+
```
123+
124+
You can make your scipts async using Q:
125+
```javascript
126+
module.exports = function(context) {
127+
var Q = context.requireCordovaModule('q');
128+
var deferral = new Q.defer();
129+
130+
setTimeout(function(){
131+
console.log('hook.js>> end');
132+
deferral.resolve();
133+
}, 1000);
134+
135+
return deferral.promise;
136+
}
137+
```
138+
139+
`context` object contains hook type, executed script full path, hook options, command-line arguments passed to Cordova and top-level "cordova" object:
140+
```json
141+
{
142+
"hook": "before_plugin_install",
143+
"scriptLocation": "c:\\script\\full\\path\\appBeforePluginInstall.js",
144+
"cmdLine": "The\\exact\\command\\cordova\\run\\with arguments",
145+
"opts": {
146+
"projectRoot":"C:\\path\\to\\the\\project",
147+
"cordova": {
148+
"platforms": ["wp8"],
149+
"plugins": ["com.plugin.withhooks"],
150+
"version": "0.21.7-dev"
151+
},
152+
"plugin": {
153+
"id": "com.plugin.withhooks",
154+
"pluginInfo": {
155+
...
156+
},
157+
"platform": "wp8",
158+
"dir": "C:\\path\\to\\the\\project\\plugins\\com.plugin.withhooks"
159+
}
160+
},
161+
"cordova": {...}
162+
}
163+
164+
```
165+
`context.opts.plugin` object will only be passed to plugin hooks scripts.
166+
167+
You can also require additional Cordova modules in your script using `context.requireCordovaModule` in the following way:
168+
```javascript
169+
var Q = context.requireCordovaModule('q');
170+
```
171+
172+
__Note__: new module loader script interface is used for the `.js` files defined via `config.xml` or `plugin.xml` only.
173+
For compatibility reasons hook files specified via `/hooks` folders are run via Node child_process spawn, see 'Non-javascript' section below.
174+
175+
### Non-javascript
176+
177+
Non-javascript scripts are run via Node child_process spawn from the project's root directory and have the root directory passes as the first argument. All other options are passed to the script using environment variables:
178+
179+
* CORDOVA_VERSION - The version of the Cordova-CLI.
180+
* CORDOVA_PLATFORMS - Comma separated list of platforms that the command applies to (e.g.: android, ios).
181+
* CORDOVA_PLUGINS - Comma separated list of plugin IDs that the command applies to (e.g.: org.apache.cordova.file, org.apache.cordova.file-transfer)
182+
* CORDOVA_HOOK - Path to the hook that is being executed.
183+
* CORDOVA_CMDLINE - The exact command-line arguments passed to cordova (e.g.: cordova run ios --emulate)
184+
185+
If a script returns a non-zero exit code, then the parent cordova command will be aborted.
186+
187+
## Writing hooks
188+
189+
We highly recommend writing your hooks using Node.js so that they are
190+
cross-platform. Some good examples are shown here:
191+
192+
[http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/](http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/)
193+
194+
Also, note that even if you are working on Windows, and in case your hook scripts aren't bat files (which is recommended, if you want your scripts to work in non-Windows operating systems) Cordova CLI will expect a shebang line as the first line for it to know the interpreter it needs to use to launch the script. The shebang line should match the following example:
195+
196+
#!/usr/bin/env [name_of_interpreter_executable]

Diff for: hooks/environments/app.config.ts.tpl

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { CONF_LOCAL } from '../environments/environment.local';
2+
import { CONF_DEV } from '../environments/environment.dev';
3+
import { CONF_PROD } from '../environments/environment.prod';
4+
5+
const ENV = 'PROFILE';
6+
7+
const LOCAL: String = 'local';
8+
const DEV: String = 'dev';
9+
const PROD: String = 'prod';
10+
11+
let conf: any;
12+
13+
console.log('Env', ENV);
14+
15+
if (ENV === PROD) {
16+
conf = CONF_PROD;
17+
} else if (ENV === DEV) {
18+
conf = CONF_DEV;
19+
} else {
20+
conf = CONF_LOCAL;
21+
}
22+
23+
export const AppConfig = Object.assign({}, conf);

Diff for: hooks/environments/set_profile.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// require:
2+
var replace = require("replace");
3+
var fs = require('fs-extra');
4+
var path = require('path');
5+
6+
// use:
7+
var profile = process.env.ENV ? process.env.ENV : 'local';
8+
9+
console.log('Déplacement du template de fichier de détection de configuration ...');
10+
fs.copySync(path.resolve(__dirname,'./app.config.ts.tpl'), path.resolve(__dirname,'../src/app/app.config.ts'));
11+
12+
console.log('Application du profil : ' + profile);
13+
14+
replace({
15+
regex: "'PROFILE'",
16+
replacement: "'" + profile + "'",
17+
paths: ['src/app/app.config.ts'],
18+
recursive: true,
19+
silent: true,
20+
});

0 commit comments

Comments
 (0)