AngularUseJavaScript

發表於： 2021-01-22 分類於：筆記

字數： 735 閱讀：≈ 2分鐘瀏覽：

Angular引入JavaScript

前言

在實務上我們可以在npm上面找到要用的 JavaScript 來引用 , 但有時可能會遇到以下狀況

mpm 找不到
需要匯入匯入自己寫的JavaScript

方法一

如果JavaScript 不複雜可以轉成 TypeScript

方法二引入第三方的JavaScript

第一步安裝下載JavaScript

準備一個 JavaScript

ex.

function Hello(){
	alert("Hello")
}

把js檔案放到 /assets目錄下

ex.

 /assets/Hello.js

第二步設定compilerOptions的allowJs屬性為true

開啟 tsconfig.json，找到compilerOptions ，並設定compilerOptions的allowJs屬性為true;，新增 “allowJs”: true,

ex. 新增 “allowJs”: true,

 /assets/js/Hello.js

第二步設定compilerOptions的allowJs屬性為true

開啟 tsconfig.json，找到compilerOptions ，並設定compilerOptions的allowJs屬性為true;，新增 “allowJs”: true,

ex. 新增 “allowJs”: true,

c4b992a9871c491fe1e8b2b832c0a5b358c4bdf6

 "compilerOptions": {
    .....................
    "allowJs": true,
	  .....................
  }

完整如下 tsconfig.json完整如下

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "allowJs": true,
    "importHelpers": true,
    "target": "es5",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableIvy": false
  }
}

第三步 : 引入javaScript

在 angular.json，scripts區塊配置js檔案路徑

"scripts": [
              "src/assets/js/Hello.js",
            ]

第四步，在當前元件.ts中使用函式新增js

在 index.html 引入

<script src="assets/js/Hello.js" type="text/javascript"></script>

index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Hello</title>
  <base href="/">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,IE=11">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="assets/js/Hello.js" type="text/javascript"></script>

</head>

<body class="mat-typography">
  <app-root></app-root>
</body>

</html>