22

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
Improve this question

10 Answers 10

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Finding out if what this link says is true twitter.com/ladyleet/status/841074080342134785
Twitter is blocked where I am at, and I couldn't be more pleased about it. :)
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.
I agree with you answer updating "package.json" Just what to find out if its possible with angularcli.
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
|
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"
  },
Improve this answer

4 Comments

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.
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.
Thanks @EricBowden and Ivan. I have updated my answer.
It may be even easier to do npx @angular/[email protected] new myangular4
3

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

Improve this answer

1 Comment

Currently this should work. This question was just before the Angular 4 release was done. Thanks.
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

Improve this answer

1 Comment

Currently this should work. This question was just before the Angular 4 release was done. Thanks. –
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

Improve this answer

3 Comments

these steps worked for me to downgrade Angular 5 to 4
@SuriyaRakhunathan I am glad it help you
Finally found the downgrade for @angular/cli, many thanks @BlaCkHoLe
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.

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

Comments

1

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

Improve this answer

Comments

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/

Improve this answer

1 Comment

oh look an angular 3 app... :(
0

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

  2. then i executed npm install.

  3. to verify the installed version execute : npm list --depth=0 | grep angular

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

Improve this answer

Comments

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.