web-dev-qa-db-fra.com

Exécuter existant Angular Projeter localement

Je suis très nouveau dans Angular, j'essaye de lancer un projet existant de Angular sur ma machine. J'ai fait beaucoup de tests et suivi beaucoup d'articles. Mais je ne peux pas lancer mon projet.

J'ai les fichiers de projet comme ceci:

 enter image description here

J'ai installé le nodejs sur mon système. Et suivi les instructions suivantes selon un article: 

changer de répertoire sur notre repo

cd mon projet

installer Cli en fonction du fichier readme du projet.

npm install -g @ angular/cli @ 1.3.2

installer le repo avec npm

npm installer

installer des typages TypeScript

npm lance typings-install -- donne l'erreur: npm ERR! script manquant: typings-install

Ensuite, j'essaie ce qui suit:

npm install --global Pour les éléments suivants:

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)

démarrer le serveur

npm start

- Donne plusieurs messages d'erreur: Tels que: 

npm ERR! code ELIFECYCLE

- Pour cela, j'ai essayé "npm cache clean", puis supprimé "node_modules" puis installé à nouveau les packages à l'aide de: "npm install --save"

Puis réessayé: npm start cela m'a donné la même erreur "npm ERR! code ELIFECYCLE" 

En outre, ce message d'erreur: 

Cannot find module 'webpack/lib/node/NodeTemplatePlugin'

Pour cela, j'ai essayé "npm uninstall -g webpack" Puis: installer npm --save-dev webpack webpack-cli plugin html-webpack webpack-dev-serveur webpack-dev-middleware depuis ceci: Erreur : Impossible de trouver le module 'webpack/lib/node/NodeTemplatePlugin'

J'ai essayé de l'exécuter à nouveau: 

cette fois cela m'a donné l'erreur suivante: 

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'

Pour ce "Cannot find module 'node-sass'", j'ai refait la recherche: 

et a trouvé cette commande: npm install node-sass

je l'ai essayé et puis essayé de recommencer 

Maintenant j'ai reçu ERROR in No NgModule metadata found for 'AppModule'.

Et pour cela, j’ai essayé ce qui suit parmi les questions de git cli 8798

supprimer le dossier node_modules

rm -rf node_modules

enlever le webpack

npm remove webpack

npm propre cahe

npm cache clean --force

installer la dernière version de angular cli

npm install --save-dev @angular/cli@latest

installer les dépendances

npm install

maintenant c'est juste des tests

npm start our ng serve

Maintenant, il commence à me donner: le fichier d'espace de travail local ('angular.json') est introuvable et ne fonctionne pas du tout. Pour résoudre ceci: je l’ai fait: ng update @angular/cli --migrate-only --from=1.7.4

Ce qui supprime l'erreur: "Le fichier d'espace de travail local ('angular.json') est introuvable", mais maintenant cela me donne une erreur 

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

Qu'est-ce que j'oublie ici? J'ai essayé beaucoup d'articles à partir de 3 jours mais je ne peux pas l'exécuter. 

En outre, je vois différents types d'avertissement et de messages.  enter image description here

Lisez-moi dans le projet: 

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

Fichier package.json:

{
  "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"
  }
}
node.jsangulartypescriptnpmwebpack
2
mubashermubi

Lancer les commandes suivantes 

 npm uninstall -g @angular/cli
 npm cache verify
 npm install -g @angular/cli@next
 npm update

Ensuite 

 ng serve

J'espère que cela fonctionne maintenant. Commentaire si vous faites face à une erreur alors que.

1
bereket gebredingle

try ng-serve --openit va compiler votre projet et s’ouvrir directement dans le navigateur

1
kalpeshR

renommez le fichier .angular-cli.json en angular.json et relancez la commande ng serve --open.

0
NaveenT