Why simple javascript import is not working?

Here not working https://plnkr.co/edit/a7H1ilzkUA3918vc?open=lib%2Fscript.js&deferRun=1

But here in similar example – works, from which I am trying to do: https://plnkr.co/edit/XLSL581pjgwe3PI1?open=lib%2Fscript.js&deferRun=1

page1.js

export function myAlert() {
  alert("car");
}

JavaScript
​x
 
export function myAlert() {
  alert("car");
}
​

script.js

import { myAlert } from "./page1.js";

window.onload = myAlert;

JavaScript
 
import { myAlert } from "./page1.js";
​
window.onload = myAlert;
​

index.html:

<!DOCTYPE html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css" />
    <script src="lib/script.js"></script>
  </head>

  <!-- <body ng-app="plunker" ng-cloak>
    <div ng-controller="MainCtrl">
      <h1>Hello {{name}}</h1>
      <p>Start editing and see your changes reflected here!</p>
    </div>
  </body> -->
</html>

JavaScript
 
<!DOCTYPE html>
​
<html>
  <head>
    <link rel="stylesheet" href="lib/style.css" />
    <script src="lib/script.js"></script>
  </head>
​
  <!-- <body ng-app="plunker" ng-cloak>
    <div ng-controller="MainCtrl">
      <h1>Hello {{name}}</h1>
      <p>Start editing and see your changes reflected here!</p>
    </div>
  </body> -->
</html>
​

package.json

{
  "name": "@plnkr/starter-angularjs",
  "version": "1.0.1",
  "description": "AngularJS starter template",
  "dependencies": {
    "angular": "^1.6.9"
  },
  "plnkr": {
    "runtime": "system",
    "useHotReload": false
  }
}

JavaScript
 
{
  "name": "@plnkr/starter-angularjs",
  "version": "1.0.1",
  "description": "AngularJS starter template",
  "dependencies": {
    "angular": "^1.6.9"
  },
  "plnkr": {
    "runtime": "system",
    "useHotReload": false
  }
}
​

Alert message is not displayed.

Answer

By @Nick Parsons comment:

<script type="module" src="lib/script.js"></script>

JavaScript
 
<script type="module" src="lib/script.js"></script>
​

This works.

Advertisement

Answer