Running Existing Angular Project locally - node.js

Question

I am very new to Angular, I am trying to run an existing project of Angular on my machine. I have done a lot of tests and followed a lot of articles. But cannot run my project.
I have the project files like this:
I installed the nodejs on my system.
And followed the following instructions as per an article:
change directory to our repo
cd myproject
installing Cli according to project readme file.
npm install -g #angular/cli#1.3.2
install the repo with npm
npm install
install TypeScript typings
npm run typings-install
-- Gives error: npm ERR! missing script: typings-install
Then I try the following:
npm install --global
For following:
webpack (npm install --global webpack)
webpack-dev-server (npm install --global webpack-dev-server)
karma (npm install --global karma-cli)
protractor (npm install --global protractor)
typings (npm install --global typings)
typescript (npm install --global typescript)
start the server
npm start
-- Gives multiple error messages:
Such as:
npm ERR! code ELIFECYCLE
-- For this I tried "npm cache clean" and then deleted "node_modules" and then installed packages again using: "npm install --save"
Then tried again: npm start it gave me same error "npm ERR! code ELIFECYCLE"
Also, this error message:
Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
For this, I tried "npm uninstall -g webpack"
and then: npm install --save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server webpack-dev-middleware from this: Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
Tried running it again:
this time it gave me following error:
ERROR in ./node_modules/raw-loader!./node_modules/#angular/cli/node_modules/post
css-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--8-3!./sr
c/styles.scss
Module build failed: Error: Cannot find module 'node-sass'
For this "Cannot find module 'node-sass'" I did the search again:
and found this command: npm install node-sass
i tried it and then tried starting again
Now I received ERROR in No NgModule metadata found for 'AppModule'.
And for this I tried the following from git cli issues 8798
remove the node_modules folder
rm -rf node_modules
remove the webpack
npm remove webpack
clean npm cahe
npm cache clean --force
install the latest version of angular cli
npm install --save-dev #angular/cli#latest
install the dependencies
npm install
now it's just testing
npm start our ng serve
Now it start giving me: Local workspace file ('angular.json') could not be found and wont work at all.
To resolve this: I did: ng update #angular/cli --migrate-only --from=1.7.4
Which remove the error: "Local workspace file ('angular.json') could not be found" but now it gives me error
ERROR in src/app/web-player/albums/album-context-menu/album-context-menu.compon
nt.ts(13,14): error TS2515: Non-abstract class 'AlbumContextMenuComponent' does
not implement inherited abstract member 'getAllTracks' from class 'ContextMenuC
mponent<Album>'.
src/app/web-player/artists/artist-context-menu/artist-context-menu.component.ts
13,14): error TS2515: Non-abstract class 'ArtistContextMenuComponent' does not
mplement inherited abstract member 'getAllTracks' from class 'ContextMenuCompon
nt<Artist>'.
src/app/web-player/context-menu/context-menu.component.ts(58,34): error TS2304:
Cannot find name 'TrackList'.
src/app/web-player/playlists/playlist-context-menu/playlist-context-menu.compon
nt.ts(15,14): error TS2515: Non-abstract class 'PlaylistContextMenuComponent' d
es not implement inherited abstract member 'getAllTracks' from class 'ContextMe
uComponent<Playlist>'.
What am i missing here? I tried a lot of articles from 3 days but cannot run it.
Also, I see different types of Warning and messages.
Read Me file in project:
# Client
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.3.2.
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
## Running unit tests
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
Before running the tests make sure you are serving the app via `ng serve`.
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
Package.json file:
{
"name": "client",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json --host 0.0.0.0",
"build": "ng build --prod --sourcemaps --build-optimizer",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.1.2",
"#angular/common": "^5.1.2",
"#angular/compiler": "^5.1.2",
"#angular/core": "^5.1.2",
"#angular/forms": "^5.1.2",
"#angular/http": "^5.1.2",
"#angular/platform-browser": "^5.1.2",
"#angular/platform-browser-dynamic": "^5.1.2",
"#angular/router": "^5.1.2",
"bootstrap": "^4.0.0-beta",
"chart.js": "^2.7.0",
"copy-to-clipboard": "^3.0.8",
"core-js": "^2.5.1",
"hammerjs": "^2.0.8",
"moment": "^2.18.1",
"ng-lazyload-image": "^3.3.3",
"ngx-color-picker": "^4.3.4",
"normalize.css": "^7.0.0",
"perfect-scrollbar": "^0.8.1",
"popper.js": "^1.12.5",
"raven-js": "^3.18.1",
"rxjs": "^5.4.2",
"svg4everybody": "^2.1.4",
"tooltip.js": "^1.1.5",
"zone.js": "^0.8.18"
},
"devDependencies": {
"#angular/cli": "^1.6.2",
"#angular/compiler-cli": "^5.1.2",
"#angular/language-service": "^5.1.2",
"#types/hammerjs": "^2.0.35",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "^2.0.3",
"#types/node": "~6.0.60",
"#types/popper.js": "^1.10.1",
"#types/youtube": "0.0.31",
"#types/clipboard": "^1.5.35",
"cheerio": "^1.0.0-rc.2",
"codelyzer": "~3.1.1",
"gulp": "^3.9.1",
"gulp-clean": "^0.3.2",
"gulp-filter": "^5.0.0",
"gulp-rename": "^1.2.2",
"gulp-svgmin": "^1.2.3",
"gulp-svgstore": "^6.1.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "^1.7.1",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"material-design-icons": "^3.0.1",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2",
"webpack-bundle-analyzer": "^2.9.0"
}
}

Answer 1

Run the following commands
npm uninstall -g #angular/cli
npm cache verify
npm install -g #angular/cli#next
npm update
Then
ng serve
I hope it works now. Comment if u face any error while.

Answer 2

That should be much easier...
Take your project files as is
Run npm install
Since you have the package.json file, it will read all dependencies and install them.
Then run npm audit fix if needed (the terminal will tell you that).

Answer 3

try ng serve --open
it will compile your project and directly open in browser

Answer 4

rename the file .angular-cli.json to angular.json and re run the ng serve --open command.

Answer 5

Change the path of the directory in your local
cd my-repo
npm install
ng serve or ng serve --open
You will find the Localhost then.
To clean the cache:
npm cache clean

Answer 6

I also had need to setup existing angular project.
*cli version as per your package.json file
npm install -g #angular/cli#1.3.2
Then
npm install
Then
ng serve
I have tested, it is working here.