Is it even possible to run an ember 2.18 application in this decade?

I have to make some adjustments to the project done with ember 2.18.2, and it is a complete disaster right now.

I'm using macOS BigSur(11.6) and this is the pckage.json:

"body-parser": "^1.15.2",
"broccoli-asset-rev": "^2.4.5",
"ember-ace": "1.3.2",
"ember-ajax": "^3.0.0",
"ember-browserify": "^1.2.1",
"ember-changeset": "1.2.0",
"ember-changeset-validations": "1.2.4",
"ember-cli": "2.18.2",
"ember-cli-app-version": "^3.0.0",
"ember-cli-babel": "^6.6.0",
"ember-cli-clipboard": "0.13.0",
"ember-cli-dependency-checker": "^2.0.0",
"ember-cli-eslint": "^4.2.1",
"ember-cli-head": "^0.4.1",
"ember-cli-htmlbars": "^2.0.1",
"ember-cli-htmlbars-inline-precompile": "^1.0.0",
"ember-cli-inject-live-reload": "^1.4.1",
"ember-cli-markdown-editor": "^0.1.0",
"ember-cli-mirage": "0.2.9",
"ember-cli-moment-shim": "2.0.0",
"ember-cli-page-object": "1.8.0",
"ember-cli-qunit": "4.2.1",
"ember-cli-release": "^0.2.9",
"ember-cli-sentry": "3.0.0-beta.1",
"ember-cli-shims": "^1.2.0",
"ember-cli-spinner": "0.0.9",
"ember-cli-sri": "^2.1.0",
"ember-cli-stylus": "1.0.6",
"ember-cli-uglify": "^2.0.0",
"ember-click-outside": "1.3.0",
"ember-data": "2.18.2",
"ember-data-has-many-query": "0.2.0",
"ember-export-application-global": "^2.0.0",
"ember-file-upload": "^3.0.5",
"ember-font-awesome": "3.1.1",
"ember-inflector": "^3.0.1",
"ember-intercom-io": "0.1.4",
"ember-load-initializers": "^1.0.0",
"ember-maybe-import-regenerator": "0.1.6",
"ember-metrics": "0.14.0",
"ember-modifier-manager-polyfill": "^1.2.0",
"ember-moment": "7.0.0-beta.3",
"ember-power-select": "1.10.4",
"ember-power-select-with-create": "0.4.0",
"ember-qunit": "3.3.0",
"ember-radio-buttons": "4.1.0",
"ember-resolver": "^4.0.0",
"ember-route-action-helper": "2.0.6",

As far as I understood I need watchman 4.9 for this project, which I tried to install from their git, by using something like this:

1. git clone https://github.com/facebook/watchman.git (or download zip file from link above) ,
2. cd watchman ,
3. git checkout v4.6.0 ,
4. ./autogen.sh ,
5. ./configure ,
6. make ,
7. sudo make install

I can't install this version, since step 4 starts to break, and the thread regarding the issue contains absolutely nothing.

I tried to use autoconf to compile it, but still, same errors as from the git issue above.

So my question is simple, can I run it? Maybe avoid using watchman at all?

Ember js Build Error (broccoli-persistent-filter:EslintValidationFilter)

After cloning the repository from Github then install npm and try to execute ember s. but I got this error. Then I delete node modules directory and package-lock.json file and install npm again. But i can't solve it.I am googling this error but can't solve it. Plz, Help me. Here is my Error:

Build Error (broccoli-persistent-filter:EslintValidationFilter) in helpers/flash- 
message.js

Package subpath './lib/util/traverser' is not defined by "exports" in 
/home/ag/Office/ecommerce/front-end/node_modules/eslint/package.json


Stack Trace and Error Report: /tmp/error.dump.a671c24c39f689554c47c73d068f7e9f.log

My Package.json:

{
"name": "front-end",
"version": "0.0.0",
"private": true,
"description": "Small description for front-end goes here",
"repository": "",
"license": "MIT",
"author": "",
"directories": {
"doc": "doc",
"test": "tests"
},
"scripts": {
"build": "ember build",
"lint:hbs": "ember-template-lint .",
"lint:js": "eslint .",
"start": "ember serve",
"test": "ember test"
},
"devDependencies": {
"@ember/jquery": "^0.6.0",
"@ember/optional-features": "^0.7.0",
"broccoli-asset-rev": "^3.0.0",
"ember-ajax": "^5.0.0",
"ember-aria-tabs": "^3.0.0",
"ember-auto-import": "^1.10.1",
"ember-cli": "~3.12.0",
"ember-cli-app-version": "^3.2.0",
"ember-cli-babel": "^7.7.3",
"ember-cli-bootstrap-4": "^0.12.0",
"ember-cli-dependency-checker": "^3.1.0",
"ember-cli-eslint": "^5.1.0",
"ember-cli-flash": "^2.1.0",
"ember-cli-form-data": "^2.1.1",
"ember-cli-htmlbars": "^3.0.1",
"ember-cli-htmlbars-inline-precompile": "^2.1.0",
"ember-cli-inject-live-reload": "^1.8.2",
"ember-cli-moment-shim": "^3.8.0",
"ember-cli-sass": "^10.0.1",
"ember-cli-shims": "^1.2.0",
"ember-cli-sri": "^2.1.1",
"ember-cli-swiper": "^1.0.6",
"ember-cli-template-lint": "^1.0.0-beta.1",
"ember-cli-uglify": "^2.1.0",
"ember-composable-helpers": "^2.4.0",
"ember-concurrency": "^1.3.0",
"ember-cp-validations": "^4.0.0-beta.12",
"ember-crumbly": "^3.0.1",
"ember-data": "~3.12.0",
"ember-drag-drop": "^0.9.0-beta.0",
"ember-export-application-global": "^2.0.0",
"ember-fetch": "^8.1.0",
"ember-font-awesome": "^4.0.0-rc.4",
"ember-load-initializers": "^2.0.0",
"ember-local-storage": "^1.7.2",
"ember-maybe-import-regenerator": "^0.1.6",
"ember-modal-dialog": "^3.0.1",
"ember-moment": "^8.0.1",
"ember-pickr": "^2.2.1",
"ember-power-select": "^3.0.2",
"ember-qunit": "^4.4.1",
"ember-resize": "^0.3.4",
"ember-resolver": "^5.0.1",
"ember-source": "~3.12.0",
"ember-toggle": "^7.1.0",
"ember-tooltips": "^3.4.5",
"ember-uuid": "^2.1.0",
"ember-welcome-page": "^4.0.0",
"eslint-plugin-ember": "^6.2.0",
"eslint-plugin-node": "^9.0.1",
"loader.js": "^4.7.0",
"popper.js": "^1.16.1",
"qunit-dom": "^0.8.4",
"sass": "^1.30.0"
},
"engines": {
"node": "8.* || >= 10.*"
},
"dependencies": {
"drift-zoom": "^1.5.0"
}
}

If anyone has any idea about this error then comment or answer it. I will vote and accept the answer.

Component in a loop does not show the last component in ember js

I'm a beginner to ember js. Here I'm looping a component called colored-box in the 'reading.hbs' file. This loop of components shows all the other elements with relevant properties. But the last element is not showing. In the component js file, I have used observes method with init. I'm downloading a pdf which is generated using the html rendered with this code with pdfReadctor. I got this issue in the downloaded pdf. I have attached the image of the place where I have the issue. I can't figure out what the reason is. Can anyone please help me to figure out the problem? Below I have attached the code.

Figure 1.) reading.hbs

Figure 2.) colored-box.hbs - component file

Figure 3.) colored-box.js

EmberJs new project throws Decorating class property failed

I tried to use ember cli to generate local project, but when visiting localhost:4200, I met below errors:

Error occurred:

- While rendering:
  -top-level
    application

Uncaught Error: Decorating class property failed. Please ensure that proposal-class-properties is enabled and runs after the decorators transform.

and ember -v gives this:

ember-cli: 3.28.4
node: 16.13.1
os: darwin x64

Please help to point out the reason.

Thanks

Ember Octane on 'keyup' or 'keydown' is not firing

I have a glimmer Component in an Ember Octane app like this

import Component from '@glimmer/component';
import { action } from '@ember/object';


export default class TestComponent extends Component {
  @action
  handleEvent(event) {
    console.log(event);
  }
}

and in my HTML I have

<div ></div>

but handleEvent is not firing even when changing to 'keyDown' for example. It says in the documentation

The event can be any event name, not just the click event, which makes perfect for handling any kind of DOM event. For a list of native browser events, see the MDN documentation

But that doesn't seem to be true!

Is there an "Ember way" to handle keyboard events without installing an outer library (modifier) or should I stick with native event listeners?

What is the windows cmd equivalent of the command target=mock country=UK ember s?

How can we write the same command

target=mock country=UK ember s

in windows command prompt?

Are we supposed to use any of these?

ember s & target=mock & country=UK
ember s && target=mock && country=UK

Is using an api server like rest for my backend a secure way?

Nowadays I see websites are made using a sperate api backend server which provides the data from the database called a REST API server. When I was at school they taught me how to connect to apache using php to access the database!! I was thinking is this is safe (using api)?? Like if I have such an api which gives data from the database anyone can request a direct api call and steal that data. I know there is something called api token and private apis. But if somehow someone manages to break that then the my server will make all data public. Isnt the old method more safe because only my website has access to the database. I just want to know how exactly does this backend rest api works? I had done a project and my rest api can be accessed by anyone using my websites url.

Please someone explain the foundation of using such separate app for backend