{"id":26120118,"url":"https://github.com/adrianhdezm/ngpathway","last_synced_at":"2026-05-17T15:37:52.067Z","repository":{"id":280738317,"uuid":"622242902","full_name":"adrianhdezm/ngpathway","owner":"adrianhdezm","description":"NgPathway is a file-based router utilities library for Angular applications.","archived":false,"fork":false,"pushed_at":"2023-04-17T10:33:24.000Z","size":499,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-05T04:02:06.148Z","etag":null,"topics":["angular","file-based-routing","router","routing","standalone-components"],"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/adrianhdezm.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-01T14:42:27.000Z","updated_at":"2023-04-13T22:27:46.000Z","dependencies_parsed_at":"2025-03-05T04:02:29.838Z","dependency_job_id":"770c72de-5384-4bc5-96bf-80bac1f29c80","html_url":"https://github.com/adrianhdezm/ngpathway","commit_stats":null,"previous_names":["adrianhdezm/ngpathway"],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrianhdezm%2Fngpathway","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrianhdezm%2Fngpathway/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrianhdezm%2Fngpathway/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrianhdezm%2Fngpathway/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adrianhdezm","download_url":"https://codeload.github.com/adrianhdezm/ngpathway/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242856022,"owners_count":20196359,"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","file-based-routing","router","routing","standalone-components"],"created_at":"2025-03-10T13:06:07.076Z","updated_at":"2025-10-08T11:01:25.769Z","avatar_url":"https://github.com/adrianhdezm.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NgPathway\n\n`NgPathway` is a file-based router utilities library for Angular applications. It simplifies the process of creating and managing routes in your Angular app by allowing you to organize your routes in a directory structure that mirrors your application's UI structure.\n\n## Features\n\n- File-based routing: `NgPathway` helps to use file-based routing to create clear and concise routes to your data, making it easy to navigate and manage large datasets.\n\n## Requisites\n\n- `NgPathway` requires Angular 15+. All tests were carried out using the standalone components approach.\n- You can use Nx Angular Standalone Project or Angular CLI with `@angular-builders/custom-webpack`.\n\n## Installation\n\nTo get started with `NgPathway`, simply install the library using NPM:\n\n```bash\nnpm install ngpathway --save\n```\n\nAfter the installation, a new folder called `.ngpathway` is created in the project's root directory. This folder initially contains two files: `routes.ts` and `types.d.ts`. Later, it will generate Angular routes inside a folder called `router`.\n\nNext, you need to register the `types.d.ts` and `router` folder in your `tsconfig.app.json`. For example:\n\n```json\n\"include\": [\n  \".ngpathway/types.d.ts\",\n  \".ngpathway/router/**/*.ts\"\n]\n```\n\nAfter this, you need to add the webpack configuration to your `angular.json` or `project.json` by replacing the `executor` in the `build` and `serve` sections. For example, in an Nx workspace, the configuration should be adapted as shown in the following code snippet:\n\n```json\n\"build\": {\n    \"executor\": \"@nrwl/angular:webpack-browser\",\n    \"options\": {\n        ... other options\n        \"customWebpackConfig\": {\n            \"path\": \"node_modules/ngpathway/lib/config/webpack.config.js\"\n        }\n},\n\n\"serve\": {\n    \"executor\": \"@nrwl/angular:webpack-dev-server\",\n}\n\n```\n\nTo avoid conflicting with different webpack versions is recommended you run: `npm dedupe`. For more information the explanation [here](https://stackoverflow.com/questions/76000975/nx-angular-project-build-failed-after-upgrading-to-webpack-5-79-0)\n\n## Usage\n\nTo use NgPathway, create a directory called `pages` inside your application sources (e.g., `src` directory). Include the content of this file in your `tsconfig.app.json`. For example:\n\n```json\n\"include\": [\n  \"src/pages/**/*.ts\"\n]\n```\n\n`NgPathway` maps the pages folder hierarchy to Angular routes. For example:\n\n`NgPathway` will map the `pages` folders hierarchy to angular routes. For example:\n\n- pages/ -\u003e /\n- pages/teams -\u003e /teams\n- pages/teams/[id] -\u003e /teams/:id\n\nInside each folder, you can create a Angular Component, the route providers, and matchers. `NgPathway` automatically generates the route structure for you in a file routes.ts inside the `.ngpathway` folder. Then, you can import this file in your `main.ts`. For example:\n\n```ts\nimport { routes } from '../.ngpathway/routes';\n\nbootstrapApplication(AppComponent, {\n  providers: [provideRouter(routes, withEnabledBlockingInitialNavigation())]\n}).catch((err) =\u003e console.error(err));\n```\n\nThen you are ready to continue creating new routes in the `pages` folder, and `NgPathway` will automatically generate the corresponding files.\n\n## Contributing\n\nIf you're interested in contributing to NgPathway, please feel free to submit a pull request or open an issue on GitHub. We welcome all contributions and feedback!\n\n## License\n\n`NgPathway` is licensed under the MIT license. See the LICENSE file for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadrianhdezm%2Fngpathway","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadrianhdezm%2Fngpathway","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadrianhdezm%2Fngpathway/lists"}