【问题标题】:Electron/Angular app failed to compile because missing http module由于缺少 http 模块,Electron/Angular 应用程序无法编译
【发布时间】:2020-05-07 20:07:58
【问题描述】:

我需要处理之前已经开发的 Electron/Angular 应用程序,我只是想添加一个功能。该应用程序有一段时间没有被触及,但现在当我尝试在开发中启动它时

ng serve

我收到以下错误

Your global Angular CLI version (8.3.23) is greater than your local
version (6.0.8). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
 10% building modules 6/6 modules 0 activei 「wds」: Project is running at http://localhost:4200/
i 「wds」: webpack output is served from /
i 「wds」: 404s will fallback to //index.html

Date: 2020-01-21T17:27:12.816Z
Hash: 9ccbd80f9187de6cbb3f
Time: 4077ms
chunk {main} main.js, main.js.map (main) 355 kB [entry] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 354 kB [entry] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 513 kB [entry] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 5.5 kB [initial] [rendered]

WARNING in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/dist/cjs.js??ref--14-3!./src/styles.sc/styles.scss)
(Emitted value instead of an instance of Error) autoprefixer: D:\Helpful Applications\dispatch-electron\src\styles.scss:24:4: grid-auto-rows is not supported by IE grid-auto-rows is not supported by IE

ERROR in src/environments/environment.prod.ts(1,23): error TS2307: Cannot find module '../../config/http'.
src/environments/environment.ts(5,23): error TS2307: Cannot find module '../../config/http'.
src/environments/environment.ts(6,26): error TS2307: Cannot find module '../../config/http.dev'.

i 「wdm」: Failed to compile.

在我的 /config/ 目录中,我没有 http 或 http.dev 目录,我只有包含它的 http.template.js 文件。

module.exports = {
    authUrl: "",
    apiUrl: "",
    logUrl: ""
};

这是我的 environment.ts 文件

// This file can be replaced during build by using the `fileReplacements` array.
// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.

import * as http from "../../config/http";
import * as devhttp from "../../config/http.dev";

Object.assign(http, devhttp);

export const environment = {
    production: false,
    http: http
};

/*
 * In development mode, to ignore zone related error stack frames such as
 * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
 * import the following file, but please comment it out in production mode
 * because it will have performance impact when throw error
 */
// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

这里是 angular.json 文件

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "dispatch-electron": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "d",
            "schematics": {},
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ],
                        "styles": [
                            "src/styles.scss"
                        ],
                        "scripts": []
                    },
                    "configurations": {
                        "production": {
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.prod.ts"
                                }
                            ],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "extractCss": true,
                            "namedChunks": false,
                            "aot": true,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true
                        }
                    }
                },
                "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "options": {
                        "browserTarget": "dispatch-electron:build"
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "dispatch-electron:build:production"
                        }
                    }
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                        "browserTarget": "dispatch-electron:build"
                    }
                },
                "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
                        "main": "src/test.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.spec.json",
                        "karmaConfig": "src/karma.conf.js",
                        "styles": [
                            "src/styles.scss"
                        ],
                        "scripts": [],
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ]
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": [
                            "src/tsconfig.app.json",
                            "src/tsconfig.spec.json"
                        ],
                        "exclude": [
                            "**/node_modules/**"
                        ]
                    }
                }
            }
        },
        "dispatch-electron-e2e": {
            "root": "e2e/",
            "projectType": "application",
            "architect": {
                "e2e": {
                    "builder": "@angular-devkit/build-angular:protractor",
                    "options": {
                        "protractorConfig": "e2e/protractor.conf.js",
                        "devServerTarget": "dispatch-electron:serve"
                    },
                    "configurations": {
                        "production": {
                            "devServerTarget": "dispatch-electron:serve:production"
                        }
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": "e2e/tsconfig.e2e.json",
                        "exclude": [
                            "**/node_modules/**"
                        ]
                    }
                }
            }
        }
    },
    "defaultProject": "dispatch-electron"
}

我对这个应用程序了解不多,因此非常感谢任何帮助。我只想在开发环境中使用它,以便我可以处理它。

【问题讨论】:

    标签: javascript angular typescript webpack electron


    【解决方案1】:

    听起来文件丢失了。注释掉导入。接下来尝试找出http的值。它可能是一个布尔值,但很可能是一个键/值对象。

    //import * as http from "../../config/http";
    //import * as devhttp from "../../config/http.dev";
    
    //Object.assign(http, devhttp);
    
    export const environment = {
        production: false,
        http: http
    };
    

    【讨论】:

    • 我相信它是一个键值对,因为配置目录中唯一的文件是 http.template.js,其中包含:module.exports = { authUrl: "", apiUrl: "", logUrl: "" }; 但即使我只使用import * as http from "../../config" 它仍然告诉我它找不到模块并且应用程序无法编译。
    • 很遗憾,如果存储库中没有这些文件,您将需要手动创建它们。如果使用 vscode 选择编辑/在文件中查找并搜索“环境”。并尝试找出对象变量是什么。它可能是一个打字稿文件创建文件 http.ts = export const http = { authUrl: "", apiUrl: "", logUrl: "" };
    • 我能够确定 http.template.js 在创建实际文件时可供参考。我需要创建一个 http.js 和一个 http.dev.js 并使用适当的 API URL 填写空白 URL 字符串。
    猜你喜欢
    • 2019-09-09
    • 1970-01-01
    • 2020-11-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-08-02
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多