adamreisnz / replace-in-file

A simple utility to quickly replace contents in one or more files
580 stars 65 forks source link

Not able to use this with Angular 13. #154

Closed jack-sparroow closed 2 years ago

jack-sparroow commented 2 years ago

I had the working angular project. Then I have added replace_in_file using npm.

package.json

{
  "name": "ngrx-poc",
  "version": "0.0.0",
  "build_version": "1000",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 4202",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.1.0",
    "@angular/common": "~13.1.0",
    "@angular/compiler": "~13.1.0",
    "@angular/core": "~13.1.0",
    "@angular/forms": "~13.1.0",
    "@angular/localize": "~13.1.0",
    "@angular/platform-browser": "~13.1.0",
    "@angular/platform-browser-dynamic": "~13.1.0",
    "@angular/router": "~13.1.0",
    "@lottiefiles/lottie-player": "^1.5.6",
    "@ng-bootstrap/ng-bootstrap": "^12.0.0",
    "@ngrx/store": "^13.0.2",
    "@popperjs/core": "^2.10.2",
    "apexcharts": "^3.33.2",
    "bootstrap": "^5.1.3",
    "lottie-web": "^5.9.1",
    "ng-apexcharts": "^1.7.0",
    "ng-otp-input": "^1.8.5",
    "ngx-lottie": "^8.0.1",
    "ngx-toastr": "^14.2.1",
    "replace-in-file": "^6.3.2",
    "rxjs": "~7.4.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.1.2",
    "@angular/cli": "~13.1.2",
    "@angular/compiler-cli": "~13.1.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.10.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.5.2"
  }
}

Implementation

updatepackagejson.service.ts


import packageInfo from './../../../package.json';

import { replaceInFile } from 'replace-in-file';

export async function replacing() {
  let pacakgeJson = packageInfo;

  let currentVersion = pacakgeJson['build_version'];

  const upgradeVersion = parseFloat(currentVersion) + 100;

  const options = {
    files: './../../../package.json',
    from: `"build_version": "${currentVersion}",`,
    to: `"build_version": "${upgradeVersion}",`,
  };

  try {
    const results = await replaceInFile(options);
    console.log('Replacement results:', results);
  } catch (error) {
    console.error('Error occurred:', error);
  }
}

But, after doing ng serve I am getting

✔ Browser application bundle generation complete.

Initial Chunk Files | Names   | Raw Size
main.js             | main    | 50.88 kB |
runtime.js          | runtime |  6.98 kB |

4 unchanged chunks

Build at: 2022-04-13T10:01:44.937Z - Hash: 4e89e2a079a5ed6d - Time: 1198ms

./node_modules/minimatch/minimatch.js:6:9-24 - Warning: Module not found: Error: Can't resolve 'path' in 'D:\pocs\angular-pocs\ngrx-poc\node_modules\minimatch'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

./node_modules/fs.realpath/index.js:8:9-22 - Error: Module not found: Error: Can't resolve 'fs' in 'D:\pocs\angular-pocs\ngrx-poc\node_modules\fs.realpath'

./node_modules/fs.realpath/old.js:22:17-32 - Error: Module not found: Error: Can't resolve 'path' in 'D:\pocs\angular-pocs\ngrx-poc\node_modules\fs.realpath'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

./node_modules/fs.realpath/old.js:24:9-22 - Error: Module not found: Error: Can't resolve 'fs' in 'D:\pocs\angular-pocs\ngrx-poc\node_modules\fs.realpath'

./node_modules/glob/common.js:13:9-22 - Error: Module not found: Error: Can't resolve 'fs' in 'D:\pocs\angular-pocs\ngrx-poc\node_modules\glob'

./node_modules/glob/common.js:14:11-26 - Error: Module not found: Error: Can't resolve 'path' in 'D:\pocs\angular-pocs\ngrx-poc\node_modules\glob'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

./node_modules/glob/glob.js:48:11-26 - Error: Module not found: Error: Can't resolve 'path' in 'D:\pocs\angular-pocs\ngrx-poc\node_modules\glob'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

./node_modules/glob/glob.js:49:13-30 - Error: Module not found: Error: Can't resolve 'assert' in 'D:\pocs\angular-pocs\ngrx-poc\node_modules\glob'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }

./node_modules/glob/glob.js:56:11-26 - Error: Module not found: Error: Can't resolve 'util' in 'D:\pocs\angular-pocs\ngrx-poc\node_modules\glob'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

./node_modules/glob/sync.js:8:11-26 - Error: Module not found: Error: Can't resolve 'util' in 'D:\pocs\angular-pocs\ngrx-poc\node_modules\glob'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

./node_modules/glob/sync.js:9:11-26 - Error: Module not found: Error: Can't resolve 'path' in 'D:\pocs\angular-pocs\ngrx-poc\node_modules\glob'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

./node_modules/glob/sync.js:10:13-30 - Error: Module not found: Error: Can't resolve 'assert' in 'D:\pocs\angular-pocs\ngrx-poc\node_modules\glob'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }

./node_modules/replace-in-file/lib/helpers/process-async.js:6:11-24 - Error: Module not found: Error: Can't resolve 'fs' in 'D:\pocs\angular-pocs\ngrx-poc\node_modules\replace-in-file\lib\helpers'

./node_modules/replace-in-file/lib/helpers/process-sync.js:6:11-24 - Error: Module not found: Error: Can't resolve 'fs' in 'D:\pocs\angular-pocs\ngrx-poc\node_modules\replace-in-file\lib\helpers'

./node_modules/replace-in-file/lib/helpers/replace-async.js:6:11-24 - Error: Module not found: Error: Can't resolve 'fs' in 'D:\pocs\angular-pocs\ngrx-poc\node_modules\replace-in-file\lib\helpers'

./node_modules/replace-in-file/lib/helpers/replace-sync.js:6:11-24 - Error: Module not found: Error: Can't resolve 'fs' in 'D:\pocs\angular-pocs\ngrx-poc\node_modules\replace-in-file\lib\helpers'
adamreisnz commented 2 years ago

This looks to me like an environmental problem. Do you have a standalone example of this module failing to work? There haven't been any recent updates that would have cause any issues.

Moreover, this module is a Node module, and not intended to run in a browser with Angular.

jack-sparroow commented 2 years ago

In node.js it works fine. but, for my use case I have to use this package in angular project. But, as you mentioned it is not intended for browser use. So, I have to use a workaround.

like this https://gist.github.com/Mustafa-Omran/bb0810c9e51a1453de8c298b524b217e