使用Angular CLI使用Angular 4 Release创建项目

时间：2017-03-16 10:33:51

标签： angular angular-cli

如何使用Angular CLI使用以下命令创建具有最新Angular 4版本的新项目：

  

ng new new_project

我安装了以下版本

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

10 个答案:

答案 0 :(得分：32)

使用开箱即用的Angular 4的CLI无法创建新的Angular应用程序。至少，现在不是。目前，CLI仅支持Angular 2。我想这会很快改变。

但是，您可以使用ng new <app-name>创建一个新应用程序，然后在package.json中更改它使用的Angular版本。运行npm install，它应该都可以运行。这是我的经历。

希望这可以帮助你。

<强>更新

我错了！有一个选项可以传递给ng new命令，该命令将设置项目以使用ng 4。

ng new project_new --ng4

来自ng --help：

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

现在，这将设置@angular部分package.json，如下所示。

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

试了一下，然后就可以了。

更新2

现在已删除--ng4选项，因为最新 CLI现在只使用ng new project_name创建一个Angular 5项目。

答案 1 :(得分：15)

最简单 使用Angular CLI创建Angular 4项目的方法是安装旧版本的@ angular / cli（1.4.10）

npx @angular/cli@1.4.10 new myangular4

（谢谢Explosion Pills）

或者

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

创建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"
  },

答案 2 :(得分：3)

更新angular-cli版本，然后尝试使用“ng new new_project”命令创建新的angular 4应用程序。

答案 3 :(得分：3)

在我的情况下，我已经安装了很久以前（约4个月，但很长时间以Angular术语表示）。做npm install -g @angular/cli没有做到这一点。

我必须npm install -g @angular/cli --upgrade来更新cli。

然后做ng new myProject --mobile让我得到了＆gt; 4 Angular

答案 4 :(得分：3)

要使用Angular CLI创建Angular_4项目，请遵循以下命令行：

  
    

npm remove -g @ angular / cli

         

npm install -g @ angular / cli @ 1.4.10

         

ng new myNewAngular4App

  

答案 5 :(得分：2)

以上答案是正确的。但是，如果你有一个开放的角度项目，比如VS代码，你可能需要采取一些不同的步骤。

  1. 安装Node.js® and npm（如果它们尚未在您的计算机上）。
  2. 然后全局安装Angular CLI： 的 npm install -g @angular/cli
  3. 在VS代码终端内部运行： npm install
  4. （在VS代码终端内）为应用程序提供服务： ng serve --open

答案 6 :(得分：1)

您应该检查最新的Angular CLI版本：

  

ng -v

如果您需要安装/更新您的版本，请运行

  

sudo npm install -g @ angular / cli @ latest

然后您可以使用命令创建项目

  

ng new Project_Name

还有更多选择，仅供参考

  

ng new Project_Name --style = scss

现在这将创建一个名为“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"
}

如果您想更新任何可以通过命令

更新的软件包
  

npm install @angular / {{package_name}} //例如npm install @ angular / core

答案 7 :(得分：0)

我按照官方documentation of Angular

的说明执行此操作 
npm install -g @angular/cli
ng new your-app
cd your-app
ng serve --open

在http://localhost:4200/

上打开您的浏览器

答案 8 :(得分：0)

  1. 在我的情况下，我更新了package.json我将所有包的版本设置为@angular到4.xx除了angular / cli（即：@ angular / animations＆＃34;：＆＃34; 4.x.x＆＃34;）表示导入版本4的最新版本（4.4.6）。

  2. 然后我执行了npm install。

  3. 验证安装的版本执行：npm list --depth = 0 | grep angular

  4. 这是更新的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" }

答案 9 :(得分：0)

第1步。设置开发环境：  如果尚未安装 Node.js 和 npm ，请安装它们。

步骤2：，然后全局安装 Angular CLI 。

npm install -g @angular/cli@1.4.*

步骤3：创建一个新项目

ng new my-app

步骤4：：运行应用程序：

cd my-app

ng serve --open

以上应用将以4号角显示。

相关问题
最新问题