Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@navix
Last active January 18, 2019 11:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save navix/5a3c2ccb34aeafd6f00cd600085ef0ed to your computer and use it in GitHub Desktop.
Save navix/5a3c2ccb34aeafd6f00cd600085ef0ed to your computer and use it in GitHub Desktop.
Dynamic imports in Angular 7

Dynamic imports in Angular 7

Some big pieces of code you can load dynamically.

Update your tsconfig.json:

{
  ...
  "compilerOptions": {
    ...
    "module": "esnext",
  }
}

Use import() function:

...
export class AppComponent {
  async loadAndRun() {
    const file = await import('./big-fn');
    file.bigFn();
  }
}
big-fn.ts
export function bigFn() {
  ...
}

More info about dynamic imports in TypeScript: https://blog.mariusschulz.com/2018/01/14/typescript-2-4-dynamic-import-expressions

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment