Develop Reference

How to open/run old angular Project in local host

I'm trying to run old project on the team Drive, but I'm not sure what node version I will use. Is there a way for me to check it in the code or using the terminal?
Another questions:
In the READ ME File, it says here that it use Angular CLI version 6.0.3. -- so do I need to use this version?
Do I need to update the version of my dependency since this one is an old angular project? If yes, how? What command do I need to use?
Is it okay to delete the node_modules and package-lock.json if I use npm install?
This is my whole package.json
{
"name": "sample-tool",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.7",
"#angular/animations": "^8.2.0-next.1",
"#angular/common": "^8.2.0-next.1",
"#angular/compiler": "^8.2.0-next.1",
"#angular/core": "^8.1.1",
"#angular/fire": "^5.4.2",
"#angular/forms": "^8.2.0-next.1",
"#angular/platform-browser": "^8.2.0-next.1",
"#angular/platform-browser-dynamic": "^8.2.0-next.1",
"#angular/router": "^8.2.0-next.1",
"#ng-bootstrap/ng-bootstrap": "^4.2.1",
"#swimlane/ngx-charts": "^10.1.0",
"#swimlane/ngx-datatable": "^15.0.2",
"angular-calendar": "^0.25.2",
"angular-datatables": "^6.0.1",
"angular-file-uploader": "^5.0.2",
"angular-notifier": "^4.1.1",
"bootstrap": "^4.4.1",
"bootstrap-icons": "^1.0.0-alpha2",
"c3": "^0.4.23",
"chart.js": "^2.8.0",
"chartist": "^0.11.3",
"core-js": "^2.6.9",
"d3": "^4.8.0",
"datatables.net": "^1.10.19",
"datatables.net-dt": "^1.10.19",
"file-saver": "^2.0.2",
"firebase": "^7.9.3",
"jquery": "^3.4.1",
"lodash": "^4.17.14",
"ng-chartist": "^1.1.1",
"ng-multiselect-dropdown": "^0.2.3",
"ng2-charts": "^1.6.0",
"ng2-completer": "^2.0.8",
"ng2-dragula": "^2.1.1",
"ng2-search-filter": "^0.5.1",
"ng2-slim-loading-bar": "^4.0.0",
"ng2-smart-table": "1.3.5",
"ng2-validation": "^4.2.0",
"ngx-perfect-scrollbar": "6.1.0",
"ngx-quill": "^7.0.2",
"ngx-toastr": "^8.10.2",
"node-sass": "^4.12.0",
"pace-js": "^1.0.2",
"quill": "^1.3.6",
"rxjs": "^6.5.2",
"rxjs-compat": "^6.5.2",
"xlsx": "^0.15.5",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.803.23",
"#angular/cli": "^8.1.1",
"#angular/compiler-cli": "^8.2.0-next.1",
"#angular/language-service": "^8.2.0-next.1",
"#types/c3": "^0.6.4",
"#types/chartist": "^0.9.46",
"#types/datatables.net": "^1.10.17",
"#types/jasmine": "^2.8.16",
"#types/jasminewd2": "^2.0.6",
"#types/jquery": "^3.3.30",
"#types/node": "~8.9.4",
"codelyzer": "^5.0.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.2.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~1.4.2",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.4.1",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~3.4.5"
}
}

The project is obviously Angular v8.
So I would say you should do the following steps:
1. Step - Install newest Angular CLI
Angular CLI will recognize if the project itself is using older version of Angular, so no need to limit yourself to the old version of the CLI.
2. Step - Install correct version of the Node.js
For Angular v8, you need Node v10.9.
Note: This Stack Overflow answer have compatibility table, so you can check it once you start upgrading your project.
3. Step - Install dependencies
Install all the dependencies with npm install.
Note: Don't delete package-lock.json and do npm install. package-lock.json keeps the dependency versions and if you delete it and do npm install, it can install newer versions, which can break you project.
4. Step - Run the project
Run the project with npm start.
5. Step (Optional) - Upgrade project to latest version
You can now gradually upgrade your app to newer versions. You can check Angular official guide for upgrading projects.
Note: It is recommended to upgrade only one version at a time. So you should first upgrade to v9, then to v10...
Note: When you upgrade Angular project, you should first upgrade all third-party dependencies to the next version. Otherwise, Angular will throw an error when upgrading, if it finds something incompatible.

Great answer by NeNaD. I just want to add this helpful article that I referred to when I was upgrading my old Angular project, https://www.angularjswiki.com/angular/update-angular-cli-version-ng-update-to-latest-6-7-versions/

Based on your questions:
I'm not sure what node version I will use. Is there a way for me to check it in the code or using the terminal?
You can make use of the node version command as
node -v
or
node --version
it says here that it use Angular CLI version 6.0.3. -- so do I need to use this version?
You could look into upgrade options but since its a old version and you are trying to run it. I would recommend to first use the same version as to see how its running and doesn't cause any abnormalities and then you could upgrade as others suggested
Do I need to update the version of my dependency since this one is an old angular project? If yes, how? What command do I need to use?
I would recommend you do not and so you refer below what is going on.
Version numbers in semantic versioning consist of 3 sets of numbers separated by a ., for example 1.2.3 which represent major.minor.patch respectively. The semantic version documentation explains each of these:
MAJOR version when you make incompatible API changes,
MINOR version when you add functionality in a backwards compatible manner, and
PATCH version when you make backwards compatible bug fixes.
In the package.json, for each dependency you will see a corresponding semver number. Sometimes this is prefixed with a carat ^ or tilde ~.
^1.2.3 — install the latest version of 1.X.X (don’t go past specified major, only a higher minor and patch number).
~1.2.3 — install the latest version of 1.2.X (don’t go past specified major or minor, only a higher patch number).
You can use range operators (e.g. >=) if you need more fine tuned control of the version range.
Is it okay to delete the node_modules and package-lock.json if I use npm install?
You can remove the node_modules as it will be re-created when you re-install using the package.json but keep in mind that if there have been changes made to the node_modules packages then they might be overwritten but this generally doesn't happen but its good to know.
Don't delete your package-lock.json make a copy of it somewhere. Also, deleting the file can affect your version control.
why?
Imagine the project has a dependency, example-package at version ^1.0.0. This is the latest available version at the time of first install and is added to the lock file as 1.0.0. A month later, a new release of example-package comes out 1.1.0. Let’s pretend a new developer joins your team and clones the project repository, and installs the project.
The version in the package.json is ^1.0.0 (meaning the latest 1.X.X), so you would think that the 1.1.0 would be installed on the new developer’s machine, but this is not the case. When the dependency was first added to the project, 1.1.0 did not exist, so the version listed in the lock file is 1.0.0. Therefore 1.0.0 will always be installed, despite there being a newer available version that meets the semantic version specification in the package.json.
If you do not commit the lock file to your repository, or delete the lock file and reinstall your node modules, then version 1.1.0 of example-package will be installed, since it will be treated as if this is the first time installing. New bugs could have been introduced into 1.1.0, or the maybe the package dependencies changed and are incompatible with other dependencies in your project.
This is how deleting the lock file can unintentionally cause dependencies to be upgraded which can break your application.

Module not found: Can't resolve '#egjs/hammerjs' while installing React Native Gesture Handler

I get the error
Module not found: Can't resolve '#egjs/hammerjs'
while trying to import 'react-native-gesture-handler' in an Expo Run React Native app.
I've tried expo install #types/hammerjs and expo install #types/hammerjs and in my application import hammer, but it still throws the error.
I'm using Hammer.JS version 2.0.8 and React Native Gesture Handler version 1.5.0

I faced the same issue and had to uninstall react-native-gesture-handler npm uninstall react-native-gesture-handler and install it via npm and not expo npm i react-native-gesture-handlerwhich is now version 1.6.1.
This worked for me, but it triggers a warning message Some of your project's dependencies are not compatible with currently installed expo package version:
- react-native-gesture-handler - expected version range: ~1.5.0 - actual version installed: ^1.6.1
Your project may not work correctly until you install the correct versions of the packages.
To install the correct versions of these packages, please run: expo install [package-name ...]
However, if you install react-native-gesture-handler with expo expo install react-native-gesture-handler you'll get the same Module not found: Can't resolve '#egjs/hammerjs' issue. Hence I guess this is a short term fix but is works.
My expo-cli is version 3.15.5
Here are my current dependencies
"dependencies": {
"#react-native-community/masked-view": "0.1.5",
"expo": "^36.0.0",
"expo-av": "~8.0.0",
"react": "16.9.0",
"react-dom": "16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
"react-native-gesture-handler": "^1.6.1",
"react-native-safe-area-context": "0.6.0",
"react-native-safe-area-view": "^1.0.0",
"react-native-screens": "2.0.0-alpha.12",
"react-native-web": "^0.11.7",
"react-navigation": "^4.1.1",
"react-navigation-stack": "^2.1.1"
},
So you don't need to install #types/hammerjs as a dependency.
I hope it helps !

error: bundling failed: TypeError: Cannot read property 'transformFile' of undefined, React Native

I receive this error whenever I run react-native start, but this started happening recently after I had installed firebase-tools and stripe in my node modules, but before that it would run just fine, also here's the error's stacktrace:
::ffff:127.0.0.1 - - [22/Mar/2020:19:59:30 +0000] "GET /index.bundle?platform=android&dev=true&minify=false HTTP/1.1" 500 - "-" "okhttp/3.12.1"
error: bundling failed: TypeError: Cannot read property 'transformFile' of undefined
at C:\Users\me\Project\node_modules\react-native\node_modules\#react-native-community\cli\node_modules\metro\src\Bundler.js:87:34
at Generator.next (<anonymous>)
at asyncGeneratorStep (C:\Users\me\Project\node_modules\react-native\node_modules\#react-native-community\cli\node_modules\metro\src\Bundler.js:14:24)
at _next (C:\Users\me\Project\node_modules\react-native\node_modules\#react-native-community\cli\node_modules\metro\src\Bundler.js:34:9)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
Here's my package.json:
{
"name": "Project",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"card-validator": "6.2.0",
"firebase-tools": "7.15.1",
"jetifier": "^1.6.5",
"prop-types": "15.7.2",
"react": "^16.13.1",
"react-art": "^16.13.1",
"react-dom": "^16.13.1",
"react-geocode": "0.2.1",
"react-native": "0.61.5",
"react-native-country-picker-modal": "1.9.8",
"react-native-elements": "1.2.7",
"react-native-firebase": "5.6.0",
"react-native-geocoding": "0.4.0",
"react-native-gesture-handler": "1.5.2",
"react-native-maps": "0.26.1",
"react-native-paper": "3.2.1",
"react-native-reanimated": "1.4.0",
"react-native-restart": "0.0.14",
"react-native-shadow": "^1.2.2",
"react-native-svg": "12.0.3",
"react-native-vector-icons": "6.6.0",
"react-native-web": "^0.9.13",
"react-navigation": "4.0.10",
"react-navigation-drawer": "2.3.3",
"react-navigation-stack": "1.10.3",
"stripe": "^8.33.0",
"tipsi-stripe": "7.5.1",
"typescript": "^3.8.3"
},
"devDependencies": {
"#babel/core": "7.7.4",
"#babel/runtime": "7.7.4",
"#react-native-community/eslint-config": "0.0.5",
"babel-jest": "24.9.0",
"eslint": "^5.0.0",
"jest": "24.9.0",
"metro-react-native-babel-preset": "0.56.3",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
I am also well aware of another question that has the same problem on StackOverflow, but that question's solution didn't work for me, because npm ignored it when i ran react-native start since those modules were deprecated, and I still got the same error

Downgrading NodeJS to LTS version always helps. I faced same issue when I was trying on the NodeJS^17 but when I downgraded it to NodeJS^14 and reinstalled node_modules everything was fixed.

The solution in the first comment under the question worked for me, which was deleting the node_modules and package-lock.json, HOWEVER, I didn't want to do this knowing i would run into more errors, and sure enough I did, but at least I was able to fix them and get it to run, unlike the stubborn error I asked about. So yes, this method works, but I definitely hope that someone has a better way.

I was having this error. I did two things which I think led to me fixing this issue:
I'm working in a monorepo so I added the following code to my package.json:
"workspaces": {
"nohoist": [
"react-native",
"react-native/**",
"react",
"react/**"
]
}
I upgraded my metro-react-native-babel-preset package from ^0.58.0 to the latest version - ^0.59.0 (yarn add -D metro-react-native-babel-preset)

I have the same problem with Nodejs version 17.1.0. Just uninstalled it and reinstall Nodejs version 16.13.0.

I had the same issue. I was running npm v7. and node v10. I upgraded both to latest, and it started working.

This error happened to me when I was using the inline require in metro config for performance optimization.
I solve this problem changing the metro config property "blacklist" to "blockList":
return {
preloadedModules: moduleMap,
transform: { inlineRequires: { blockList: moduleMap } },
}

This is an old thread but I wanted to contribute as it is one of the first threads that appears in Google when searching "Cannot read property 'transformFile' of undefined".
This might not be a permanent fix as it seems to crop up when installing new dependencies, I'm also using Expo.
To fix this I've been installing the dependency, then using yarn-upgrade-all which goes through your package.json and upgrades them all to the latest version. This can obviously cause conflicts but for my use, it's working (so far) and doesn't require something drastic like deleting folders or files.

rm -rf node_modules
yarn
pod install

NPM Installing non root dependencies under node_modules?

The project #superflycss/component-navbox has the following dependencies:
"devDependencies": {
"#superflycss/component-body": "^1.0.1",
"#superflycss/component-display": "^1.0.2",
"#superflycss/component-header": "^2.1.0",
"#superflycss/component-test": "^3.6.14",
"#superflycss/foundation": "^2.0.3",
"#superflycss/superflycss": "^1.0.0",
"#superflycss/utilities-colors": "^3.0.8",
"#superflycss/utilities-effects": "^2.1.0",
"#superflycss/utilities-fonts": "^3.3.7",
"#superflycss/utilities-format": "^1.1.1",
"#superflycss/utilities-layout": "^4.0.4",
"lite-server": "^2.4.0",
"npm-check-updates": "^2.15.0"
},
"dependencies": {
"#superflycss/variables-dimension": "^2.0.0",
"#superflycss/variables-layout": "^2.0.0"
}
So when doing:
git clone git#github.com:superflycss/component-navbox.git
cd component-navbox
npm i
I would expect only the root dependencies to show up in the node_modules folder.
However another dependency variables-colors also shows up in node_modules.
IIUC this should not happen or am I missing something?
One of the problems with this is that the variables-colors version being installed is outdated, however since utilities-colors also depends on this, it uses the older version rather then the newer, and that leads to linting errors, etc.

There was a mismatch between package-lock.json and package.json. I removed the lock file and also node_modules and did npm i and it refreshed with all the dependencies being correct.

Do I need #types/ before every dependency in react native?

I would like to convert my existing react native app to typescript.
The documentation says to uninstall existing dependencies and replace them with something like this:
yarn add --dev #types/jest #types/react #types/react-native #types/react-test-renderer
Do I need to do this with every dependency? What if some dependencies don't have #types/ ?
Here is my package.json:
{
"name": "reactnative",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"axios": "^0.18.0",
"expo": "^28.0.0",
"faker": "^4.1.0",
"formik": "^0.11.11",
"immutability-helper": "^2.7.1",
"lodash": "^4.17.10",
"native-base": "^2.7.1",
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-actionsheet": "^2.4.2",
"react-native-autogrow-textinput": "^5.1.1",
"react-native-firebase": "^4.2.0",
"react-native-keyboard-input": "^5.2.3",
"react-native-keychain": "^3.0.0-rc.3",
"react-native-material-color": "^1.0.15",
"react-native-parsed-text": "0.0.20",
"react-native-section-list-get-item-layout": "^2.2.3",
"react-native-ui-kitten": "^3.0.1",
"react-native-vector-icons": "^4.6.0",
"react-navigation": "^2.5.5",
"react-redux-firebase": "^2.1.6",
"recompose": "^0.27.1",
"redux-logger": "^3.0.6",
"redux-promise-middleware": "^5.1.1",
"redux-thunk": "^2.3.0",
"yup": "^0.25.1"
},

The documentation says to uninstall existing dependencies and replace them
Actually you have to install both the package, such as react and the related types as #types/react. If react is already installed, you don't have to uninstall and reinstall.
Do I need to do this with every dependency?
As long as you want types for it.
What if some dependencies don't have #types/ ?
Then you either type it on your own, or you type it as any and you don't have the typesafety of Typescript anymore.

No, packages that start with #types/ are TypeScript definitions. They should be installed in addition to the actual packages if these don't already ship with TS definitions (many large/popular libraries do). Your editor and the TypeScript compiler will use the definitions to perform type checking.

#types typings exist for all popular libraries. Some libraries include typings (.d.ts files), no typings are needed for them, the example is axios.
For libraries that don't have typings, a developer can provide own type declarations or use untyped imports, e.g. with require. The example is open issue for react-native-actionsheet.
The documentation says to uninstall existing dependencies
The documentation shouldn't say anything like that. Existing dependencies shouldn't be uninstalled. Only respective #type dependencies should be added.