https://github.com/benwinding/ngext

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

angular framework ngx routing server-side-rendering

Last synced: 4 months 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 (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-04-30T04:50:15.000Z (almost 3 years ago)
• Last Synced: 2024-10-25T16:57:20.146Z (4 months 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.