tarsinzer/routerkit

🦩 strict typed angular routes

Hi 👋, I'm Max

An engineer with a passion for building user interfaces

routerkit's Issues

Does this support multi-outlet named outlet routing in Angular?

Title basically says it all. I've recently been exploring the full capabilities of angular's named router outlets and multi-outlet routing. It is some very powerful stuff, and can allow some very intriguing ways of solving certain authentication problems (i.e. sibling "named" outlets can be routed to, and thus route guarded), potentially solve problems with UI libraries that require certain elements to be placed in certain areas of the page, etc.

Using the Angular router more extensively is becoming more common in my work, and when I instruct and teach Angular architecture. Having support for that with strongly typed routes would be very intriguing.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Warning

These dependencies are deprecated:

Datasource	Name	Replacement PR?
npm	protractor
npm	tslint

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency jest-preset-angular to v12.2.6
• chore(deps): update dependency ts-node to v10.9.2
• chore(deps): update dependency yarn to v1.22.22
• fix(deps): update dependency picocolors to v1.0.1
• chore(deps): update dependency all-contributors-cli to v6.26.1
• fix(deps): update angular monorepo (@angular/animations, @angular/common, @angular/compiler, @angular/compiler-cli, @angular/core, @angular/forms, @angular/language-service, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router, zone.js)
• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/setup-node action to v4
• chore(deps): update angular-cli monorepo to v18 (major) (@angular-devkit/build-angular, @angular-devkit/core, @angular-devkit/schematics, @angular-devkit/schematics-cli, @angular/cli)
• chore(deps): update dependency @angular-builders/jest to v18
• chore(deps): update dependency @types/node to v20
• chore(deps): update dependency jest-preset-angular to v14
• chore(deps): update dependency ng-packagr to v18
• chore(deps): update dependency prettier to v3
• chore(deps): update dependency typescript to v5
• fix(deps): update angular monorepo to v18 (major) (@angular/animations, @angular/common, @angular/compiler, @angular/compiler-cli, @angular/core, @angular/forms, @angular/language-service, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router)
• fix(deps): update dependency ora to v8
• fix(deps): update dependency ts-morph to v23
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update angular-cli monorepo to v14.2.13 (@angular-devkit/build-angular, @angular-devkit/core, @angular-devkit/schematics, @angular-devkit/schematics-cli, @angular/cli)
• chore(deps): update dependency @angular-builders/jest to v14.1.0
• chore(deps): update dependency @types/node to v18.19.44
• chore(deps): update dependency prettier to v2.8.8
• chore(deps): update dependency snyk to v1.1292.2
• chore(deps): update dependency typescript to v4.9.5
• fix(deps): update dependency rxjs to v7.8.1
• fix(deps): update dependency tslib to v2.6.3
• chore(deps): update jest monorepo to v29 (major) (@types/jest, jest)
• fix(deps): update dependency ts-evaluator to v1
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/default.yaml

• actions/checkout v3
• actions/setup-node v3

npm

package.json

• @angular/animations 14.2.12
• @angular/common 14.2.12
• @angular/compiler 14.2.12
• @angular/core 14.2.12
• @angular/forms 14.2.12
• @angular/platform-browser 14.2.12
• @angular/platform-browser-dynamic 14.2.12
• @angular/router 14.2.12
• crosspath 2.0.0
• hammerjs 2.0.8
• routeshub 4.4.0
• rxjs 7.5.6
• ts-evaluator 0.2.0
• zone.js 0.12.0
• @angular-builders/jest 14.0.1
• @angular-devkit/build-angular 14.2.10
• @angular-devkit/core 14.2.10
• @angular-devkit/schematics 14.2.10
• @angular-devkit/schematics-cli 14.2.10
• @angular/cli 14.2.10
• @angular/compiler-cli 14.2.12
• @angular/language-service 14.2.12
• @types/jest 28.1.8
• @types/node 18.6.2
• all-contributors-cli 6.24.0
• codelyzer 6.0.2
• jest 28.1.3
• jest-preset-angular 12.2.3
• ng-packagr 14.2.2
• ora 5.4.1
• prettier 2.7.1
• protractor 7.0.0
• snyk 1.981.0
• ts-morph 16.0.0
• ts-node 10.9.1
• tsickle 0.46.3
• tslib 2.4.0
• tslint 6.1.3
• tslint-angular 3.0.3
• tslint-config-prettier 1.18.0
• typescript 4.7.4
• yarn 1.22.19

package/package.json

• crosspath 2.0.0
• ora 5.4.1
• picocolors 1.0.0
• ts-evaluator 0.2.0
• ts-morph 16.0.0
• tslib 2.4.0
• @angular/router ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0

---

• Check this box to trigger a request for Renovate to run again on this repository

Support for Nx monorepo setup

What is this feature?

When developing in a nx.dev monorepo setup the following setup is quite normal: An app has two (lazy loading) feature modules mounted:

• BooksModule mounted under books
• OrdersModule mounted under orders

In a loosely coupled way, both features contain components that point to components of the other feature. For example, books has a routerLink pointing to orders/new and orders/{orderId} has a routerLink which points to books/{bookId}.

One of the advantages of using nx.dev is that libraries (the feature modules) can be reused in multiple apps. Currently RouterKit supports generating routes based upon an Angular app, resulting in {ROOT}/{APP_NAME}.routes.d.ts. Referencing the routes created from app 'A' in a feature lib is actually putting the dependency the wrong way around. From the internal dependency graph which the nx.dev tooling creates for you, app 'A' is using the feature lib. With the (described below) new features RouterKit can (probably) be used in a nx-dev monorepo setup.

How the feature should work?

I think the following is needed so RouterKit can be used in a nx-dev monorepo setup:

• support for generating routing types for a lazy loaded feature lib (it currently does not support it, an error is thrown: Can't find file with relative path @my-solution/app/feature/feature.module.ts)
• configuration of the output path of the resulting routing types, as they probably should end up in a separate library so nx.dev tooling can determine the dependency graph properly

Is your feature request related to a problem?

Yes, it's described in issue #49.

Properly escape nested route parameters

Description of the problem

Nested route params cause the following issue:

import { TypedRoute } from '@routerkit/core';
export type TypedRoutes = {
    [company: string]: {
        :project: TypedRoute<[  //<-- syntax error here
            '/',
            string,
            string
        ]>;
    };
};

Steps To Reproduce

Add the following route and run ng g @routerkit/core:parse --project APP_NAME

const routes: Routes = [
  { path: ':company/:project', component: SomeComponent },
];

Versions:

• Angular: 14.2.9
• RouterKit: 0.10.0

Add support for standalone components and new `bootstrapApplication`

What is this feature?

In the future, it would be cool to add support for standalone components with their new bootstrapApplication function

FYI for the following code

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'home',
  },
  {
    path: 'home',
    component: TodosPageComponent,
  },
  {
    path: 'github',
    loadComponent: () =>
      import('./app/github-page.component').then((m) => m.GithubPageComponent),
  },
];

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)],
}).catch((err) => console.error(err));

right now it shows the error and gets stuck on Parsing routes... step

> ng g @routerkit/core:parse --project ng-query-demo
√  Project analyzed.
-  Parsing routes...

Can't find bootstrapModule expression in src/main.ts

/  Parsing routes...

Improving development experience: how to debug schematics

What is this feature?

This feature does not directly concern the users of the library, but its developers/contributors.

How the feature should work?

This feature aims to improve the development experience by providing an easy way to debug the library's schematics.

It can be achieved by creating a .vscode/launch.json file with the following content:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}/node_modules/@angular/cli/bin/ng",
      "args": [ 
        // # 1
        // "add", 
        // // "@routerkit/core"
        // "./dist/routerkit/",
        // "--skipInstall",

       // # 2
        "g",
        "@routerkit/core:parse",
        "--project",
        "example-app",
      ],
      "sourceMaps": true,
      "outFiles": [
        "${workspaceFolder}/dist/routerkit/**/*.js"
      ],
      "outputCapture": "std"
    }
  ]
}

# 1 and # 2 could have their own launch configuration eventually.

In order to create the dist/routerkit, we need to run both npm run build and npm run build:schematics, because, in this case, the parse schematic relies on a (built) project. The first build command will build the project the schematic will be tested on and the second build command will build the schematics(with source maps).

Then, we can go to parse/index.ts and place a breakpoint there to see the results.

On a side note, I noticed that, during debugging, the ora package throws the following error: cannot write after stream was close. I think it's because it uses by default the process.stderr stream by default:

const projectSpinner = ora(taskStart('Analyzing project')).start();

I got rid of the error by instantiating the spinner like this:

const projectSpinner = ora({ text: taskStart('Analyzing project'), stream: process.stdout }).start();

Is your feature request related to a problem?

No.

I think we could add the necessary steps in the CONTRIBUTING.md file. Also, it would be my pleasure to create a PR for this, if everything is alright.

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Parser didn't find all routes

Description of the problem

• Not parsed details routes

Steps To Reproduce

• Parse routerkit example app

Expected behavior

• Correctly parsed routes

How to use it properly

Imagine in my example repo that I were to:

• generate another feature, say 'feature-b' also with an overview, 'b-overview' mounted on the root route
• mount 'feature-b' in my app on path 'b'
• and I would generate the routes again using the schematic nx g @routerkit/core:parse --project app
• and I then want to point the user from 'a-overview' to 'b-overview' using a routerlink and the generated routes
• and then do the same the other way around, adding a routerlink on 'b-overview' pointing to 'a-overview' using the generated routes

I would then stumble upon two circular dependency issues, as the libs 'feature-a' and 'feature-b' cannot depend on the project 'app' so I cannot use the typings. Even if you would generate the typings for the feature libs and expose them from the lib itself, you would have a circular dependency between libs 'feature-a' and 'feature-b' as they need to reference the generated typings from each other. When not using the generated typings, this pictured scenario is perfectly possible because they are loosely coupled using some 'magic' strings. How will I still be able to use the typings in this setup (monorepo nx style)?

An unhandled exception occurred: NOT SUPPORTED: keyword "id", use "$id" for schema ID

Description of the problem

An unhandled exception while running ng add @routerkit/core in fresh @angular/[email protected] project.

Steps To Reproduce

npm i @angular/[email protected] -g
ng new ngcli1337 --minimal --routing true --inline-style --inline-template --skip-tests --style=css
cd ngcli1337
ng add @routerkit/core

Expected behavior

Should install library without error.

Screenshots

angular-errors.log:

[error] Error: NOT SUPPORTED: keyword "id", use "$id" for schema ID
    at Object.code (C:\Users\bendrikov\fun\ngcli1337\node_modules\ajv\dist\vocabularies\core\id.js:6:15)
    at keywordCode (C:\Users\bendrikov\fun\ngcli1337\node_modules\ajv\dist\compile\validate\index.js:454:13)
    at C:\Users\bendrikov\fun\ngcli1337\node_modules\ajv\dist\compile\validate\index.js:222:17
    at CodeGen.code (C:\Users\bendrikov\fun\ngcli1337\node_modules\ajv\dist\compile\codegen\index.js:439:13)
    at CodeGen.block (C:\Users\bendrikov\fun\ngcli1337\node_modules\ajv\dist\compile\codegen\index.js:568:18)
    at iterateKeywords (C:\Users\bendrikov\fun\ngcli1337\node_modules\ajv\dist\compile\validate\index.js:219:9)
    at groupKeywords (C:\Users\bendrikov\fun\ngcli1337\node_modules\ajv\dist\compile\validate\index.js:208:13)
    at C:\Users\bendrikov\fun\ngcli1337\node_modules\ajv\dist\compile\validate\index.js:192:13
    at CodeGen.code (C:\Users\bendrikov\fun\ngcli1337\node_modules\ajv\dist\compile\codegen\index.js:439:13)
    at CodeGen.block (C:\Users\bendrikov\fun\ngcli1337\node_modules\ajv\dist\compile\codegen\index.js:568:18)

Versions:

• OS: Windows 10
• Angular: 13.3.7
• RouterKit: 0.9.3

Add support for usage of typescript compiler 'paths' property

What is this feature?

In setups where the typescript compiler 'paths' property is used (i.e. when using nx), the parse schematic can't resolve the paths to lazy loaded modules.

How the feature should work?

It can retrieve the relative path(s) from the typescript compiler config.

Is your feature request related to a problem?

The 'error' of running ng g @routerkit/core:parse --project app is as following:

Can't find file with relative path @my-solution/app/feature/feature.module.ts

`Unhandled SyntaxKind: ImportClause` when used with [email protected]

Description of the problem

> ng g @routerkit/core:parse --project some-app
√  Project analyzed.
√  Routes parsed: {
    "ROOT": {}
}
DeprecationWarning: 'createIdentifier' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createImportSpecifier' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createNamedImports' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createImportClause' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createStringLiteral' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createImportDeclaration' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createModifier' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createLiteralTypeNode' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createTupleTypeNode' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createTypeReferenceNode' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createPropertySignature' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createTypeLiteralNode' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createTypeAliasDeclaration' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
Debug Failure. Unhandled SyntaxKind: ImportClause.
|  Generating type...

Steps To Reproduce

npm install [email protected]
ng g @routerkit/core:parse --project some-app

Versions:

• Angular: 14.2.9
• RouterKit: 0.10.0