Angular2安装angular-cli

最近在学习angular2，并尝试用这个框架来做公司的一个新项目。

终于要开始开发了，等了1个多月。

因为第一次用这个新框架做项目，不太熟悉，就找了angular-cli这个脚手架来搭建项目。

安装了好多次，看了好多博文，终于成功了。

依据本宝宝帮多位小伙伴安装成功的经验，现总结安装angular-cli过程如下：

1、设置淘宝镜像，在 .npmrc文件（该文件在C盘>用户（或user）>你的电脑名字下就可找到）加入下面一句：

 registry = https://registry.npm.taobao.org

如果之前已经改过，可以跳过；也可以用命令行临时设置；总之你开心就好~

2、用npm安装typescript和typings，因为据说angular-cli是用typescript写的，所以要先装这两个：

npm install -g typescript typings

3、安装angular-cli:

npm install -g angular-cli@latest

如果你之前安装失败过，最好在安装angular-cli之前先卸载干净，用以下两句：

npm uninstall -g angular-cli
npm cache clean

在检查你全局的那些npm文件下还残留下图这两个文件，有的话也要删掉，删掉后再用"npm install -g angular-cli@latest"安装最新的angular-cli即可。

安装完毕后，试下ng -v 和ng --help，有显示正确内容就成功了。

接下来，就可以用以下命令创建并运行项目：

ng new ProjectName //ProjectName为你的项目名

cd ProjectName

ng serve // 启动项目

接下来在浏览器输入http://localhost:4200/就可以看见项目了。

然而，这只是开端，接下来才开始正式和angular2交锋！！！

忘了说angular-cli虽然简单方便，帮你搭建好所需环境，但简单方便的对立面是不灵活，多了很多我们可能不想用的包、文件，所以有能力搭建项目的，还是自己搭建吧，过~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Angular CLI 安装和使用教程

    Angular CLI 安装和使用教程

    背景介绍 关于Angular版本,Angular官方已经统一命名Angular 1.x同一为Angular JS:Angular 2.x及以上统称Angular: CLI是Command Line Interface的简写,是一种命令行接口,实现自动化开发流程,比如:ionic cli.vue cli等:它可以创建项目.添加文件以及执行一大堆开发任务,比如测试.打包和发布. 安装Angular CLI 1.首先确认安装了node.js和npm // 显示当前node和npm版本 $ node -

  • Angular2使用Angular CLI快速搭建工程（一）

    Angular2使用Angular CLI快速搭建工程（一）

    前言: 本文适合Angular2的初学者阅读: 时下web前端发展迅猛,新框架层出不穷,大家都知道三驾马车VueJS,Angular2,React.国内VueJS非常热门,百度热点趋势以1000%的涨幅在增加.Angular2在国外非常受欢迎,在国内的粉丝还非常少,文章不多,究其原因有这么几点主要是学习曲线陡峭,上手困难,(1)angular本身概念难懂,(2)使用typescript开发,用到很多es6特性:(3)配置太多,复杂,工程架构搭建上手难度大.本文为了解决项目搭建的问题,详细的一步步

  • Angular2关于@angular/cli默认端口号配置的问题

    Angular2关于@angular/cli默认端口号配置的问题

    前言 最近研究Angular2的@Angular/cli,有改端口号的需求. 方法一 1.定位到:..\node_modules\._@angular_cli@1.0.1@@angular\cli\lib\config 2.打开schema.json 3.直接看图,修改即可. 方法二 cmd定位到项目目录,命令:ng serve --port 端口号 总结 有需求就会有方法,没有走不通的路. 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • Angular4学习之Angular CLI的安装与使用教程

    Angular4学习之Angular CLI的安装与使用教程

    简介 关于"Angular"版本,"Angular"官方已经统一命名Angular 1.x同一为Angular JS,Angular 2.x及以上统称"Angular". "CLI"是"Command Line Interface"的简写,是一种命令行接口,实现自动化开发流程. 比如:ionic-cli.vue-cli等:它可以创建项目.添加文件(组件,服务等)以及执行一大堆开发任务,比如测试.打包和发布

  • 如何利用@angular/cli V6.0直接开发PWA应用详解

    如何利用@angular/cli V6.0直接开发PWA应用详解

    什么是PWA PWA(Progressive Web App)利用TLS,webapp manifests和service workers使应用程序能够安装并离线使用. 换句话说,PWA就像手机上的原生应用程序,但它是使用诸如HTML5,JavaScript和CSS3之类的网络技术构建的. 如果构建正确,PWA与原生应用程序无法区分. PWA 的主要特点包括下面三点: 可靠 - 即使在不稳定的网络环境下,也能瞬间加载并展现 体验 - 快速响应,并且有平滑的动画响应用户的操作 粘性 - 像设备上的

  • 详解Angular CLI + Electron 开发环境搭建

    本文介绍了Angular CLI + Electron 开发环境搭建,分享给大家 用 @angular/cli 配合 Electron 构建桌面软件开发环境,可以在 Electron 中使用 Angular 的各种特性,使开发桌面软件像开发网站一样简单.快捷,而且可以模块化,紧跟最新技术趋势. 安装 Angular CLI 和 Electron 首先使用 npm 安装 Angular Cli: $ npm i -g @angular/cli 然后安装 Electron $ npm i -g el

  • 使用Angular CLI生成 Angular 5项目教程详解

    如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网:https://github.com/angular/angular-cli 安装angular cli: npm install -g @angular/cli 不过首先要确保您安装了比较新版本的nodejs. 今天主要通过以下几个方面介绍Angular CLI: 生成项目 参数介绍 配置和自定义CLI 检查和修复代码 生成新项目: ng new my-app 这个命

  • 使用Angular CLI快速创建Angular项目的一些基本概念和写法小结

    Angular CLI是一个命令行界面工具,它可以创建项目.添加文件以及执行一大堆开发任务,比如测试.打包和发布,这里的快速开始就是基于这个命令. 开始项目前,你需要先安装node和npm,然后执行npm install -g @angular/cli安装Angular CLI. 一:用命令行新建一个项目 ng new newApp --skip-install cd newApp cnpm install ng serve --open 执行上面的命令就会自动新建一个Angualr项目,并启动

  • Angular CLI 使用教程指南参考小结

    安装 要安装Angular CLI你需要先安装node和npm,然后运行以下命令来安装最新的Angular CLI: 注意:Angular CLI 需要Node 4.X 和 NPM 3.X 以上的版本支持. npm install -g angular-cli 在 Mac 或 Linux 平台上,你可能需要添加sudo前缀提权进行全局安装: sudo npm install -g angular-cli 基本用法 你可以通过 Angular CLI 的 help 命令来获取相关的命令信息. ng

  • 详解Angular cli配置过程记录

    详解Angular cli配置过程记录

    1.首先调出命令行工具,运行命令全局安装Angular -cli npm i -g @angular/cli 安装过程中我的命令行工具内出现了警告和报错信息,我没有管它,因为我在后续使用中并没有遇到什么麻烦. 安装完成后可通过命令行ng v查看安装的版本信息,我的是这样的 _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | /

随机推荐