Angular 7-找不到模块:错误:无法解析'fs'

问题描述 投票:1回答:1

TL; DR

当使用Angular 7和依赖于antlr4ts的外部库时,我无法编译。我收到以下错误:

./ node_modules / antlr4ts / misc / InterpreterDataReader.js中的错误找不到模块:错误:无法解析“ fs”'/ node_modules / antlr4ts / misc'

详细信息

我知道fs是无法在浏览器中使用的nodeJS模块。但是不幸的是,我确实需要antlr4ts中的ANTLR运行时才能使外部库(这是我自己的)正常工作。我知道有人补充

"browser": {
  "fs": false
}

对他们的package.json,但是我的编译器完全忽略了这一点,但仍然遇到上述错误。有什么可能的方法可以让我的Angular 7应用程序构建并仍在其JavaScript代码中使用fs的某些用法继续使用antlr4ts库?

我的代码

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "strict": true,
    "strictPropertyInitialization": false,
    "noImplicitReturns": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  }
}

package.json:

{
  "name": "XXX",
  "version": "0.0.1",
  "license": "LicenseRef-LICENSE",
  "scripts": {
    "start": "ng serve",
    "developmentBuild": "ng build",
    "productionBuild": "ng build --prod",
    "test": "ng test --watch=false --browsers ChromeHeadlessNoSandbox",
    "developmentTest": "ng test --source-map=false",
    "testkeycloak": "docker-compose up -d && sleep 30s && ng test --watch=false --browsers ChromeHeadlessNoSandbox && docker-compose down",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "7.2.0",
    "@angular/cdk": "^7.2.0",
    "@angular/common": "7.2.0",
    "@angular/compiler": "7.2.0",
    "@angular/core": "^7.2.0",
    "@angular/forms": "7.2.0",
    "@angular/http": "7.2.0",
    "@angular/material": "^7.2.0",
    "@angular/material-moment-adapter": "^8.2.0",
    "@angular/platform-browser": "7.2.0",
    "@angular/platform-browser-dynamic": "7.2.0",
    "@angular/router": "7.2.0",
    "@XXX": "^1.0.0", <-- My own library having "antlr4ts": "^0.5.0-alpha.3" as dependency
    "ag-grid-angular": "^20.0.0",
    "ag-grid-community": "^20.0.0",
    "ag-grid-enterprise": "^20.0.0",
    "angular-oauth2-oidc": "^5.0.2",
    "bootstrap": "^4.3.1",
    "core-js": "^2.4.1",
    "file-saver": "^1.3.8",
    "moment": "^2.24.0",
    "ng-click-outside": "^4.0.0",
    "ngx-spinner": "^7.2.0",
    "rxjs": "^6.2.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.10.0",
    "@angular/cli": "^7.2.0",
    "@angular/compiler-cli": "7.2.0",
    "@angular/language-service": "7.2.0",
    "@types/file-saver": "^1.3.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.1.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-html-reporter": "^0.2.7",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-junit-reporter": "^1.2.0",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "tslint-clean-code": "^0.2.3",
    "tslint-consistent-codestyle": "^1.11.1",
    "tslint-microsoft-contrib": "^5.0.3",
    "typescript": "3.2.2"
  }
}

angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "XXX": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico",
              "src/silent-refresh.html"
            ],
            "styles": [
              "node_modules/ag-grid-community/dist/styles/ag-grid.css",
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [{
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.ts"
              }],
              "outputHashing":"all"
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "XXX:build"
          },
          "configurations": {}
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "XXX:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.css"
            ],
            "assets": [
              "src/assets",
              "src/favicon.ico",
              "src/silent-refresh.html"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "XXX",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "styleext": "css"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    }
  }
}
angular angular-cli angular7 antlr fs
1个回答
0
投票

这里是同一问题,您最终找到了解决方法吗?

© www.soinside.com 2019 - 2024. All rights reserved.