Angular2 环境配置详细介绍

看到angular发布正式版，心动不已准备测试下。

看着官网教程，使用了cli创建项目，在命令行中键入：

安装cli

npm install -g angular-cli

如果安装过以前的版本，请执行以下命令，进行更新：

npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli@latest

旧版本的cli使用的是SystemJS而最新的创建，是基于webpack构建。

旧版本的angular2(rc1-rc6)可以查看更新步骤

在这里有意思的是，笔者卸载angular-cli后，在安装时出现了Build failed的错误最终找到原因是卸载没有卸载干净。去全局目录中删除相关的ng文件。

常用ng命令

ng new project-name - 创建一个新项目，置为默认设置
ng build - 构建/编译应用
ng test - 运行单元测试
ng e2e - 运行端到端（end-to-end）测试
ng serve - 启动一个小型web服务器，用于托管应用
ng deploy - 即开即用，部署到Github Pages或者Firebase
ng generate component my-comp - 生成一个新组件，同时生成其测试规格和相应的HTML/CSS文件
ng generate directive my-directive - 生成一个新指令
ng generate pipe my-pipe - 生成一个新管道
ng generate service my-service - 生成一个新服务
ng generate route my-route - 生成一个新路由
ng generate class my-class - 生成一个简易的模型类

创建项目

使用 ng new project-name 创建项目，创建完成后由于需要在下一些nodejs模块，耐心等待一段时间。

警告错误

在使用wing中，遇到一个问题，类一直被警告。 看提示需要设置 “experimentalDecorators”属性。 最终修改两处解决问题。

tsconfig.json 中添加 ：

"emitDecoratorMetadata": true,
    "experimentalDecorators": true,

setting.json 中添加：

"typescript.tsdk": "node_modules\\typescript\\lib"

以上就是对Angular2 的环境配置做的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • Angular2 NgModule 模块详解

    Angular2 NgModule 模块详解

    Angular的模块的目的是用来组织app的逻辑结构. 在ng中使用@NgModule修饰的class就被认为是一个ng module.NgModule可以管理模块内部的Components.Directives.Pipes,引入Service,并控制外部组件对内部成员的访问权限. angular2 具有了模块的概念,响应了后台程序的号召,高内聚 低耦合.模块就是用来进行封装,进行高内聚  低耦合的功能. 其实各人认为ng2 的模块和.net的工程类似,如果要使用模块中定义的功能,第一步就是必须

  • 深入理解Angular2 模板语法

    1. 说明 Angular2的模板用来显示组件外观,作为视图所用,用法和html语法基本一致,最简单的Angular2的模板就是一段html代码.Angular模板语法主要包括以下几个部分: l 直接绑定 l 插值表达 l 属性绑定 l 事件绑定 l 双向绑定 l 样式绑定 l 模板和 * l 局部变量 首先来看一个模板例子,如下所示: import { Component, OnInit } from '@angular/core'; @Component({ selector: 'ui-de

  • Angular2从搭建环境到开发步骤详解

    Angular2从搭建环境到开发步骤详解

    Angular-CLI 说到 cli 大家不陌生,每出一个框架都会有对应的 cli ,俗称脚手架.angular2 本身提供了起步项目 angular2-quickstart,我尝试了一下,发现不是很好用,其它的大部分扩展需要自行安装,之后看了一下 angular-cli 部署简单易用,还提供了快捷搭建项目的目录. 安装 首先,最好先升级 node 到 6.x 可以避免 node 版本过低带来的不必要的麻烦. npm install -g angular-cli 用法 ng --help 查看所

  • angular2使用简单介绍

    让我们从零开始,使用Typescript构建一个超级简单的 AngularJs 2应用. 先跑一个DEMO 运行这个 DEMO先来感受一下 AngularJS2 的应用. 下面是这个应用的文件结构 angular2-app |_ app | |_ app.component.ts | |_ main.ts |_ index.html |_ license.md 总结来说就是一个 index.html 文件和两个在 app 文件下的 Typescript 文件, 我们可以hold住! 下面我们将一

  • Angular2内置指令NgFor和NgIf详解

    Angular2内置指令NgFor和NgIf详解

    在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个可以运行起来的Angular2的样例程序,最好就是我们上一章节中完成的那个QuickStart小项目或者你自己根据官网上面的步骤完成的QuickStart小项目,因为我们的讲解都是在那个基础上来进行的;然后让我们开始下面的快乐旅程吧. 因为我们的这一系列的文章都是使用的TypeScript所以在看下面的内容之前你最好可以看一下TypeScript或者ES6的类,它们的网址分

  • Angular2中Bootstrap界面库ng-bootstrap详解

    Angular2中Bootstrap界面库ng-bootstrap详解

    准备 Angular 2 环境 ng-bootstrap 是基于 Angular 2 的, 因此需要先准备 Angular 2 的环境. 使用 ng-bootstrap 下载 ng-bootstrap ng-bootstrap 使用 bootstrap 4.0 alpha2 , 因此需要先下载 bootstrap , 推荐使用 npm 包的形式: npm install bootstrap@4.0.0-alpha.2 --save 接着下载 ng-bootstrap , 同样使用 npm 包的形

  • 详解Angular2中的编程对象Observable

    详解Angular2中的编程对象Observable

    前言 RxJs提供的核心是Observable对象,它是一个使用可观察数据序列实现组合异步和事件编程. 跟这个很类似的异步编程模型是Promise,Promise是基于状态变化的异步模型,一旦由等待状态进入成功或失败状态便不能再次修改,当状态变化时订阅者只能够拿到一个值:而Observable是基于序列的异步编程模型,随着序列的变化,订阅者可以持续不断的获取新的值.而且Promise只提供回话机制,并没有更多的操作来支持对结果的复杂处理,而Observable提供了多种多样的操作符,来处理运算结

  • Angular2入门--架构总览

    Angular2入门--架构总览

    大致介绍 在3月23日,Angular4正式发布(没有3).似乎现在学Angular2又晚了,又晚一步-_-||.Angular2在Angular1的基础上有了较大的改变.之前向一个同学(之前学过Angular1)问一个Angular2的问题,他反问到这是Angular代码? 可见Angular1->Angular2的变化有多大.先来看看Angular2的架构 核心模块 一个完整的Angular应用主要由六个重要部分组成:组件.模板.指令.服务.依赖注入和路由 他们之间的关系: 从图中可以看出:

  • 最棒的Angular2表格控件

    最棒的Angular2表格控件

    现在市面上有大量的JavaScript数据表格控件,包括开源的第三方的和自产自销的.可以说Wijmo的Flexgrid是目前适应Angular 2的最好的表格控件. Angular 2数据表格基本要求: 更小.更快.更熟悉. 为了使用Angular 2表格,首先你需要了解表格的基本要求.FlexGrid开始于1996年,当时使用C++为Visual Basic编写的控件.多年来,它不断进化并在多个平台得到完善,尤其是JavaScript平台.FlexGrid 因为Flex的理念而命名,控件应当包

  • Angular2表单自定义验证器的实现

    Angular2表单自定义验证器的实现

    本文主要给大家介绍如何判断验证器的结果.在这里,我们就来看看怎样实现一个自定义的验证器. 目标 我们要实现一个验证手机号的验证器,使用的实例还是基于之前的文章里面的实例,也就是用户信息输入的表单页面.我们在手机号的元素上添加一个验证手机号的验证器.然后,如果手机号验证失败,就显示一个错误,页面如下: 这部分教程的代码可以从github获取: git clone https://github.com/Mavlarn/angular2-forms-tutorial 如果要运行,进入项目目录,运行下面

随机推荐