文档章节

Angular 4.x 环境搭建到项目编译发布,.angular-cli.json、tsconfig.json、package.json重要参数配置

JX2011
 JX2011
发布于 2017/09/05 09:26
字数 1095
阅读 335
收藏 20
点赞 1
评论 3

1.简介

        本文主要介绍如何快速搭建Angular运行环境,以及一些重要配置文件的配置,这些配置关系到项目的运行以及打包发布的正确编译。【ps:网上很多搭建环境的教程但是却并没有相关重要配置文件的配置,这样就很容出现通过ng serve 运行项目很容易,但正在开发以及发布就会遇到各种问题的情况】

2.原料

        要使用Angular,首选需要安装angular-cli,而安装angular-cli我们需要nodeJs以及npm;

        到node官网下载6.x以上的稳定版本,然后像正常安装程序一样一直下一步直到完成。

        安装完成后在命令行里输入 node -v以及npm -v,如果都能打印出来版本号那么基础环境就ok了。

        当然为了后面使用npm不会出现网络的问题,这个需要更改淘宝镜像,或者使用smart-npm帮我们职能处理这些事情。

  • smart-npm安装
npm install --global smart-npm --registry=https://registry.npm.taobao.org/

3.安装angular-cli

        node环境准备好了,之后就需要安装angular的脚手架了;

        这个地方有的小伙伴可能之前以及安装过angular-cli,此时我们应当先卸载之前的版本,并且清除缓存,然后再从新安装【ps:之前没安装过的小伙伴也可以先执行这些命令,就当熟悉一下】

  • 卸载angular-cli命令
smart-npm uninstall -g angular-cli
  • 清除缓存命令
smart-npm cache clean 
  • 安装angular-cli
samrt-npm install -g @angular/cli

安装完成后在命令行里执行  ng -v ,顺利打印出版本号。至此脚手架就安装完成了。

4.创建项目,并配置重要参数

有了angular-cli我们创建web项目就很容易了,首先在我们的D盘创建一个项目。

  • 定位到D盘
cd D:
D:
  • 利用angular-cli创建项目 myAngularPro
ng new myAngularPro

        注意这里命令行里会出现如下图情况,此时正在安装依赖包,直接ctrl+c取消就可以了,后面使用smart-npm来安装

  • 定位到我们项目目录
cd D:/myAngularPro
  • 安装依赖模块
smart-npm install
  • 依赖包安装完成后,直接就可以启动项目了
ng serve --open

        至此我们的项目就算运行起来了,接下来就是一些很重要的参数配置说明了;

        在创建完项目后,我们的项目文件myAngualrPro根目录下有一些.json的文件,这里只讲一些我们需要配置的json文件的参数;

  • .angular-cli.json文件

           这个文件需要配置的是“styles”,以及“scripts”这两个参数,从字面意思就很容理解这个样式和js代码的配置,它们的作用就是导入全局的样式和js代码,比如全局需要jQuery那么就需要在这里配置。

  • tsconfig.json文件

        这里只需要加一个参数allowJs,值为true,这个参数的作用就是允许我们在局部进入第三方的JS库如:import * as Swiper from './../assets/js/swiper/swiper.min.js';【ps:说道局部引入那么就涉及到了路由异步加载了,这个后面会出教程来讲解】

  • 静态资源文件(如图片)、package.json文件

        这里需要提醒一下我们的静态资源文件比如图片文件,需要放到D:/myAnauglarPro/src/assets目录中,不然页面会报404找不到图片的;

        当开发完项目之后就要执行ng build生成发布的文件了,此时执行ng build命令时后面一定要加上 --base-href ./ 否则编译后的index.html打开会报404找不到js资源文件的。也可以直接在package.json文件中的scripts里面配置。最后直接执行 smart-npm run build 就可以了。

        最后提醒一下,build后的项目文件虽然能顺利发布服务器上并且也能访问了,但是刷新页面后会出现404整个页面都找不到,这个也是因为url路径问题导致的,这时我们就需要修改main.module.ts文件,因为这篇文章没有涉及到如何写代码,所以这个后面会出一个代码入门教程来讲解。

© 著作权归作者所有

共有 人打赏支持
JX2011
粉丝 25
博文 15
码字总数 6915
作品 0
成都
加载中

评论(3)

JX2011
JX2011

引用来自“Feng_Yu”的评论

你这安装angular-cli的方法已经过时了,去看看官方文档吧,angular-cli的包名早就换了
感谢提醒,我是装的@angular/cli但是写文档手抖写成以前的了,已经更正
Feng_Yu
Feng_Yu
你这安装angular-cli的方法已经过时了,去看看官方文档吧,angular-cli的包名早就换了
张睿知
张睿知
安装node哪里可以选择跳过
Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh
05/05
0
0
Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区
05/08
0
0
Angular 6 服务端渲染之 udao 终章

先介绍下小朋友 udao,首先是一个开源项目,代码足够简单,其次是跟随 Angular 大小版本一起成长的项目,会定期更新所有依赖包以及兼容最新版本的写法 Github 地址也贴出来好多次了:github....

orangexc
05/10
0
0
Multi-Stage Build多阶段Build Docker镜像

我们在上一篇手记 中给大家介绍了如何完全使用Docker搭建Angular开发和测试环境,今天我们接着这个话题给大家看看如果通过Docker部署Angular项目。 我们先看看假如没有Docker,我们一般怎么去...

麦兜搞IT
05/29
0
0
Angular 5 快速入门与提高

一、概述 尽管被称为,实际上它只是这个诞生于2012年的前端框架的的第四个版本: 看起来差不多半年就发布一个新版本,不过实际上从重写的版本开始,开发接口与核心思想就稳定下来了,并基本保...

笔阁
2017/11/03
0
11
ngular2 VS Angular4 深度对比:特性、性能

在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。 Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。 对于成熟的开发人员...

机器的心脏
06/02
0
0
使用Yeoman快速构建基于angular的web应用

前言 最近在学习使用安哥拉(angular.js)编写web应用,看了一些网友实践了解到yeoman,这个工具实在太好用了,必须在这里介绍一下。 angular 首先简单介绍一下angular,它是由google开源的一套...

snakelxc
2013/08/25
0
0
使用Yeoman快速构建基于angular的web应用

前言 最近在学习使用安哥拉(angular.js)编写web应用,看了一些网友实践了解到yeoman,这个工具实在太好用了,必须在这里介绍一下。 angular 首先简单介绍一下angular,它是由google开源的一套...

kisops
2013/08/25
0
0
勿以 star 数论高低!React 在前端框架世界仍是领先地位

上周在前端的 JavaScript 框架世界发生了一件称得上是“里程碑”的事:Vue.js 在 GitHub 上的 star 数量终于超过了 React.js 的 star 数量。 通过使用一个叫做 Star History 的工具,我们可以...

局长
06/21
0
0
想开发Angular项目,但是没有开发环境?使用Docker So Easy!

不管是的开发还是学习Angular,环境是一个很大的问题,大家要在自己电脑上搭建一个Angular的开发测试环境还是非常麻烦的,请大家自行百度“搭建Angular开发环境”。OMG,要安装一堆东西。 但...

麦兜搞IT
05/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

CoreText进阶(七)-添加自定义View和对其

CoreText进阶(七)-添加自定义View和对其 其它文章: CoreText 入门(一)-文本绘制 CoreText入门(二)-绘制图片 CoreText进阶(三)-事件处理 CoreText进阶(四)-文字行数限制和显示更多...

aron1992
6分钟前
0
0
Python爬虫 爬取百合网的女人们和男人们

学Python也有段时间了,目前学到了Python的类。个人感觉Python的类不应称之为类,而应称之为数据类型,只是数据类型而已!只是数据类型而已!只是数据类型而已!重要的事情说三篇。 据书上说...

p柯西
18分钟前
0
0
在Java中,你真的会日期转换吗

1.什么是SimpleDateFormat 在java doc对SimpleDateFormat的解释如下: SimpleDateFormatis a concrete class for formatting and parsing dates in a locale-sensitive manner. It allows fo......

Java小铺
26分钟前
0
0
Linux系统梳理---系统搭建(二):tomcat的安装和使用

上一章讲到JDK的安装使用,这一章主要记录下服务器tomcat的安装以及部署一个项目. 1.下载tomcat,这里下载的是apache-tomcat-8.5.32.tar.gz 2.创建文件夹,便于管理,和JDK一样,在usr目录下创建t...

勤奋的蚂蚁
37分钟前
0
0
ES15-聚合

1.Terms Aggregation 分组聚合 2.Filter Aggregation 过滤聚合

贾峰uk
38分钟前
0
0
【2018.07.19学习笔记】【linux高级知识 20.27-20.30】

20.27 分发系统介绍 20.28 expect脚本远程登录 20.29 expect脚本远程执行命令 20.30 expect脚本传递参数

lgsxp
41分钟前
0
0
10.32/10.33 rsync通过服务同步~10.35 screen工具

通过服务的方式同步要编辑配置文件:[root@linux-xl ~]# vim /etc/rsyncd.confport=873log file=/var/log/rsync.logpid file=/var/run/rsyncd.pidaddress=192.168.43.21[tes...

洗香香
44分钟前
0
0
与女儿谈商业模式 (3):沃尔玛的成功模式

分类:与女儿谈商业模式 | 标签: 经济学 沃尔玛 陈志武 2007-05-10 09:09阅读(11279)评论(30) 与女儿谈商业模式 (3):沃尔玛的成功模式 陈志武 /文 沃尔玛(Wal-Mart)是另一个有意思的财...

祖冲之
51分钟前
0
0
网页加载速度优化方法总结

1、减少请求 最大的性能漏洞就是一个页面需要发起几十个网络请求来获取诸如样式表、脚本或者图片这样的资源,这个在相对低带宽和高延迟的移动设备连接上来说影响更严重。 2、整合资源 对开发...

Jack088
56分钟前
0
0
dubbo学习

https://blog.csdn.net/houshaolin/article/details/76408399

喵五郎
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部