如何使用角度2构建电子应用程序

时间:2017-04-12 11:24:03

标签: angular electron

我对angular2,TS和电子很新,并且想要开始使用电子和angular2制作本机应用程序,但是,我仍然没有100%实现这一点。 以下是我在安装angular,TS之后所做的事情:

  1. 从他们的官方网站克隆angular quickstart种子并删除不需要的文件
  2. 为我的项目安装电子及其打字
  3. 在src下为电子创建一个单独的文件夹,并为电子定义main.ts(它负责创建电子应用程序窗口和管理电子应用程序生命周期,这个主要与根文件夹中的角度主要文件分开)
  4. 在system.config.js中我在 map 属性中输入了一个条目,电子可以导入它(我不确定这个步骤是否需要,因为电子不是一个库而且它是一个框架,所以我想电子应该始终可用,我需要从中导入电子元件。)
  5. 在package.json的启动脚本中我添加了一个脚本来引导电子书中的应用"start": "tsc && concurrently \"npm run build:watch\" \"npm run serve\" \"electron src/electron/main.js\"",
  6. 但我不知道如何在角度组件中访问电子API,任何帮助都将不胜感激

    更新

    我已将package.json文件包含在内,以获取入口点版本,脚本等信息

    {
    "name": "angular-quickstart",
    "version": "1.0.0",
    "description": "QuickStart package.json from the documentation, supplemented with testing support",
    "scripts": {
    "build": "tsc -p src/",
    "build:watch": "tsc -p src/ -w",
    "build:e2e": "tsc -p e2e/",
    "serve": "lite-server -c=bs-config.json",
    "serve:e2e": "lite-server -c=bs-config.e2e.json",
    "prestart": "npm run build",
    "start": "tsc && concurrently \"npm run build:watch\" \"npm run serve\" \"electron src/electron/main.js\"",
    "electron": "electron",
    "pree2e": "npm run build:e2e",
    "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
    "preprotractor": "webdriver-manager update",
    "protractor": "protractor protractor.config.js",
    "pretest": "npm run build",
    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
    "pretest:once": "npm run build",
    "test:once": "karma start karma.conf.js --single-run",
    "lint": "tslint ./src/**/*.ts -t verbose"
    },
    "keywords": [],
    "author": "",
    "license": "MIT",
    "dependencies": {
    "@angular/common": "~4.0.0",
    "@angular/compiler": "~4.0.0",
    "@angular/core": "~4.0.0",
    "@angular/forms": "~4.0.0",
    "@angular/http": "~4.0.0",
    "@angular/platform-browser": "~4.0.0",
    "@angular/platform-browser-dynamic": "~4.0.0",
    "@angular/router": "~4.0.0",
    "@types/electron": "^1.4.35",
    "angular-in-memory-web-api": "~0.3.0",
    "core-js": "^2.4.1",
    "electron": "^1.6.2",
    "rxjs": "5.0.1",
    "systemjs": "0.19.40",
    "zone.js": "^0.8.4"
     },
    "devDependencies": {
    "concurrently": "^3.2.0",
    "lite-server": "^2.2.2",
    "typescript": "~2.1.0",
    "canonical-path": "0.0.2",
    "tslint": "^3.15.1",
    "lodash": "^4.16.4",
    "jasmine-core": "~2.4.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~4.0.14",
    "rimraf": "^2.5.4",
    "@types/node": "^6.0.46",
    "@types/jasmine": "2.5.36"
     },
    "repository": {}
     }
    

1 个答案:

答案 0 :(得分:0)

不容易指出哪里出错,需要查看所有文件和结构

但请检查Angular4Election这是带选举的角度快速入门