tarsinzer / routerkit Goto Github PK
View Code? Open in Web Editor NEW๐ฆฉ strict typed angular routes
License: MIT License
๐ฆฉ strict typed angular routes
License: MIT License
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.
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 |
These updates are currently rate-limited. Click on a checkbox below to force their creation now.
@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
)@angular-devkit/build-angular
, @angular-devkit/core
, @angular-devkit/schematics
, @angular-devkit/schematics-cli
, @angular/cli
)@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
)These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
@angular-devkit/build-angular
, @angular-devkit/core
, @angular-devkit/schematics
, @angular-devkit/schematics-cli
, @angular/cli
)@types/jest
, jest
).github/workflows/default.yaml
actions/checkout v3
actions/setup-node v3
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
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.
I think the following is needed so RouterKit can be used in a nx-dev monorepo setup:
Can't find file with relative path @my-solution/app/feature/feature.module.ts
)Yes, it's described in issue #49.
Nested route params cause the following issue:
import { TypedRoute } from '@routerkit/core';
export type TypedRoutes = {
[company: string]: {
:project: TypedRoute<[ //<-- syntax error here
'/',
string,
string
]>;
};
};
Add the following route and run ng g @routerkit/core:parse --project APP_NAME
const routes: Routes = [
{ path: ':company/:project', component: SomeComponent },
];
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...
This feature does not directly concern the users of the library, but its developers/contributors.
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();
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.
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.
Imagine in my example repo that I were to:
nx g @routerkit/core:parse --project app
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 while running ng add @routerkit/core
in fresh @angular/[email protected]
project.
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
Should install library without error.
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)
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.
It can retrieve the relative path(s) from the typescript compiler config.
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
> 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...
npm install [email protected]
ng g @routerkit/core:parse --project some-app
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.