将网路download的静态网页转型成Angular应用程式-58码农网

下载版型

确认网页是否能顺利执行，个人使用lite-server。

建立Angular专案。

进入专案的index.html，<head>内只留<base href="/">，其他可以删除。

将SB Admin 2的index.html <head>内容搬到专案的index.html <head> 内的<base href="/">后面。

将SB Admin 2的index.html <body>内容搬到专案的app.component.html <body>内。
有一点要注意，因为安全机制的关係(XSS攻击)，Angular不会在template执行JavaScript，所以要把<script>部分搬到专案的index.html <body>内的<app-root>之后。

SB Admin 2的index.html <body>有设定ID名称，表示应该有CSS或JS会吃到此ID，所以在专案的index.html也要做相同的设定。

将网页资源搬到专案的assets底下。

由于网页资源都在assets底下，所以要修改index.html内 css、js 以及app.component.html内 img的路径。只要在原路径加上assets/即可。

这时版型已大致完成，但图表却是空白。

原本应该要这样

按F12开启开发人员工具Network项目，重新整理网页，确认是否有档案未被载入(红字)，一切正常，切换到Console会发现问题。

原本预期会读取某个物件的length属性，但是却找不到该物件，就会产生这个错误讯息，往下看，问题是来自于chart-area-demo.js的第32行。copychart-area-demo.js:32，在VS Code，按CTRL+E，搜寻列输入

在第32行，new Chart建构式应该要接收到ctx，但却找不到，往31行反推回去，我们假设应该是找不到Id:myAreaChart这个DOM，才会导致ctx是null。

为确认假设是否正确，在SB Admin 2中的chart-area-demo.js:32，将Id改成其他名称，让它找不到。结果显示一样的错误，所以我们的假设应该是正确的。
回到index.html，看问题是怎么发生的。当浏览器载入<app-root>，Angular还未将template(app.component.html)渲染到网页上，此时还没有DOM，紧接着就执行载入的chart-area-demo.js，所以会找不到Id:myAreaChart DOM。

知道问题后，解决方式就是让chart-area-demo.js在template被载入后，才执行。
採取的方式，是将chart-area-demo.js整个搬到app.component的ngOnInit执行。
此时会发现一堆错误，先看Chart，在assets/vendor/chart.js/Chart.js 中可以发现，Chart是全域变数。

由于TypeScript是强型别的程式语言，无法辨识Chart，那要如何在app.component中存取全域变数呢？
可以在app.component中宣告一个全域变数Chart。

问题就解决了

接下来，我们来看变数s的错误讯息。

讯息表示，s是string型别，若将array型别指派给它，在TS是不允许的。
所以找到宣告s的地方(前几行)，将型别改为any，就可以了。

最后一个错误显示

错误说明很明显了，number_format需要4个引数，但只给1个。
找到宣告number_format的地方，将所有参数改为optional(选择性)，只要在参数后加问号(?)即可。

其中一个图表可以显示了。无需在index.html中，载入chart-area-demo.js，移除即可。
但错误还有一个(chart-pie-demo.js:7)，也是相同状况，找不到DOM，因此可以採取同样的步骤。

只是如此一来app.component的code就会变得又臭又长，解决方式就是将JS给独立出来。

选取要独立的JS，按CTRL+.，会出现一个超长选单，选取最下面选项。

将档案独立成一个function，命名为chartAreaDemo

点击灯泡，选取移至新档，function会完全独立于src底下。

重新整理后，会产生新的问题

从警告讯息(黄色)得知，export出来的Chart无法在app.component找到，照理说只要在chartAreaDemo.ts
宣告变数Chart即可，但待会要搬动的chart-pie-demo.js也有用到Chart，所以全域变数Chart势必得独立出来。
因此可以使用一个特别的方式，在src底下新增一个档案typings.d.ts，在里面宣告全域变数Chart，declare var Chart: any;，如此一来，所有的TS都能存取到Chart。
chartAreaDemo.ts也不需要再importChart了，所以第一行(import { Chart } from './app.component';)可以删掉。

此时，可以从Console看出，只剩一个问题了，先将chart-area-demo.js的内容搬到ngOnInit，没有错误发生，就按照刚刚的步骤(15)再做一次。在index.html汇入的chart-area-demo.js一併移除。
app.component变得乾净许多。