{"id":13481666,"url":"https://github.com/brandonroberts/angular-router-loader","last_synced_at":"2025-04-04T16:17:22.349Z","repository":{"id":49546511,"uuid":"67906253","full_name":"brandonroberts/angular-router-loader","owner":"brandonroberts","description":" A Webpack loader that enables string-based module loading with the Angular Router","archived":false,"fork":false,"pushed_at":"2021-06-15T06:33:00.000Z","size":64,"stargazers_count":187,"open_issues_count":1,"forks_count":39,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-28T15:11:21.276Z","etag":null,"topics":["angular","router","webpack","webpack-loader"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brandonroberts.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-11T02:47:51.000Z","updated_at":"2024-09-07T03:43:58.000Z","dependencies_parsed_at":"2022-09-14T03:30:50.076Z","dependency_job_id":null,"html_url":"https://github.com/brandonroberts/angular-router-loader","commit_stats":null,"previous_names":["brandonroberts/angular2-router-loader"],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonroberts%2Fangular-router-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonroberts%2Fangular-router-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonroberts%2Fangular-router-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonroberts%2Fangular-router-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brandonroberts","download_url":"https://codeload.github.com/brandonroberts/angular-router-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247208190,"owners_count":20901570,"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","router","webpack","webpack-loader"],"created_at":"2024-07-31T17:00:53.934Z","updated_at":"2025-04-04T16:17:22.327Z","avatar_url":"https://github.com/brandonroberts.png","language":"JavaScript","readme":"# angular-router-loader\n\n[![CircleCI](https://circleci.com/gh/brandonroberts/angular-router-loader.svg?style=shield\u0026circle-token=a8a709588d22664ab74922050eda672898d2d417)](https://circleci.com/gh/brandonroberts/angular-router-loader)\n[![npm version](https://badge.fury.io/js/angular-router-loader.svg)](https://badge.fury.io/js/angular-router-loader)\n\nA Webpack loader for Angular that enables string-based module loading with the `Angular Router`\n\n*Package was previously named `angular2-router-loader`*\n\n## Installation\n\n  `npm install angular-router-loader --save-dev`\n\n## Usage\n\nAdd the `angular-router-loader` to your typescript loaders\n\n**Angular Version \u003e= 5**\n\n```ts\nloaders: [\n  {\n    test: /\\.ts$/,\n    loaders: [\n      'awesome-typescript-loader'\n    ]\n  },\n  {\n    test: /\\.(ts|js)$/,\n    loaders: [\n      'angular-router-loader'\n    ]\n  }  \n]\n```\n\n**Angular Version \u003c 5**\n\n```ts\nloaders: [\n  {\n    test: /\\.ts$/,\n    loaders: [\n      'awesome-typescript-loader',\n      'angular-router-loader'\n    ]\n  }  \n]\n```\n\n## Lazy Loading\n\nIn your route configuration, use `loadChildren` with a relative path to your lazy loaded angular module. The string is delimited with a `#` where the right side of split is the angular module class name.\n\n```ts\nimport { Routes } from '@angular/router';\n\nexport const routes: Routes = [\n  { path: 'lazy', loadChildren: './lazy.module#LazyModule' }\n];\n```\n\n**NOTE**: When specifying a relative path to lazy loaded module, one of the following two conditions *must* hold:\n\n* The routes are defined in the same module file where it is imported with `RouterModule.forRoot` or `RouterModule.forChild`\n* The routes are defined in a separate routing file, and that routing file is a sibling of module file.\n\n## Synchronous Loading\n\nFor synchronous module loading, add the `sync=true` as a query string value to your `loadChildren` string. The module will be included in your bundle and not lazy-loaded.\n\n```ts\nimport { Routes } from '@angular/router';\n\nexport const routes: Routes = [\n  { path: 'lazy', loadChildren: './lazy.module#LazyModule?sync=true' }\n];\n```\n\n## Additional Documentation\n\n* [Loader Options](./docs/options.md#general-loader-options)\n* [AoT Compilation Options](./docs/options.md#loader-options-aot-compilation)\n* [Lazy Loading Options](./docs/options.md#lazy-loading-options)\n\n\n## Credits\n\nThis loader was inspired by the following projects.\n\n[es6-promise-loader](https://github.com/gdi2290/es6-promise-loader) by [PatrickJS](https://twitter.com/@gdi2290)\n\n[angular2-template-loader](https://github.com/TheLarkInn/angular2-template-loader) by [Sean Larkin](https://twitter.com/@TheLarkInn)\n\n### License\n\nMIT (http://www.opensource.org/licenses/mit-license.php)\n","funding_links":[],"categories":["JavaScript","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)","Uncategorized"],"sub_categories":["Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e","Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrandonroberts%2Fangular-router-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrandonroberts%2Fangular-router-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrandonroberts%2Fangular-router-loader/lists"}