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

使用Angular CLI快速搭建Angular工程（二）——iconfont集成与编译实践

在上一篇文章中，我们已经初步了解了如何使用Angular CLI搭建一个基础的Angular工程。今天，我们将深入如何在这个工程中集成iconfont以及如何进行编译优化。

一、集成iconfont

iconfont是阿里巴巴的icon项目，现在许多公司都在使用它。其CDN访问快速，使用方便。接下来我们学习如何将它集成到我们的Angular工程中。

你需要在iconfont上创建一个工程并选择你需要的图标。具体步骤已经超出本文的范围，有兴趣的读者可以自行学习。

创建好iconfont后，你会得到一个css文件，我们需要将它添加到我们的Angular工程中。将css文件添加到项目的styles目录下，然后在angular.json文件中添加对应的样式表路径。

二、安装@angular2-material/icon

除了iconfont，我们还可以安装@angular2-material/icon来使用官方的Material Design图标。使用npm进行安装：

```bash

npm install @angular2-material/icon

```

然后在app.module.ts中引入MaterialIconModule，并添加到imports数组中。

接下来，在homeponent.html中添加你选择的图标。启动应用后，你就可以看到选择的图标了。

三、编译与优化

Angular CLI已经帮我们写好了编译的配置。开发环境下，我们输入ng build即可编译项目。生产环境下，我们使用ng build --prod进行编译。

生产环境的编译结果会比开发环境更为优化，例如会将3M的代码压缩到1M，并给生成的文件加上MD5，避免浏览器缓存。但我们还应该继续进行代码优化，以提升项目的性能。

四、回顾我们的旅程

通过以上的步骤，我们已经完成了Angular CLI的基础搭建，并具备了以下能力：

1. 创建一个可用于开发、测试、生产的工程；

2. 具备路由能力，按需加载和代码分割；

3. 可以添加外部的css和js；

4. 集成angular2 material；

5. 添加自己的icon font；

6. 开发环境和生产环境的编译。

以上内容足以让我们开发一个简单工程。对于更复杂的内容，如集成其他组件、测试等，将在后续的文章中进行介绍。在实际生产中，我们还需要进一步深入研究angular和typescript的相关知识。我们也需要注意集成其他库和框架的方式和策略，如使用webpack等。我们会持续关注并分享的技术动态和最佳实践。请持续关注我们的更新，也希望大家多多支持我们的博客。感谢大家的阅读和支持！希望我们的文章能对大家的学习有所帮助。以上就是本文的全部内容，希望对大家有所帮助！也希望大家多多支持狼蚁SEO！