使用Angular CLI创建Angular 4版本的项目发布

Question

使用Angular CLI创建Angular 4版本的项目发布

22

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

ng new new_project

我已经安装了以下版本：

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

- Kelvin Muia

10个回答

17

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

- rjdkolb

这种方法对我很有效，只是我不得不使用版本v1.4.10（npm install -g @angular/cli@1.4.10）。我的同事在遇到此问题（https://github.com/angular/angular-cli/issues/9303）并应用了推荐的解决方案后，向我介绍了1.4.10版本。 - Eric Bowden

当我运行“ng new my-ng-project”时，遇到了与上面评论相同的错误。运行“npm remove -g @angular/cli”和“npm install -g @angular/cli@1.4.10”以使其正常工作。 - Ivan Monteiro

感谢 @EricBowden 和 Ivan。我已经更新了我的答案。 - rjdkolb

1

可能更容易执行 npx @angular/cli@1.4.10 new myangular4。 - Explosion Pills

3

在我的情况下，我已经安装了ng很长一段时间（大约4个月，但在Angular术语中是非常长的时间）。执行npm install -g @angular/cli并没有完成任务。

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

然后执行ng new myProject --mobile就可以获得大于4的Angular版本。

- KhoPhi

目前此应该可以工作。这个问题是在 Angular 4 发布之前提出的。谢谢。 - Kelvin Muia

3

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

- senthil

目前这个应该可以工作。这个问题是在 Angular 4 发布之前提出的。谢谢。 - Kelvin Muia

3

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

npm remove -g @angular/cli

npm install -g @angular/cli@1.4.10

ng new myNewAngular4App

- Nour Eddine

这些步骤对我来说有效，用于将Angular 5降级到4。 - Suriya Rakhunathan

@SuriyaRakhunathan 我很高兴它对你有帮助。 - Nour Eddine

终于找到了 @angular/cli 的降级版本，非常感谢 @BlaCkHoLe。 - Ignacio Ara

1

上述答案是正确的。但是，如果您有一个打开的Angular项目，比如在VS Code中，您可能需要采取一些不同的步骤。

如果您的计算机上没有安装Node.js®和npm，请先安装它们。
然后全局安装Angular CLI： npm install -g @angular/cli
在VS Code终端内运行：npm install
(在VS Code终端内)启动应用程序：ng serve --open

- rrz0

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

- Sangwin Gawande

0

我按照Angular官方文档中所示进行操作。

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

在浏览器中打开http://localhost:4200/

- shades3002

哦，看起来是一个 Angular 3 应用... :( - catbadger

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

以上应用程序将使用Angular 4。

- Shubham Verma

0

在我的情况下，我更新了package.json文件，将所有以@angular开头的包的版本设置为4.x.x，除了angular/cli（即：@angular/animations": "4.x.x"），这意味着导入版本4的最新版本（即4.4.6）。
然后我执行npm install命令。
要验证已安装的版本，请执行：npm list --depth=0 | grep angular
这是更新后的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

- Ala Messaoudi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- R. Richards · Accepted Answer

~~你无法使用CLI创建一个默认使用Angular 4的新Angular应用程序，至少目前还不行。CLI只支持Angular 2，目前为止。我想这很快会改变。~~

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

希望这能对您有所帮助。

更新：

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

ng new project_new --ng4

来自ng --help：

--ng4 (Boolean) (Default: false) 创建一个使用Angular 4的模板项目。

现在，这将设置@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项目。