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

【问题标题】：Create Project with Angular 4 Release using Angular CLI使用 Angular CLI 使用 Angular 4 Release 创建项目
【发布时间】：2017-08-07 11:26:36
【问题描述】：

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

新的新项目

我安装了以下版本

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

【问题讨论】：

标签： angular angular-cli

【解决方案1】：

~~您不能使用开箱即用的使用 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 项目。

【讨论】：

看看这个链接说的是不是真的twitter.com/ladyleet/status/841074080342134785
Twitter 在我所在的地方被屏蔽了，我对此非常高兴。 :)
在 #Angular4 下，我引用“你用 angularcli 生成一个新的 Angular 应用程序，它给你一个#angular4 应用程序。不再更新 package.json”看看我能不能得到任何东西。
我同意你的回答更新“package.json”如果它可能用 angularcli 找出什么。
感谢您的回复。我实际上已经这样做了，并获得了 4.0 beta 版本。最新版本是 4.0.0-rc.3 并且您的答案仍然是正确的。只是认为当前的 CLI 默认会选择它，即最新版本是 4.0.0-rc.3

【解决方案2】：

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

【讨论】：

目前这应该可行。这个问题就在 Angular 4 发布之前。谢谢。

【解决方案3】：

就我而言，我很久以前就安装了 ng（大约 4 个月，但在 Angular 术语中是非常长的时间）。做一个npm install -g @angular/cli 没有做这项工作。

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

然后做ng new myProject --mobile 让我得到>4 Angular

【讨论】：

目前这应该可行。这个问题就在 Angular 4 发布之前。谢谢。 ——

【解决方案4】：

我按照官方documentation of Angular的指示去做

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

在http://localhost:4200/上打开您的浏览器

【讨论】：

哦，看看 Angular 3 应用程序... :(

【解决方案5】：

上面的答案是正确的。但是，如果您有一个开放的 Angular 项目，比如说在 VS 代码上，您可能需要采取一些不同的步骤。

如果您的计算机上没有 Node.js® and npm，请安装它们。
然后全局安装 Angular CLI： npm install -g @angular/cli
在 VS 代码终端内运行：npm install
（在 VS 代码终端内）服务应用程序：ng serve --open

【讨论】：

【解决方案6】：

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

ng -v

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

sudo npm install -g @angular/cli@latest

然后你可以用命令创建项目

新项目名称

还有几个选项，仅供参考

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】：

使用 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"
  },

【讨论】：

这种方法对我有用，除了我必须使用 v1.4.10 版本（npm install -g @angular/cli@1.4.10）。一位同事在遇到此处描述的问题 (github.com/angular/angular-cli/issues/9303) 并应用了推荐的解决方案后，将我引导至 1.4.10 版本。
我在运行“ng new my-ng-project”时遇到了与上述评论相同的错误。运行“npm remove -g @angular/cli”和“npm install -g @angular/cli@1.4.10”以使其正常工作。
感谢@EricBowden 和 Ivan。我已经更新了我的答案。
可能更容易做到npx @angular/cli@1.4.10 new myangular4

【解决方案8】：

然后我执行了 npm install。
验证安装的版本执行：npm list --depth=0 | grep 角度
这是更新后的 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】：

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

npm 删除 -g @angular/cli

npm install -g @angular/cli@1.4.10

新的 myNewAngular4App

【讨论】：

这些步骤帮助我将 Angular 5 降级到 4
@SuriyaRakhunathan 很高兴它对你有所帮助
终于找到了@angular/cli 的降级，非常感谢@BlaCkHoLe

【解决方案10】：

第 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。

【讨论】：