开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >在Angular 2和Webpack中加载电子模块

问在Angular 2和Webpack中加载电子模块
EN

Stack Overflow用户

提问于 2016-12-08 15:40:08

回答 1查看 444关注 0票数 0

我正在使用this starter kit创建一个电子应用程序。当我尝试将电子模块导入Angular 2组件时，如下所示：

const electron = require('electron');

我从初学者工具包中的以下文件中获得此错误fs.readFileSync is not a function：

var fs = require('fs')
var path = require('path')

module.exports = path.join(__dirname, fs.readFileSync(path.join(__dirname, 'path.txt'), 'utf-8'))

当我没有在组件中使用require时，一切都很正常。这就像使用require改变了其他地方使用的require的类型，但我真的不知道发生了什么。我尝试过将电子模块导入angular组件的其他方法，但我得到了：

Cannot find module 'electron'.

EN

回答 1

Stack Overflow用户

发布于 2016-12-12 07:36:43

Electron需要NodeJS，浏览器不能访问文件系统，只有服务器可以访问。

但是Electron使用node渲染index.html文件，所以使用以下代码可以在您的Angular应用程序中使用。

在Angular的index.html文件中，您应该将

  <script>
    window.electron = require("electron");
  </script>

一个在你的Angular应用中使用Electron的其他部分的例子。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angular App</title>
  <base href="./">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">


</head>
<body>
  <app-root></app-root>


  <script>
    window.electron = require("electron");
    window.ipcRenderer = require("electron").ipcRenderer;
    window.electronRemote = require("electron").remote;
  </script>


</body>
</html>

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41043257

复制

相关文章

Webpack 加载模块的规则

路径以 . 或 .. 打头，加载相对路径的模块。. 表示当前目录，.. 表示上层目录。 require('./foo.js') 将加载当前文件所在目录的 foo.js 的文件。

前端GoGoGo

2018/08/24

1.4K0

Angular中，模块加载的几种方法原

好处：这种方式有利于初始减少加载体积，不需要在app.module.ts中，主动去引入相应的模块（它们自然不会打包到AppModule中去）。

申君健

2018/09/21

2.9K0

Angular中，模块加载的几种方法
原

教程|在 Angular 4 中加载功能模块（下）

typescript angularjs javascript

假设多个团队正在为此应用程序开发模块。您的离岸团队刚交付了 Weather 和 Currency 模块。您的任务是将新模块合并到主应用程序中。

疯狂的技术宅

2019/03/28

2.3K0

教程|在 Angular 4 中加载功能模块（下）

教程|在 Angular 4 中加载功能模块（上）

angularjs node.js

过去几年来，Angular 作为单页 Web 应用程序的开发框架变得越来越流行。尽管 Angular 4 最初是为 JavaScript 而设计的，但它在 Angular 2 基础之上添加了对更多语言的支持，比如 Dart 和 Typescript。

疯狂的技术宅

2019/03/28

2.3K0

教程|在 Angular 4 中加载功能模块（上）

angular2中在使用路由懒加载时候出现的错误

ERROR in Cannot use 'in' operator to search for 'providers' in null 出现这个问题的原因是，在使用懒加载的时候，没有指定module，没有找到相关的提供信息。 const routes: Routes = [ {path:'login',component:loginComponent}, { path: 'about', loadChildren: './home/home/home.module'},] 以上是修改之前报错的代码：

杭州前端工程师

2018/06/15

5.4K0

Angular 2 模块（Modules）

Angular 应用是模块化的，Angular 有自己的模块系统，叫做 Angular 模块 or NgModules。模块 . 每个 Angular 应用至少有一个模块——根模块，通常叫做

孙亖

2018/06/06

9070

深入了解 webpack 模块加载原理

webpack 编程算法打包 javascript ecmascript

无论你开发使用的是 CommonJS 规范还是 ES6 模块规范，打包后的文件都统一使用 webpack 自定义的模块规范来管理、加载模块。本文将从一个简单的示例开始，来讲解 webpack 模块加载原理。

谭光志

2020/09/28

1.4K0

Angular中ngCookies模块介绍

网络安全 angularjs 存储 api

1.Cookie介绍 Cookie总是保存在客户端中，按在客户端中的存储位置，可分为内存Cookie和硬盘Cookie。内存Cookie由浏览器维护，保存在内存中，浏览器关闭后就消失了，其存在时间是短暂的。硬盘Cookie保存在硬盘里，有一个过期时间，除非用户手工清理或到了过期时间，硬盘Cookie不会被删除，其存在时间是长期的。所以，按存在时间，可分为非持久Cookie和持久Cookie。主要因为HTTP协议无状态性，服务器需要知道用户在之前的页面做了哪些操作，所欲引入Cookie，是一种解决HT

八哥

2018/01/18

2.5K0

Angular中ngCookies模块介绍

webpack中的模块(modules)

node.js html 缓存编程算法 webpack

在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。

刘亦枫

2020/03/19

8030

webpack异步加载_webpack配置按需加载

https 网络安全

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

全栈程序员站长

2022/11/01

1.1K0

angular2路由预加载

1. 实现PreloadingStrategy 类 import { PreloadingStrategy, Route } from "@angular/router"; import { Observable } from "rxjs"; /** * 预加载策略 */ export class SelectivePreloadingStrategy implements PreloadingStrategy { preload(route: Route, load: Function): O

用户1437675

2018/08/20

1K0

【Angular专题】——（2）【译】Angular中的ForwardRef

先做一个小声明，我们现在拥有一个AppComponent，并使用DI系统向其中注入了一个NameService，因为我们使用的是Typescript，所以需要做的工作就是在构造函数的参数中声明变量nameService的类型为NameService，这样做的目的是为了向Angular提供运行时解析依赖所需要的相关信息。

大史不说话

2018/12/27

3.3K0

【Angular专题】——（2）【译】Angular中的ForwardRef

Webpack插件按需加载组件_webpack懒加载

webpack javascript 打包 vue.js ecmascript

学习Vue的时候，各类教程都会告诉我们：Vue 的特点是SPA——Single Page Application（单页应用程序）。它有着诸如：“只有第一次会加载页面, 以后的每次页面切换，只需要进行组件替换；减少了请求体积，加快页面响应速度，降低了对服务器的压力” 等等优点。

全栈程序员站长

2022/11/08

1.5K0

Webpack插件按需加载组件_webpack懒加载

python中动态加载模块和类方法实现

面向对象编程 python 编程算法

> "D:\Python27\python.exe" "D:\test\src\mytest.py" #module: <module 'mytest' from 'D:\test\src\mytest.py'> #c: mytest.TestClass #obj: <mytest.TestClass instance at 0x025F2AA8> <mytest.TestClass instance at 0x025F2AA8> test #mtd: <bound method TestClass.echo of <mytest.TestClass instance at 0x025F2AA8>> test #t: 3 1

py3study

2020/01/09

1.2K0

angular 路由懒加载_angular路由

https 网络安全 angularjs

在angular中路由即能加载组件又能加载模块，而我们说的懒加载实际上就是加载模块，目前还没有看到懒加载组件的例子。加载组件使用的是component关键字加载模块则是使用loadChildren关键字

全栈程序员站长

2022/11/08

1.3K0

webpack原理(2)：ES6 module在Webpack中如何Tree-shaking构建

DCE 作用于模块内（webpack 的 DCE 通过 UglifyJS 完成），而 Tree-shaking 则是在打包的时候通过模块之间的信息打包必须的代码。

周陆军博客

2023/03/18

8040

Angular 2 中的绑定的方法在无限循环吗？

我在自己的Ionic 2项目中，使用卡片列出数据： <ion-card *ngFor="let item of inspects"> 卡片中有一个导航按钮，根据每项的数据生成连接打开百度地图，我是这样绑定的：页面： <a [href]="nav(item)" target="_blank" ion-button icon-left clear small> <ion-icon name="pin"></ion-icon> <div>导航</div> </a> 代码：

孙亖

2018/06/07

4K0

在Linux下为Apahce加载rewrite模块

apache 编程算法

在开发时，经常会用到Apache的rewrite功能，如果你的Apache已经安装配置好了，这时需要加载rewrite模块的话，可以按照如下方法进行：

魏杰

2022/12/23

1.2K0

在Linux下为Apahce加载rewrite模块

Webpack 模块化原理和SourceMap

打包 webpack es 编程算法网络安全

原创不易，未经作者允许禁止转载！！ Webpack模块化 Webpack打包的代码，允许我们使用各种各样的模块化，但是最常用的是CommonJS、ES Module。包括如下原理: CommonJS模块化实现原理; ES Module实现原理; CommonJS加载ES Module的原理; ES Module加载CommonJS的原理; CommonJS：打包前 const { dateFormat, priceFormat } = require('./js/format'); console.

前端LeBron

2021/12/08

5400

Angular 启用预加载

typescript 编程算法 angularjs

在使用路由延迟加载中，我们介绍了如何使用模块来拆分应用，在访问到这个模块的时候， Angular 加载这个模块。但这需要一点时间。在用户第一次点击的时候，会有一点延迟。

玖柒的小窝

2021/11/03

1.6K0

相似问题

webpack和angular2动态加载模块

21

angular 2 webpack 2惰性加载模块抛出模板解析错误

216

Angular2 webpack和css加载器

10

基于Angular2和Webpack的模块结构

15

webpack angular2延迟加载

21

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例