Running Existing Angular Project locally

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"
  }
}

Yes, I added the package.json file details in question, kindly review. — mubashermubi, May 07 '18 at 11:48
@Kadioo thanks, but gives me the error: 'sudo' is not recognized as an internal or external command, operable program or batch file. — mubashermubi, May 07 '18 at 11:56
@Kadioo 1st ran correctly, but the other *npm install typescript@'>=2.4.2 <2.7.0' * one gave "The system cannot find the file specified." — mubashermubi, May 07 '18 at 12:01
@Kadioo tried and it ran correctly, still gives the last error I reported in my question. — mubashermubi, May 07 '18 at 12:08

score 8 · Answer 1 · answered May 07 '18 at 11:30

8

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.

answered May 07 '18 at 11:30

bereket gebredingle

12,064
3
36
47

I tried, now it remove the error Local workspace file ('angular.json') could not be found but gives this: 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'. i have updated the details in question as well. – mubashermubi May 07 '18 at 11:37
Oh gud. Now u dont hv any issue with the angular but with project. It is an error from the project. May be due to angular version difference. So, is the project from git ? I mean u can share me the link and we can help u. If not show us the screen shot of the package.json file. – bereket gebredingle May 07 '18 at 11:43
1

I added the package.json file details in question. Please check. This is not available on git, I can share with gdrive if you would like. – mubashermubi May 07 '18 at 11:51
I had to run "npm install --save-dev @angular-devkit/build-angular" before running ng serve. Otherwise this works like a charm. – Nick Cordova Oct 07 '19 at 20:14
What if my package.json file contain non supported packages? – astrosixer Apr 07 '21 at 21:30

score 5 · Answer 2 · edited Jan 02 '22 at 12:52

5

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).

edited Jan 02 '22 at 12:52

Nimantha

6,405
6
28
69

answered Jan 27 '20 at 13:26

SeReGa

1,219
2
11
32

Important note: use the correct version of node. Otherwise there might be mistakes when you run: npm install – sunrelax May 21 '20 at 16:31

score 3 · Answer 3 · edited Apr 23 '20 at 12:54

3

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

edited Apr 23 '20 at 12:54

rajadilipkolli

3,475
2
26
49

answered May 07 '18 at 11:16

Kalpesh Kashyap

824
11
18

Gives: 'ng-serve' is not recognized as an internal or external command, operable program or batch file. – mubashermubi May 07 '18 at 11:17
Should be `ng serve` without the hyphen – user184994 May 07 '18 at 11:18
because angular-cli is not installed globally try "npm i angular-cli -g" – Kalpesh Kashyap May 07 '18 at 11:18
I tried, and gives same error as above: "Local workspace file ('angular.json') could not be found" – mubashermubi May 07 '18 at 11:19
Sounds like an angular 6 problem, take a look at https://stackoverflow.com/questions/49810580/error-local-workspace-file-angular-json-could-not-be-found – user184994 May 07 '18 at 11:22
Already tried and updated the question details, please check. Thanks. – mubashermubi May 07 '18 at 11:40
1

create new project by "ng new project_name" cd project_name and try again with new project ng server – Kalpesh Kashyap May 07 '18 at 11:43
@mubashermubi "Local workspace file ('angular.json') could not be found" most probably means you launch `ng serve` from the repo root's _parent_ dir. Instead, you need to launch it from the dir where angular.json file is (the root dir). I.E. if you launched `npm install` in `.` you _need_ to do a `cd ./[prjName]` into the subdir ang-cli created during install as root for the project, before you can do `nd serve` – netalex Dec 05 '18 at 13:37

score 0 · Answer 4 · answered Jan 14 '19 at 22:10

0

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

answered Jan 14 '19 at 22:10

NaveenT

49
6

score 0 · Answer 5 · answered Aug 04 '20 at 14:22

0

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

answered Aug 04 '20 at 14:22

Divya Pusuluru

81
2
8

score 0 · Answer 6 · answered Jan 22 '22 at 05:38

0

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.

answered Jan 22 '22 at 05:38

Jon

134
2
10

Running Existing Angular Project locally

change directory to our repo

installing Cli according to project readme file.

install the repo with npm

install TypeScript typings

Then I try the following:

start the server

6 Answers6