Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/benwinding/ngext

Better routing for Angular
https://github.com/benwinding/ngext

angular framework ngx routing server-side-rendering

Last synced: 12 days ago
JSON representation

Better routing for Angular

Host: GitHub
URL: https://github.com/benwinding/ngext
Owner: benwinding
License: mit
Created: 2020-10-22T09:58:38.000Z (about 4 years ago)
Default Branch: master
Last Pushed: 2022-04-30T04:50:15.000Z (over 2 years ago)
Last Synced: 2024-10-25T16:57:20.146Z (19 days ago)
Topics: angular, framework, ngx, routing, server-side-rendering
Language: TypeScript
Homepage: https://benwinding.github.io/ngext/
Size: 1.78 MB
Stars: 85
Watchers: 2
Forks: 5
Open Issues: 2
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        


  





A routing framework for angular inspired by React's next.js.





[![NPM Version](https://img.shields.io/npm/v/ngext.svg)](https://www.npmjs.com/package/ngext) 

[![License](https://img.shields.io/npm/l/ngext.svg)](https://github.com/benwinding/ngext/blob/master/LICENSE) 

[![Downloads/week](https://img.shields.io/npm/dm/ngext.svg)](https://www.npmjs.com/package/ngext) 

[![Github Issues](https://img.shields.io/github/issues/benwinding/ngext.svg)](https://github.com/benwinding/ngext)



## Introduction

Ngext is a tool which abstracts an angular application and drastically simplifies the routing. It has the following features: 

- File-based routing (no more routing modules!)

- All lazy loaded modules generation

- Dynamic configurations (no more static angular.json files)

- Declarative route layouts

- Server-side rendering, (HTML file for each page!)

- Compatible with all your existing angular files `@NgModules`, `@Components`, ...etc

## Links

- [Documentation](https://benwinding.github.io/ngext/)

## Get Started

**Install**

``` sh

npm i -g ngext

```

**Usage**

```

Usage: ngext [options] [command]

Options:

  -v, --version      output the version number

  -h, --help         display help for command

Commands:

  new [ProjectName]  Creates a new project

  build              Builds the ngext app

  export             Exports the ngext app with SSR

  dev                Runs the ngext app locally

  help [command]     display help for command

```

## Why use this?

Angular has many elegant abstractions, `@Component`, `@Module`, `@Injectable`. However, the routing in Angular is not a simple abstraction.

In order to add a new page, Angular routing requires that you edit 3 places; add a component file, declare component in a module, and add a route to a routing module.

![comparison](./docs/imgs/ngext-comparison.png)

This project attempts to encapsulate this into a single abstraction `@PageComponent`, which contains the component, dependencies and the route path which is generated from the page location. Making it easier than ever to add new pages to Angular apps.