Create Project with Angular 4 Release using Angular CLI

Question

How do I create new project with the latest Angular 4 release using Angular CLI with the command below :

ng new new_project

I have the following versions installed

 - @angular/cli: 1.0.0-rc.2
 - node: 7.7.3
 - npm: 4.4.1

R. Richards · Accepted Answer · 2017-11-09 16:50:16Z

34

You cannot create a new Angular application with the CLI that uses Angular 4 out of the box. At least, not at the moment. Only Angular 2 is supported by the CLI, at this time. I imagine that will change soon enough.

However, you can create a new application using ng new <app-name>, and then change the version of Angular it uses in the package.json. Run npm install, and it should all work. That has been my experience.

Hope this helps you out.

UPDATE:

I am mistaken! There is an option that you can pass to the ng new command that will set up the project to use ng 4.

ng new project_new --ng4

From ng --help:

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

Right now this sets up the @angular section package.json as follows.

  "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",
    ...

Just tried it, and it works.

UPDATE 2

The --ng4 option has now been removed as the latest CLI will now create an Angular 5 project just by using ng new project_name.

edited Nov 9, 2017 at 16:50

answered Mar 16, 2017 at 11:39

R. Richards

25k10 gold badges65 silver badges65 bronze badges

1

Finding out if what this link says is true twitter.com/ladyleet/status/841074080342134785
– Kelvin Muia
Commented Mar 16, 2017 at 12:05
Twitter is blocked where I am at, and I couldn't be more pleased about it. :)
– R. Richards
Commented Mar 16, 2017 at 12:13
Was under #Angular4 and I quote " you gen a new angular app with angularcli it gives you an #angular4 app. No more updating package.json" Seeing if I can get anything.
– Kelvin Muia
Commented Mar 16, 2017 at 12:23
I agree with you answer updating "package.json" Just what to find out if its possible with angularcli.
– Kelvin Muia
Commented Mar 16, 2017 at 12:26
Thank you for your reply. I had actually done that and got 4.0 beta verison. Latest version is 4.0.0-rc.3 and still your answer is correct. Just thought the current CLI would pick it by default that is the Latest version is 4.0.0-rc.3
– Kelvin Muia
Commented Mar 16, 2017 at 12:57

| Show 1 more comment

rjdkolb · Accepted Answer · 2018-07-28 14:10:44Z

17

The easiest way to create an Angular 4 project using Angular CLI is install an older version of the @angular/cli (1.4.10)

npx @angular/[email protected] new myangular4

(thanks Explosion Pills)

Or

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

Creates a 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"
  },

edited Jul 28, 2018 at 14:10

answered Jan 12, 2018 at 11:09

rjdkolb

11.3k12 gold badges76 silver badges91 bronze badges

This approach worked for me, except that I had to use version v1.4.10 (npm install -g @angular/[email protected]). A colleague directed me to version 1.4.10 after he encountered the issue described here (github.com/angular/angular-cli/issues/9303) and applied the recommended solution.
– Eric Bowden
Commented Feb 11, 2018 at 16:54
I encountered the same error as comment above when running "ng new my-ng-project". Runned "npm remove -g @angular/cli" and "npm install -g @angular/[email protected]" to get it working.
– Ivan Monteiro
Commented Feb 11, 2018 at 18:05
Thanks @EricBowden and Ivan. I have updated my answer.
– rjdkolb
Commented Feb 12, 2018 at 4:07
1

It may be even easier to do npx @angular/[email protected] new myangular4
– Explosion Pills
Commented Jul 28, 2018 at 13:52

Add a comment |

senthil · Accepted Answer · 2017-06-19 13:12:36Z

3

Update your angular-cli version, then try to use "ng new new_project" command to create new angular 4 application.

answered Jun 19, 2017 at 13:12

senthil

2291 silver badge3 bronze badges

Currently this should work. This question was just before the Angular 4 release was done. Thanks.
– Kelvin Muia
Commented Jun 19, 2017 at 15:41

Add a comment |

KhoPhi · Accepted Answer · 2017-09-03 20:26:16Z

3

In my case, I had ng already installed a long time ago (about 4 months, but a very long time in Angular terms). Doing a npm install -g @angular/cli didn't do the job.

I had to npm install -g @angular/cli --upgrade to update the cli.

Then doing ng new myProject --mobile got me the >4 Angular

answered Sep 3, 2017 at 20:26

KhoPhi

9,44018 gold badges81 silver badges134 bronze badges

Currently this should work. This question was just before the Angular 4 release was done. Thanks. –
– Kelvin Muia
Commented Sep 5, 2017 at 11:07

Add a comment |

Nour Eddine · Accepted Answer · 2018-04-05 09:53:48Z

3

To create an Angular_4 project using Angular CLI follow these commands lines :

npm remove -g @angular/cli

npm install -g @angular/[email protected]

ng new myNewAngular4App

answered Apr 5, 2018 at 9:53

Nour Eddine

1512 silver badges6 bronze badges

these steps worked for me to downgrade Angular 5 to 4
– Suriya Rakhunathan
Commented Apr 10, 2018 at 5:44
@SuriyaRakhunathan I am glad it help you
– Nour Eddine
Commented May 2, 2018 at 0:20
Finally found the downgrade for @angular/cli, many thanks @BlaCkHoLe
– Ignacio Ara
Commented Jul 4, 2018 at 7:24

Add a comment |

rrz0 · Accepted Answer · 2017-09-19 15:33:38Z

1

The answers above are correct. However, if you have an open angular project, say on VS code you may need to take a few different steps.

Install Node.js® and npm if they are not already on your machine.
Then install the Angular CLI globally: npm install -g @angular/cli
Inside the VS code terminal run: npm install
(Inside the VS code terminal) serve the application: ng serve --open

edited Sep 19, 2017 at 15:33

answered Sep 19, 2017 at 15:20

rrz0

2,2626 gold badges32 silver badges66 bronze badges

Add a comment |

Sangwin Gawande · Accepted Answer · 2018-03-13 12:55:10Z

You should check your latest Angular CLI version :

ng -v

If you need to install/update your version just run

sudo npm install -g @angular/cli@latest

Then you can create project with comand

ng new Project_Name

There are few more options , just FYI

ng new Project_Name --style=scss

Now this will create new project named "Project_Name"

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

If you want to update any packages you can update by command

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

shades3002 · Accepted Answer · 2017-09-06 20:33:33Z

0

I do it as indicated by the official documentation of Angular

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

open your browser on http://localhost:4200/

answered Sep 6, 2017 at 20:33

shades3002

93110 silver badges12 bronze badges

oh look an angular 3 app... :(
– catbadger
Commented Dec 6, 2017 at 23:31

Add a comment |

Ala Messaoudi · Accepted Answer · 2018-03-14 09:54:28Z

In my case i updated the package.json i set the version of all the packages begin with @angular to 4.x.x except angular/cli ( i.e : @angular/animations": "4.x.x") which means import the latest version of the version 4 (which is 4.4.6).
then i executed npm install.
to verify the installed version execute : npm list --depth=0 | grep angular
this is a part of the updated package.json :

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

Shubham Verma · Accepted Answer · 2018-07-12 05:07:13Z

0

Step 1. Set up the Development Environment: Install Node.js and npm if they are not installed.

Step 2: Then install the Angular CLI globally.

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

Step 3: Create a new project

ng new my-app

Step 4: run the application:

cd my-app

ng serve --open

The above app will be in angular 4.

answered Jul 12, 2018 at 5:07

Shubham Verma

9,5817 gold badges62 silver badges83 bronze badges

Add a comment |

Collectives™ on Stack Overflow

Create Project with Angular 4 Release using Angular CLI

10 Answers 10

Not the answer you're looking for? Browse other questions tagged
angular
angular-cli
or ask your own question.

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

Not the answer you're looking for? Browse other questions tagged angularangular-cli or ask your own question.

Related

Not the answer you're looking for? Browse other questions tagged
angular
angular-cli
or ask your own question.