CODEWITHSUNDEEP
javascripthtmlgoogle-chromeweb
Jaison Joseph
Jaison Joseph

Reputation: 133

Browser not loading my java-script file from html page

I am newbie in we designing , i downloaded a website from github with full source code , when i open my index.html it is not loading the .js file inside in it .please help me, i just opened the index.html file using chrome and Firefox

<!doctype html>
        <html lang="en">
         <head>
          <meta charset="utf-8">
          <base href="/">
         <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

      <title>SHOP</title>
      <meta name="description" content="Polymer Shop Demo">

      <link rel="shortcut icon" sizes="32x32" href="images/shop-icon-32.png">
      <meta name="twitter:card" content="summary">
      <meta name="twitter:site" content="@Polymer">
      <meta property="og:type" content="website">
      <meta property="og:site_name" content="SHOP">
      <meta name="theme-color" content="#fff">
      <link rel="manifest" href="manifest.json">

      <style>

        body {
          margin: 0;
          font-family: 'Roboto', 'Noto', sans-serif;
          font-size: 13px;
          line-height: 1.5;
          min-height: 100vh;
        }

        /* styling for render while resources are loading */
        shop-app[unresolved] {
          display: block;
          min-height: 101vh;
          line-height: 68px;
          text-align: center;
          font-size: 16px;
          font-weight: 600;
          letter-spacing: 0.3em;
          color: #202020;
          padding: 0 16px;
          overflow: visible;
        }

      </style>

    </head>
    <body>

      <shop-app unresolved>SHOP</shop-app>

      <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
      <script type="module" src="src/shop-app.js"></script>

      <script>
        window.performance && performance.mark && performance.mark('index.html');
      </script>

    </body>
    </html>

Upvotes: 0

Views: 213

Answers (2)

Sci Ranch
Sci Ranch

Reputation: 115

It looks as though you need the webcomponents-loader.js file. If you did not make this with node.js (you can learn it here), you will need to find that file yourself, or install node.js.

The following instructions will not help you learn how this works. I would HIGHLY recommend you watch the video link above to learn about node.js before you follow these instructions.

If you have a folder on your computer with the HTML and JS files (and node.js on your computer) you can open a terminal on your computer, navigate to that folder in the terminal (cd folder_name etc...), and run npm init or sudo npm init, whichever works.

Then to get a hold of that file, you will need to run npm i webcomponents.js to install webcomponents.js. Then if you open the folder with the HTML and JS files in a code editor, you should be able to see a folder called node_modules.

In that folder you can find webcomponentsjs and under that, there is webcomponents-loader.js. You can copy that file and paste it where the main JavaScript file is. Then change the script code to <script src="src/webcomponents-loader.js"></script>

Upvotes: 1

Smollet777
Smollet777

Reputation: 1646

<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

This part says that you need to install the node.js & npm and run it. I recomend you to search what "npm" is.

Upvotes: 0

Related Questions