Question 192844 in Javascript Question posted in
A very good W3school tutorial can be found here.

Angular 16, load a javascript module into index.html

Consider a simple "module" such as:

function doSomething() {
    alert("I am doing something");
}

export { doSomething };

Say it is in a file called doSomething.js (or doSomething.mjs if you prefer) and this file name has been entered in the script array in angular.json.

In the <head> section of index.html you have

<script type="module">
    import { doSomething } from "/doSomething.js"; // or /.mjs
    doSomething();
</script>

If doSomething.js were a plain javascript file, (with no export statement), all would be fine, but angular throws an error when encountering the export statement, so you can’t really use modules (like this), especially not if they are going to import additional modules. Using .mjs instead of .js makes no difference — angular wants plain js, not a module. What am I missing? How does one load a module here?

Tags:

2

Answers


  1. 0

    I get it to work this way:

    (1) Remove the module entry from angular.json;

    (2) Add doSomething.js to assets folder to make it available;

    (3) Include the module to index.html file within head tag

    <script type="module" src="/assets/doSomething.js">
</script>

<script type="module">
  import { doSomething } from "/doSomething.js";
  doSomething();
</script>

    Now the alert are shown and no error are thrown on console.

    ps.: Tested on Angular 15

    Login or Signup to reply.
  2. 0

    In an Angular application, importing and using ES modules directly in the index.html file is not supported. Angular uses its own build system and module loader to bundle and load JavaScript modules within the context of the Angular application.

    To use your doSomething.js module in an Angular application, you should follow the Angular module system and import the module within your Angular components or services instead of directly in the index.html file. Here’s how you can do it:

    1. Create a TypeScript module:

      • Create a new TypeScript module file, let’s say do-something.ts, in your Angular project.
      • Place your doSomething function inside this module file.
      • Export the doSomething function as part of the module.
      • Example: 
        export function doSomething() {
  alert("I am doing something");
}

    2. Import the module in a component or service:

      • Identify a component or service where you want to use the doSomething function.
      • Import the doSomething function from the do-something module file.
      • Example: 
        import { doSomething } from './do-something';

// Use the doSomething function in your component or service
doSomething();

    3. Use the component or service in your application:

      • Include the component in your Angular application’s template or use the service in your application logic.
      • Angular will handle the module resolution and bundling during the build process.

    By following this approach, your modules will be properly bundled and managed within the Angular application. The module system provided by Angular enables better code organization, dependency management, and allows you to take advantage of TypeScript features.

    It’s important to note that importing modules directly in the index.html file is not the recommended approach in Angular applications. The index.html file is mainly used as the entry point for the Angular application, and the module loading and code execution should happen within the Angular context using Angular components, services, and modules.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search