{"id":29215307,"url":"https://github.com/shlomiassaf/ng-router-loader","last_synced_at":"2025-07-11T11:32:56.433Z","repository":{"id":65419364,"uuid":"77791199","full_name":"shlomiassaf/ng-router-loader","owner":"shlomiassaf","description":"Webpack loader for NgModule lazy loading using the angular router","archived":false,"fork":false,"pushed_at":"2017-10-20T09:43:58.000Z","size":178,"stargazers_count":46,"open_issues_count":9,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-26T01:43:44.657Z","etag":null,"topics":["router","typescript","webpack","webpack-loader"],"latest_commit_sha":null,"homepage":"","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/shlomiassaf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-01T18:28:50.000Z","updated_at":"2024-01-06T19:22:11.000Z","dependencies_parsed_at":"2023-01-22T18:15:28.004Z","dependency_job_id":null,"html_url":"https://github.com/shlomiassaf/ng-router-loader","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/shlomiassaf/ng-router-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shlomiassaf%2Fng-router-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shlomiassaf%2Fng-router-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shlomiassaf%2Fng-router-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shlomiassaf%2Fng-router-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shlomiassaf","download_url":"https://codeload.github.com/shlomiassaf/ng-router-loader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shlomiassaf%2Fng-router-loader/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261997067,"owners_count":23242232,"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":["router","typescript","webpack","webpack-loader"],"created_at":"2025-07-03T00:09:15.807Z","updated_at":"2025-07-03T00:09:16.528Z","avatar_url":"https://github.com/shlomiassaf.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\nWebpack loader for `NgModule` lazy loading using the angular router\n\n\n[![Build Status](https://travis-ci.org/shlomiassaf/ng-router-loader.svg?branch=master)](https://travis-ci.org/shlomiassaf/ng-router-loader)\n[![GitHub version](https://badge.fury.io/gh/shlomiassaf%2Fng-router-loader.svg)](https://badge.fury.io/gh/shlomiassaf%2Fng-router-loader)\n\n## Installation\n\n`npm install ng-router-loader --save-dev`\n\nOR\n\n`yarn add ng-router-loader --dev`\n\n# V 2.0.0 BREAKING CHANGES:\nVersion 2.0.0 introduce support for the [import()](https://github.com/tc39/proposal-dynamic-import) construct.  \n`import()` is [not yet implemented](https://github.com/Microsoft/TypeScript/issues/12364) in TypeScript. \nTypeScript does not ignore it but transpile it to something else which breaks the code.\n\nTo use the `import()` construct the loader must run **AFTER** the typescript transpilation process, \nthis is after the `awesome-typescript-loader` in the example below. \n\nRunning after TS also means all code generators now emit ES5 code.\n\n\u003e Webpack 1 users can't use `async-import` as it's not supported in version 1.  \nWebpack 2 users can use it as long as they are running on webpack \u003e 2.1.0 beta28\n\n## Webpack integration\n\nAdd the `ng-router-loader` to your typescript loaders chain\n\n### Webpack 1\n```\nloaders: [\n  {\n    test: /\\.ts$/,\n    loaders: [\n       'ng-router-loader',\n      'awesome-typescript-loader'\n    ]\n  }\n]\n```\n\n### Webpack 2\n```\nmodule: {\n  rules: [\n    {\n       test: /\\.ts$/,\n       use: [\n       {\n           loader: 'ng-router-loader' \n           options: {\n            /* ng-router-loader options */\n           }\n        } ,\n         'awesome-typescript-loader'          \n       ]\n    }\n  ]\n}\n```\n\n## Lazy Loading\nUse the `loadChildren` API with **any webpack resolvable** path to reference your lazy loaded angular module.\nUse `#` as a delimiter and write the `NgModule` class name.\n\n```ts\nimport { Routes } from '@angular/router';\n\nexport const ROUTES: Routes = [\n  { path: 'detail', loadChildren: () =\u003e '../my-ng-modules/details#DetailModule' },\n];\n```\n\n\u003e The delimiter is configurable.\n\n\u003e Query parameters (details#DetailModule?loader=sync) are added after the delimiter.  \n This behaviour might change, supporting both pre \u0026 after. \n\n## Synchronous Loading\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```ts\nimport { Routes } from '@angular/router';\n\nexport const ROUTES: Routes = [\n  { path: 'detail', loadChildren: () =\u003e '../my-ng-modules/details#DetailModule?loader=sync' },\n];\n```\n\u003e The Synchronous example uses a resource specific loader option, you can also set a global loader option.\n\n## Configuration \nPlease read [the documentation](https://shlomiassaf.github.io/ng-router-loader)\n \n# In detph \n## @angular/router\nThe `@angular/router` provides an API for deferred `NgModule` loading, this is a simple API that accepts a function that returns an `NgModule` class.\n\n**Project structure**\n```\n├── project-root/\n│   ├── app\n│   │   ├── app.routes.ts\n│   ├── my-ng-modules\n│   │   ├── details\n│   │   │   ├──index.ts\n│   │   │   ├──details.module.ts\n│   │   │   ├──details.component.ts\n```\n\n\u003e DetailModule is defined in `details.module.ts` and exported in `index.ts`\n\n**app.routes.ts**\n```ts\nimport { Routes } from '@angular/router';\nimport { DetailModule } from '../my-ng-modules/details';\n\nexport const ROUTES: Routes = [\n  { path: 'detail', loadChildren: () =\u003e DetailModule },\n];\n```\n\nThe `@angular/router` will not invoke the function until the path is active, this is the how lazy loading is done.\n \n## The loader\nThe example above works just fine but it includes a hard reference to the `DetailModule`. \nHaving a reference results in adding the file containing the module into the bundle.\n \nTo achieve lazy loading we need to write the code in a lazy loading code-style that webpack understand.\n\n`ng-router-loader` abstracts the complexity and provides an easy approach using a string reference.\nIn the background the loader will translate the string to code. \n\nThe string reference is the reference you use when you `require` or `import`.  \nAny string that resolves with `require` or `import` can be used and the same rules apply with 1 addition, the string reference requires must provide the name of the `NgModule` exported.\n\nUsing the same example above:\n\n**app.routes.ts**\n```ts\nimport { Routes } from '@angular/router';\n\nexport const ROUTES: Routes = [\n  { path: 'detail', loadChildren: () =\u003e '../my-ng-modules/details#DetailModule' },\n];\n```\n\n\u003e It's that easy!\n\n## A word about the `angular-router-loader`\nThe `angular-router-loader` (\"ARL\" from now) came out with angular final when AOT was still blurry and not enough information was out there.\nThis made it very limited in it's capabilities, while using it I reached some dead ends that **ARL** did'nt handle.\n  \nAnother issue I had is that **ARL** forced me to structure my app in a certain way which was not webpack oriented. A loader should be transparent to the developer.\n\nI started fixing things and quickly understood that a rewrite is required.\n\nHere are some of the key points:\n\n  - **Module resolution**  \n  **ARL** use the file system to resolve URIs, this makes it impossible to use the goodies webpack `resolve` provides, \n  such as **barrels**, **aliasing**, **custom module directories** and more, see [webpack resolve](https://webpack.js.org/configuration/resolve/).  \n  `ng-router-loader` uses webpack to resolve modules so everything webpack resolves will work.\n  \n  - **AOT re-exports**   \n  **ARL** can't handle re-exported `NgModule` symbols in AOT mode.  \n   The example above shows the `index.ts` file exporting the `DetailModule` defined in a different \n   file, this is a tricky scenario that requires symbol tracking and it will result in an unknown module import created by **ARL**\n   `ng-router-loader` performs a deep metadata search to extract the right import.\n   \n   - **Custom code generators**\n   `ng-router-loader` code generation is plugin based, you can provide a custom code generator that fits your use case.\n   \n   - **Typescript based**\n   \n## TODO\n  - Smart detection, use AST to detect ROUTE API.\n\n## Credits\n\n[angular-router-loader](https://github.com/brandonroberts/angular-router-loader)\nLearned a lot reading the code!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshlomiassaf%2Fng-router-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshlomiassaf%2Fng-router-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshlomiassaf%2Fng-router-loader/lists"}