{"id":17512155,"url":"https://github.com/KernelPanic92/ngx-fastboot","last_synced_at":"2025-03-05T17:32:18.317Z","repository":{"id":252362059,"uuid":"840218977","full_name":"KernelPanic92/ngx-fastboot","owner":"KernelPanic92","description":"ngx-fastboot is an Angular library designed to dynamically load configuration settings at runtime, optimizing application startup performance by offloading configurations to a separate compilation chunk.","archived":false,"fork":false,"pushed_at":"2025-02-28T18:13:27.000Z","size":1073,"stargazers_count":9,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T03:56:16.424Z","etag":null,"topics":["angular","boot","chunk","chunking","configuration","dynamic","fastboot","lazy","npm","performance","providers","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ngx-fastboot","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KernelPanic92.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-09T08:15:09.000Z","updated_at":"2025-02-26T09:53:25.000Z","dependencies_parsed_at":"2024-08-09T09:33:30.406Z","dependency_job_id":"d38bc5ae-c890-421a-9645-42a93d4e45b6","html_url":"https://github.com/KernelPanic92/ngx-fastboot","commit_stats":null,"previous_names":["kernelpanic92/ngx-fastboot"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KernelPanic92%2Fngx-fastboot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KernelPanic92%2Fngx-fastboot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KernelPanic92%2Fngx-fastboot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KernelPanic92%2Fngx-fastboot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KernelPanic92","download_url":"https://codeload.github.com/KernelPanic92/ngx-fastboot/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242070455,"owners_count":20067268,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","boot","chunk","chunking","configuration","dynamic","fastboot","lazy","npm","performance","providers","typescript"],"created_at":"2024-10-20T06:00:37.804Z","updated_at":"2025-03-05T17:32:18.306Z","avatar_url":"https://github.com/KernelPanic92.png","language":"TypeScript","readme":"# ngx-fastboot\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"ngx-fastboot.png\" alt=\"ngx-fastboot-logo\" width=\"200px\" height=\"200px\"/\u003e\n  \u003cbr/\u003e\n  \u003cem\u003e\u003cb\u003engx-fastboot\u003c/b\u003e is a dynamic configuration loader for Angular applications. It optimizes the startup performance by loading configurations in a separate chunk during compilation.\u003c/em\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\n\n[![bundlephobia](https://badgen.net/bundlephobia/minzip/ngx-fastboot)](https://bundlephobia.com/result?p=ngx-fastboot)\n[![Semantic Release](https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)\n[![Build Status](https://img.shields.io/github/actions/workflow/status/KernelPanic92/ngx-fastboot/release.yml?branch=main)](https://github.com/KernelPanic92/ngx-fastboot/actions)\n[![Coverage Status](https://coveralls.io/repos/github/KernelPanic92/ngx-fastboot/badge.svg?branch=main)](https://coveralls.io/github/KernelPanic92/ngx-fastboot?branch=main)\n[![Angular](https://img.shields.io/badge/angular-%23DD0031.svg?logo=angular\u0026logoColor=white)](https://angular.io/)\n[![Tsup](https://img.shields.io/badge/tsup-fast--transpiler-brightgreen)](https://github.com/egoist/tsup)\n\n## Why Use ngx-fastboot?\nModern web applications often require a multitude of providers, which can increase the initial bundle size and slow down application startup. Splitting code into multiple chunks helps mitigate these issues by:\n\n- **Reducing Initial Bundle Size:** By moving configuration-related code into separate chunks, the initial bundle size is minimized, leading to faster load times and improved performance.\n- **Improving Load Performance:** Smaller initial bundles load quicker, especially over slower network connections, enhancing the user experience.\n- **Mitigating Compilation Warnings:** Angular may generate warnings if the initial bundle size exceeds recommended limits. ngx-fastboot helps distribute the load, reducing the likelihood of these warnings.\n\n## Features\n\n- **Dynamic Configuration Loading**: Load and resolve Angular providers dynamically.\n- **Performance Optimization**: Improve application startup performance by offloading configuration to a separate chunk.\n- **Seamless Integration**: Easy integration with existing Angular projects.\n- **Support for Lazy Configurations**: Load Angular Providers lazily for better performance.\n\n## Installation\n\nwith npm:\n```bash\nnpm install ngx-fastboot\n```\n\nwith pnpm:\n```bash\npnpm add ngx-fastboot\n```\n\nwith yarn:\n```bash\nyarn add ngx-fastboot\n```\n\n## Usage\n\nTo use **ngx-fastboot**, import the `fastBootstrapApplication` function and call it as your Angular application's `bootstrapApplication` function.\n\n### Example\n\n#### Before\n\n`main.ts`\n```typescript\nimport { AppComponent } from './app.component';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport provideMyDefaultExportFeatures from './default-export-features.config';\nimport { provideMyOtherFeatures } from './my-other-features.config';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    MyProvider,\n    provideMyDefaultExportFeatures,\n    provideMyOtherFeatures,\n  ]\n}).then(appRef =\u003e {\n  console.log('App is bootstrapped');\n}).catch(error =\u003e {\n  console.error('Error bootstrapping the app', error);\n});\n```\n\n#### After\n\n`main.ts`\n```typescript\nimport { AppComponent } from './app.component';\nimport { fastBootstrapApplication } from 'ngx-fastboot';\n\nfastBootstrapApplication(AppComponent, {\n  providers: [\n    MyProvider,\n    () =\u003e import('./default-export-features.config'), // default export config\n    () =\u003e import('./my-other-features.config').then((m) =\u003e m.provideMyOtherFeatures),\n  ]\n}).then(appRef =\u003e {\n  console.log('App is bootstrapped');\n}).catch(error =\u003e {\n  console.error('Error bootstrapping the app', error);\n});\n```\n\n### Providers\n\n`ngx-fastboot` provides great flexibility in how providers are loaded. Each element of the `providers` field can be either a **single provider** or an **array of providers**, depending on the needs of your application.\n\nYou can specify these providers in three main ways:\n\n- **Static import**: The traditional method used during the application's bootstrap, where providers are imported and directly included at configuration time. This approach is simple but can increase the initial bundle size.\n\n- **Dynamic Named Import**: To reduce the bundle size, you can load providers dynamically using a named import. In this way, providers are only loaded when they are actually needed.\n\n- **Dynamic Default Import**: Similar to named import, but loads the provider or a group of providers using the default export of the module. This is useful when a module exports a single provider or an array of providers as a default value.\n\n#### Static Import\n\n`main.ts`\n```typescript\nimport { AppComponent } from './app.component';\nimport { MyProvider } from 'providers/my-provider';\nimport { OtherProvider } from 'providers/other-provider';\nimport { fastBootstrapApplication } from 'ngx-fastboot';\n\nfastBootstrapApplication(AppComponent, {\n  providers: [\n    MyProvider,\n    OtherProvider,\n  ]\n}).then(appRef =\u003e {\n  console.log('App is bootstrapped');\n}).catch(error =\u003e {\n  console.error('Error bootstrapping the app', error);\n});\n```\n\n#### Dynamic Named Import\n\n`providers/my-provider.ts`\n```typescript\nexport const MyProvider: Provider = ....;\n```\n\n`providers/other-provider.ts`\n```typescript\nexport const OtherProvider = [\n  provideHttpClient(),\n  ReactiveFormsModule,\n  provideZoneChangeDetection({ eventCoalescing: true }),\n] satisfies Array\u003cProvider | EnvironmentProviders\u003e;\n```\n\n`main.ts`\n```typescript\nimport { AppComponent } from './app.component';\nimport { fastBootstrapApplication } from 'ngx-fastboot';\n\nfastBootstrapApplication(AppComponent, {\n  providers: [\n    () =\u003e import('providers/my-provider').then((m) =\u003e m.MyProvider), // single\n    () =\u003e import('providers/other-provider').then((m) =\u003e m.OtherProvider), // array\n  ]\n}).then(appRef =\u003e {\n  console.log('App is bootstrapped');\n}).catch(error =\u003e {\n  console.error('Error bootstrapping the app', error);\n});\n```\n\n#### Dynamic Default Import\n`providers/my-provider.ts`\n```typescript\nconst MyProvider: Provider = ....;\nexport default MyProvider;\n```\n\n`providers/other-provider.ts`\n```typescript\nexport default [\n  provideHttpClient(),\n  ReactiveFormsModule,\n  provideZoneChangeDetection({ eventCoalescing: true }),\n] satisfies Array\u003cProvider | EnvironmentProviders\u003e;\n```\n\n`main.ts`\n```typescript\nimport { AppComponent } from './app.component';\nimport { fastBootstrapApplication } from 'ngx-fastboot';\n\nfastBootstrapApplication(AppComponent, {\n  providers: [\n    () =\u003e import('providers/my-provider'), // single\n    () =\u003e import('providers/other-provider'), // array\n  ]\n}).then(appRef =\u003e {\n  console.log('App is bootstrapped');\n}).catch(error =\u003e {\n  console.error('Error bootstrapping the app', error);\n});\n```\n\n#### Full example\n\n`main.ts`\n```typescript\nimport { AppComponent } from './app.component';\nimport { MyStaticImportedProvider } from './providers/my-static-imported-provider';\nimport { fastBootstrapApplication } from 'ngx-fastboot';\n\nfastBootstrapApplication(AppComponent, {\n  providers: [\n    MyStaticImportedProvider,\n    () =\u003e import('providers/my-provider').then((m) =\u003e m.MyProvider),\n    () =\u003e import('providers/other-provider'),\n  ]\n}).then(appRef =\u003e {\n  console.log('App is bootstrapped');\n}).catch(error =\u003e {\n  console.error('Error bootstrapping the app', error);\n});\n```\n\n### RootComponent\n\nSimilar to providers, you can manage the root component of the application both **statically** and **dynamically**. Dynamically loading the root component can help reduce the initial bundle size.\n\n#### Static Import\n\nThe classic method to bootstrap the root component involves a static import:\n\n```typescript\nfastBootstrapApplication(AppComponent, {\n  providers: [...]\n});\n```\n\n#### Dynamic Named Import\nTo optimize bundle size, the root component can be loaded dynamically with a named import:\n\n```typescript\nfastBootstrapApplication(\n  () =\u003e import('./app-component').then((m) =\u003e m.AppComponent), {\n  providers: [...]\n});\n```\n\n#### Dynamic Default Import\nAlternatively, you can use a dynamic default import if the root component is exported as the default from the module:\n\n```typescript\nfastBootstrapApplication(\n  () =\u003e import('./app-component'), {\n  providers: [...]\n});\n```\n\n### Sentry Integration Example\nThis example shows how to integrate Sentry with ngx-fastboot for error monitoring and performance tracing in your Angular application.\n\n`src/app/configs/sentry.config.ts`\n```typescript\nimport { APP_INITIALIZER, EnvironmentProviders, ErrorHandler, Provider } from '@angular/core';\nimport { Router } from '@angular/router';\nimport {\n  createErrorHandler,\n  init,\n  TraceService,\n} from '@sentry/angular-ivy';\n\nexport default [\n  {\n    provide: ErrorHandler,\n    useValue: createErrorHandler({\n      showDialog: false,\n      logErrors: true,\n    }),\n  },\n  {\n    provide: TraceService,\n    deps: [Router],\n  },\n  {\n    provide: APP_INITIALIZER,\n    useFactory: () =\u003e () =\u003e {},\n    deps: [TraceService],\n    multi: true,\n  },\n] satisfies Array\u003cProvider | EnvironmentProviders\u003e;\n```\n\n`src/app/configs/sentry.init.ts`\n```typescript\nimport {\n  browserTracingIntegration,\n  init,\n  replayIntegration,\n} from '@sentry/angular-ivy';\n\nexport function initSentryConfig() {\n  init({\n    dsn: '\u003cyour-dsn\u003e',\n    integrations: [browserTracingIntegration(), replayIntegration()],\n    ...etc\n  });\n  console.info('Sentry initialized.');\n}\n```\n\n`src/main.ts`\n```typescript\nimport { AppComponent } from './app.component';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fast } from 'ngx-fastboot';\n\nfastBootstrapApplication(AppComponent, {\n  providers: [\n    () =\u003e import('./app/configs/sentry.config'),\n  ],\n})\n  .then(() =\u003e import('./app/configs/sentry.init')\n  .then((init) =\u003e init.initSentryConfig()))\n  .catch(error =\u003e {\n    console.error('Error bootstrapping the app', error);\n  });\n\n```\n\n## API\n\n### `fastBootstrapApplication`\n\nDynamically loads the specified providers in the configuration and bootstraps an Angular application.\n\n#### Parameters\n\n- **`rootComponent`**: The root component of the application, which should be of type `FastComponent`.\n- **`options`**: (Optional) The application configuration, including the providers to be loaded. It should conform to the `FastApplicationConfig` type. Providers can be `Provider`, `EnvironmentProviders`, or lazy modules that return these providers.\n\n#### Returns\n\nA `Promise` that resolves to an `ApplicationRef` instance of the bootstrapped application. The bootstrap method is called with the root component and the updated configuration with the resolved providers.\n\n### `fast`\n\nDynamically loads the specified providers in the configuration and bootstraps an Angular application passing a custom bootstrap function.\n\n#### Parameters\n\n- **`bootstrap`**: The bootstrap function (typically `bootstrapApplication`).\n- **`rootComponent`**: The root component of the application, which should be of type `FastComponent`.\n- **`options`**: (Optional) The application configuration, including the providers to be loaded. It should conform to the `FastApplicationConfig` type. Providers can be `Provider`, `EnvironmentProviders`, or lazy modules that return these providers.\n\n#### Returns\n\nA `Promise` that resolves to an `ApplicationRef` instance of the bootstrapped application. The bootstrap method is called with the root component and the updated configuration with the resolved providers.\n\n## Types\n\n### `FastApplicationConfig`\n\n```typescript\nexport type FastApplicationConfig = ApplicationConfig \u0026 {\n  providers: Array\u003cFastProvider\u003e\n}\n```\n\n### `FastProvider`\n\n```typescript\nexport type FastProvider = Provider | EnvironmentProviders | LazyModule\u003cProvider | EnvironmentProviders | Array\u003cProvider | EnvironmentProviders\u003e\u003e;\n```\n\n### `LazyModule`\n\n```typescript\nexport type LazyModule\u003cT\u003e = () =\u003e Promise\u003cT | { default: T }\u003e;\n```\n\n### `AngularProvider`\n\n```typescript\nexport type AngularProvider = Provider | EnvironmentProviders;\n```\n\n### `FastComponent`\n\n```typescript\nexport type FastComponent = Type\u003cunknown\u003e | LazyComponent;\n```\n\n### `LazyComponent`\n\n```typescript\nexport type LazyComponent = LazyModule\u003cType\u003cunknown\u003e\u003e;\n```\n\n## Contributing\n\nWe welcome contributions! Please read our [Contributing Guide](CONTRIBUTING.md) to learn how you can help improve **ngx-fastboot**.\n\n## License\n\n**ngx-fastboot** is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.\n\n## Keywords\n\nangular, angular performance, dynamic configuration, lazy loading, angular bootstrap, ngx-fastboot\n\n## Contact\n\nFor any questions or feedback, please [open an issue](https://github.com/KernelPanic92/ngx-fastboot/issues).\n","funding_links":[],"categories":["Recently Updated","Third Party Components"],"sub_categories":["[Oct 19, 2024](/content/2024/10/19/README.md)","Loaders"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKernelPanic92%2Fngx-fastboot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKernelPanic92%2Fngx-fastboot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKernelPanic92%2Fngx-fastboot/lists"}