web-dev-qa-db-fra.com

Comment installer Angular 2 en utilisant NPM?

J'essaie de configurer mon propre environnement de développement local pour une application Angular 2 sans utiliser la graine QuickStart mentionnée dans le Angular 2 site ou = CLI angulaire car ils ont tendance à contenir des fichiers supplémentaires dont je n'ai pas vraiment besoin.

Maintenant, tout va bien sauf que je ne sais pas comment obtenir Angular 2 en utilisant NPM. J'ai essayé d'utiliser npm install angular2 --save mais je viens de découvrir que angular2 était obsolète et qu’il était une version préliminaire. Alors, comment puis-je obtenir les derniers plugins Angular 2.0 utilisant NPM, si possible pour le moment?)?

javascriptangulartypescriptnpm
14
duskmonarch

at https://angular.io/docs/ts/latest/guide/setup.html , il est recommandé d'utiliser la graine QuickStart, voici son package.json , donc en fait, nous devons télécharger ses dépendances:

"dependencies": {
  "@angular/common": "~2.4.0",
  "@angular/compiler": "~2.4.0",
  "@angular/core": "~2.4.0",
  "@angular/forms": "~2.4.0",
  "@angular/http": "~2.4.0",
  "@angular/platform-browser": "~2.4.0",
  "@angular/platform-browser-dynamic": "~2.4.0",
  "@angular/router": "~3.4.0",

  "angular-in-memory-web-api": "~0.2.4",
  "systemjs": "0.19.40",
  "core-js": "^2.4.1",
  "rxjs": "5.0.1",
  "zone.js": "^0.7.4"
}

vous pouvez également créer votre package.json personnalisé en exécutant npm init, en copiant ces dépendances (ou la plupart d’entre elles) et en exécutant npm install avec votre package.json

5
Andriy

Angular 4 peut être installé de deux manières:

Remarque: assurez-vous que votre système a déjà installé les nœuds js et npm

  1. Effectuez les étapes de clonage au lancement à l'aide de commandes de terminal.
  2. Téléchargez la graine QuickStart et décompressez-la dans le dossier de votre projet. Effectuez ensuite les étapes mentionnées plus tard avec les commandes du terminal.

1. Clonage:

Supposons que vous souhaitiez créer un projet nommé helloworld, puis exécutez les commandes suivantes à partir de votre terminal

 git clone https://github.com/angular/quickstart.git helloworld
 cd helloworld
 npm install
 npm start

Après avoir exécuté la dernière commande, vous pouvez voir comme ceci dans votre navigateur

enter image description here

2. Téléchargement:

Téléchargez la graine QuickStart et décompressez-la dans le dossier de votre projet. Suivez ensuite les étapes ci-dessous avec les commandes du terminal.

cd quickstart
npm install
npm start

Pour plus de détails, allez sur site officiel

3
Amir

  1. Collez le code ci-dessous dans un fichier en le nommant package.json .

    {
"name": "demo-app",
"version": "1.0.0",
"author": "Aravind",
"description": "set up files for the first Demo App",
"scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lint": "tslint ./app/**/*.ts -t verbose",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
},
"license": "ISC",
    "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",

    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23",

    "bootstrap": "^3.3.6"
},
"devDependencies": {
    "concurrently": "^2.2.0",
    "lite-server": "^2.2.0",
    "tslint": "^3.7.4",
    "TypeScript": "^2.0.2",
    "typings": "^1.0.4"
},
"repository": {}
}

  2. accédez au dossier racine dans Cmd et

    npm install 

or

npm i

Alternativement, si vous voulez créer un nouveau package , package.json

  1. Accédez à un dossier dans l'invite de commande

  2. Exécuter la commande

    npm init

  3. Cela créera un nouveau fichier package.json et un copier/coller du code ci-dessus pour installer angular2 avec quelques autres dépendances de base.

Si vous recherchez une configuration simple. Jetez un coup d'œil à ceci post.

2
Aravind
  1. Installer Angular CLI 1.1.3
  2. Désinstallez la dernière version de CLI> npm uninstall –g @angular/cli
  3. Nettoyer le cache> npm cache clean
  4. Installez la version spécifique de angular CLI> npm install –g @angular/[email protected]
  5. Ouvrez l'invite de commande Node js.
  6. Accédez à l'emplacement du dossier de projet> cd project_name
  7. Installez les paquets mentionnés ci-dessous,
  8. npm i codemirror
  9. npm i ng2-codemirror
  10. npm i ng2-split-pane
  11. npm i ng2-daterange-picker
  12. Exécutez le npm install
  13. Enfin faire> ng serve
1
Anna8483

Cela dépend de votre outil de construction. S'il s'agit de webpack, il vous suffit d'installer angular de composants, comme:

  "dependencies": {
    "@angular/common": "~4.0.0",
    "@angular/compiler": "~4.0.0",
    "@angular/core": "~4.0.0",
    "@angular/forms": "~4.0.0",
    "@angular/http": "~4.0.0",
    "@angular/platform-browser": "~4.0.0",
    "@angular/platform-browser-dynamic": "~4.0.0",
    "@angular/router": "~4.0.0"
}

Et tous les modules de fournisseurs supplémentaires si cela était nécessaire dans votre cas.

1
A. Sitar
  1. Téléchargez l'exemple depuis https://angular.io/
  2. Enregistrez ce code et renommez-le.

  3. Accédez au dossier racine dans Cmd.

    $ cd myproject

  4. Exécuter la commande

    $ npm install
$ npm start
0
Sapna

Installation Angular Dépendances

Angular est un framework orienté composants. De nombreux composants doivent être créés pour rendre l'application complète. Un composant est un groupe de éléments personnalisés, HTML éléments, ShadowDOM & HTML importations.

0
student