I have the following dynamic import code to import a js library at runtime:

export class AuthService {
    constructor() {
        import('.js').then(result => {
            console.log(result)
        })
    }
}

However when I try to build/serve the Angular project I get:

external ".js" - Error: The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script Did you mean to build a EcmaScript Module ('output.module: true')?

In addition, vs-code highlights the import with the following:

I tried adding "type": "module" in package.json and "module": "ESNext" in tsconfig.json, but with no luck.

How can I fix this?

I have the following dynamic import code to import a js library at runtime:

export class AuthService {
    constructor() {
        import('https://apis.google./js/platform.js').then(result => {
            console.log(result)
        })
    }
}

However when I try to build/serve the Angular project I get:

external "https://apis.google./js/platform.js" - Error: The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script Did you mean to build a EcmaScript Module ('output.module: true')?

In addition, vs-code highlights the import with the following:

I tried adding "type": "module" in package.json and "module": "ESNext" in tsconfig.json, but with no luck.

How can I fix this?

• javascript
• angular
• typescript
• webpack

1 Answer 1

Dynamic imports only works since ES2020. Please, check your tsconfig.json in order to know what version is your target.