Day 13：来把静态档案加入 Angular CLI 建立的专案吧！

把静态档案加到 Angular 专案中

前一篇，我们已经学会用 Angular CLI 建立元件及范本，今天我们要试着把静态档案加到 Angular CLI 所建立的专案中。

首先，先准备好要加入专案的静态档案及资料夹：

• 1. api 资料夹：里面放了两个与资料有关的 JSON 档，之後的实作会用到，届时再说明。
     
• 2. assets 资料夹：里面放置了许多资料夹，包含许多静态档案，如：字型、图片、JavaScript 档等。
     
• 3. drama-blog.html：这是我们主要内容呈现的页面。

我们把上面所提到的档案及资料夹，复制到我们专案资料夹的 src 资料夹内。

此时，我们开启终端机面板，输入 npm start 指令，把开发服务器运行起来，并在网址输入 /drama-blog.html，会发现并没有反应！

原因是，当我们把静态档案复制到 src 资料夹之後，还有一个档案需要设定，那就是我们专案里面的 angular.json 档案。

打开 angular.json 档案，找到 build 底下的 assets 区块，如下图所示。

由於 src/assets 已存在，所以我们只需在这个区块贴上 src/drama-blog.html 及 src/api 这两个路径即可。

接着，我们在终端机面板使用键盘 ctrl+c 先停止服务器运行，再输入 npm start 指令把服务器重新运行起来。

接着在服务器首页网址处输入 /drama-blog.html，就可以看到画面显示出我们所加入的静态档案 drama-blog.html 的内容了。

接着我们试着将网址改成 /api/articles.json，同样可以看到我们刚才加入的 api 资料夹中的 articles.json 档案的资料内容。

至此，我们已经顺利将静态档案加入到 Angular CLI 建置的专案之中了！