web-dev-qa-db-fra.com

Créer un projet avec Angular 4 utilisant Angular CLI

Comment créer un nouveau projet avec la dernière Angular 4 utilisant Angular avec la commande ci-dessous:

ng new new_project

J'ai les versions suivantes installées

 - @angular/cli: 1.0.0-rc.2
 - node: 7.7.3
 - npm: 4.4.1
angularangular-cli
20
Kelvin Muia

Vous ne pouvez pas créer une nouvelle application Angular avec la CLI qui utilise Angular 4 en sortie de boîte. Au moins, pas pour le moment. Seule Angular 2 est pris en charge par la CLI, pour le moment. J'imagine que cela changera assez tôt.

Cependant, vous pouvez créer une nouvelle application en utilisant ng new <app-name>, Puis modifier la version de Angular utilisée dans le package.json. Exécutez npm install, Puis devraient tous fonctionner. C’est mon expérience.

J'espère que cela vous aide.

PDATE:

Je me trompe! Il existe une option que vous pouvez passer à la commande ng new Qui configurera le projet pour l’utilisation de ng 4.

ng new project_new --ng4

De ng --help:

--ng4 (Boolean) (Default: false) Create a project with Angular 4 in the template.

À l'heure actuelle, cela configure la section @angular package.json comme suit.

  "dependencies": {
    "@angular/common": ">=4.0.0-beta <5.0.0",
    "@angular/compiler": ">=4.0.0-beta <5.0.0",
    "@angular/core": ">=4.0.0-beta <5.0.0",
    "@angular/forms": ">=4.0.0-beta <5.0.0",
    "@angular/http": ">=4.0.0-beta <5.0.0",
    "@angular/platform-browser": ">=4.0.0-beta <5.0.0",
    "@angular/platform-browser-dynamic": ">=4.0.0-beta <5.0.0",
    "@angular/router": ">=4.0.0-beta <5.0.0",
    ...

Juste essayé, et ça marche.

PDATE 2

L'option --ng4 A été supprimée car la CLI latest créera désormais un projet Angular 5 simplement en utilisant ng new project_name.

33
R. Richards

Le moyen le plus simple pour créer un projet Angular 4 à l'aide de Angular CLI est une ancienne version de @ angular/cli (1.4.10)

npx @angular/[email protected] new myangular4

(merci pilules d'explosion )

Ou

> npm remove -g @angular/cli
> npm install -g @angular/[email protected]
> ng --version
  @angular/cli: 1.4.10
> ng new myangular4

Crée un fichier myangular4/package.json

{
  "name": "myangular4",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
15
rjdkolb

Mettez à jour votre version d'angular-cli, puis essayez d'utiliser la commande "ng new new_project" pour créer une nouvelle angular 4 application.

3
senthil

Dans mon cas, j’avais déjà installé ng depuis longtemps (environ 4 mois, mais un très long temps en Angular). Faire un npm install -g @angular/cli n'a pas fait le travail.

J'ai dû npm install -g @angular/cli --upgrade pour mettre à jour le cli.

Puis faire ng new myProject --mobile m'a obtenu le> 4 angulaire

3
Rexford

Pour créer un projet Angular_4 en utilisant Angular CLI, suivez les lignes de commande suivantes:

npm remove -g @ angular/cli

npm install -g @ angular/cli @ 1.4.10

nouveau myNewAngular4App

3
BlaCk HoLe

Les réponses ci-dessus sont correctes. Toutefois, si vous avez un projet angular, disons sur du code VS, vous devrez peut-être suivre différentes étapes.

  1. Installez Node.js® et npm s’ils ne sont pas déjà sur votre ordinateur.
  2. Ensuite, installez le Angular globalement globalement: npm install -g @angular/cli
  3. Dans le terminal de code VS, exécutez: npm install
  4. (À l'intérieur du terminal de code du VS) servir l'application: ng serve --open
2
Rrz0

Vous devriez vérifier votre dernière Angular de la CLI:

ng -v

Si vous devez installer/mettre à jour votre version, lancez simplement

Sudo npm install -g @ angular/cli @ last

Ensuite, vous pouvez créer un projet avec comand

ng new Project_Name

Il y a peu plus d'options, juste pour votre information

ng new Project_Name --style = scss

Maintenant, cela va créer un nouveau projet nommé "Nom_Projet"

"dependencies": {
  "@angular/animations": "^4.2.4",
  "@angular/common": "^4.2.4",
  "@angular/compiler": "^4.2.4",
  "@angular/core":  "^4.2.4",
  "@angular/forms": "^4.2.4",
  "@angular/http": "^4.2.4",
  "@angular/platform-browser": "^4.2.4",
  "@angular/platform-browser-dynamic": "^4.2.4",
  "@angular/router": "^4.2.4"
}

Si vous souhaitez mettre à jour des packages, vous pouvez le faire par commande

npm install @angular/{{nom_package}} // E.g. npm install @ angular/core

1
Sangwin Gawande

Je le fais comme indiqué par le fonctionnaire documentation de Angular

npm install -g @angular/cli
ng new your-app
cd your-app
ng serve --open

ouvrez votre navigateur sur http: // localhost: 4200 /

0
shades3002

Étape 1. Configuration de l'environnement de développement: Installez Node.js et npm s'ils ne sont pas installés.

Étape 2: Ensuite, installez globalement le CLI angulaire.

npm install -g @angular/[email protected].*

Étape 3: Créer un nouveau projet

ng new my-app

étape 4: lancez l'application:

cd my-app

ng serve --open

L'application ci-dessus sera dans angular 4.

0
Shubham Verma

  1. Dans mon cas, j’ai mis à jour le package.json, j’ai défini la version de tous les paquets commençant par @angular à 4.xx sauf angular/cli (c.-à-d.: @ Angular/animations ":" 4.xx "), ce qui signifie importer la dernière version. de la version 4 (qui est 4.4.6).

  2. puis j'ai exécuté npm install.

  3. pour vérifier la version installée, exécutez: npm list --depth = 0 | grep angular

  4. cela fait partie du package.json mis à jour:

    "dependencies": { "@angular/animations": "4.x.x", "@angular/common": "4.x.x", "@angular/compiler": "4.x.x", "@angular/core": "4.x.x", "@angular/forms": "4.x.x", "@angular/http": "4.x.x", "@angular/platform-browser": "4.x.x", "@angular/platform-browser-dynamic": "4.x.x", "@angular/platform-server": "4.x.x", "@angular/router": "4.x.x", "@ngx-translate/core": "^6.0.1", "@ngx-translate/http-loader": "0.0.3", "@types/form-data": "^2.2.0", "@types/hammerjs": "^2.0.35", "angular2-jwt": "^0.2.2", "angular2-text-mask": "^8.0.3", "base64-js": "^1.2.1", "browser-sync": "^2.23.2", "chart.js": "^2.7.0", "classlist.js": "1.1.20150312", "core-js": "2.4.1", "crypto-js": "3.1.9-1", "expect": "^1.20.2", "font-awesome": "4.7.0", "google-libphonenumber": "3.0.3", "hammerjs": "^2.0.8", "intl": "1.2.5", "lodash": "4.17.4", "moment-timezone": "^0.5.14", "ng2-page-scroll": "4.0.0-beta.7", "pako": "^1.0.6", "pdfjs-dist": "^1.8.398", "rxjs": "^5.4.2", "url-search-params-polyfill": "^2.0.1", "vls-web-modules": "0.0.21", "web-animations-js": "^2.3.1", "zone.js": "0.8.4" }, "devDependencies": { "@angular/cli": "1.6.5", "@angular/compiler-cli": "4.x.x", "@angular/platform-server": "4.x.x", "@angularclass/hmr": "^2.1.3", "@compodoc/compodoc": "^1.0.1", "@types/globalize": "0.0.31", "@types/googlemaps": "^3.30.0", "@types/jasmine": "^2.8.3", "@types/node": "^6.0.88", "@vls-web-modules/zuul-binder": "0.0.11", "codelyzer": "^2.0.1", "enhanced-resolve": "3.3.0", "immutable": "^3.8.1", "jasmine-core": "2.8.0", "jasmine-spec-reporter": "~3.2.0", "karma": "~1.4.1", "karma-chrome-launcher": "~2.0.0", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "0.2.0", "karma-jasmine": "~1.1.1", "karma-jasmine-html-reporter": "0.2.2", "karma-phantomjs-launcher": "^1.0.4", "protractor": "~5.1.0", "release-it": "2.7.3", "ts-node": "~2.0.0", "tslint": "~4.5.0", "typedoc": "0.6.0", "TypeScript": "2.4", "webpack-bundle-analyzer": "^2.9.0" }

0
Ala Messaoudi