Comments (11)
one main package.json where all dependencies live in
Ah, I see. That doesn't seem desirable for ui-router project since it targets very different frameworks with different toolchains.
from angular.
There was a section on NX concerning using Nx along with Lerna:
https://nx.dev/l/a/guides/lerna-and-nx
Looks like you can have separate package.json for different projects.
I've been looking at using Nx for consolidating a lot of my own cross-project code into a single repo. Haven't use either Nx or Lerna it yet so can't comment past the above link. I plan on using it soon and hopefully can come back around and help here.
from angular.
i marked all repos i am unsure if it is a good idea to add them to a monorepo with ?
input welcome.
also, as angular projects use it quite often, i am in favor of nx workspace over lerna, also it unifies the dependencies and simplifies the architecture a bit. however, unified dependencies can get in your way, depending on the project structure.
from angular.
Thank you, this is a good summary to start from.
- All the repos should be moved to the monorepo
- I have experience with lerna, but have only experimented with nx workspaces a little bit. Can you explain what is meant by unified dependencies w.r.t. nx?
I'll also add a couple of things that need consideration:
- CI/Test suites
- test all affected projects on each PR
- properly run "downstream tests"
- Releases (IMO ReleasePlease is a pretty good option)
- Automated docgen
from angular.
ad 2)
basically, nx uses one main package.json where all dependencies live in - so angular version would be the same for all projects, react version would be the same for all projects, ...
or, to quote nx docs:
https://nx.dev/l/a/core-concepts/why-monorepos
Single set of dependencies - Use a single version of all third-party dependencies, reducing inconsistencies between applications. Less actively developed applications are still kept up-to-date with the latest version of a framework, library, or build tool.
lerna on the other hand can (& mostly does) use own dependecies per project or lib, so splitting the definitions of dependencies in multiple package.json files inside their respective project folders
from angular.
true, the toolchain is maybe a bit of a headache here.
I will mark the lerna solution as preferred
from angular.
After using NX for a couple weeks I'm pretty happy with how it works. In terms of dependency usage, what it does is have all dependencies imported into the root package.json, but when you build the sub-libraries they have a package.json generated based off of the dependencies that are imported.
Nx's core project/workspace plugins handle building the project, but you can easily add additional commands to the workspace (I.E. a deploy function that can run build, then run a deploy function as nx deploy router-core
) and reference other tooling. You'll just execute most of it from the root instead of the package's own directory.
Here's my project overview that I've been working on as an Nx workspace.
I'm unfamiliar with the build steps/pipelines that ui-router might have set up, but I don't see Nx being a blocker itself. The key is though to create each of the subprojects using the proper flags (--buildable, --publishable). I made that mistake the first time around and had to re-setup the package, but it wasn't too painful.
from angular.
I opened up that project at https://github.com/dereekb/dbcomponents if you want to poke around with how Nx works with a non-trivial project.
I'd be open to setting up all the projects within Nx and getting them to a base level. Just need to know which repo you'd want me to fork off of so we can merge back later, or I can just pick/start one. I figure the publishing urls probably aren't going to change (I.E. @uirouter/angular, etc.)
No timeframe for that though.
from angular.
https://github.com/christopherthielen/ui-router-monorepo-test
I've made some progress on this using yarn workspaces and lerna. I created three top level scripts:
yarn clean
yarn build
(oryarn build --stream
)yarn test
(oryarn test --stream
)
This is definitely a WIP and will likely be deleted and re-created from scratch a few times while testing things.
Some observations:
- had to
nohoist
a bunch of libraries to avoid conflicts - Angular CLI keeps rewriting the package.json of
@uirouter/core
which is super duper annoying. - need to figure out why some projects aren't working/testing correctly
- downstream tests aren't wired up, only unit tests.
- some downstream tests should be removed (especially the sample apps) because their existence in the monorepo should test them with any new changes to the router(s)
- likely going to create a directory off the root
/integration_tests
with the local downstream tests for projects that have them, i.e./integration_tests/angular/typescript9.1
I'm gonna walk away from this for now, but I'll have more notes later.
from angular.
This is the series of commands I used to initialize the monorepo:
#!/usr/bin/env bash
git config --global user.email "[email protected]"
git config --global user.name "Chris Thielen"
mkdir ui-router
cd ui-router
git init
git branch -m main
yarn init -y
echo "node_modules" >> .gitignore
git add . && git commit -m "chore: initial commit"
npx --package=@spinnaker/scripts -- read-write-json write package.json "workspaces[0]" "packages/*"
npx --package=@spinnaker/scripts -- read-write-json write package.json private true
sed -i '' 's/"true"/true/' package.json
git add . && git commit -m "chore: initialize workspaces"
npx lerna init --independent
npx --package=@spinnaker/scripts -- read-write-json write lerna.json npmClient yarn
git add . && git commit -m "chore: initialize lerna"
# yarn
git add . && git commit -m "chore: initialize yarn.lock"
REPOS="publish-scripts core angularjs angular angular-hybrid react react-hybrid dsr rx redux sticky-states visualizer sample-app-angular sample-app-angular-hybrid sample-app-angularjs sample-app-react"
# REPOS="rx"
for i in $REPOS; do
npx lerna import --flatten --preserve-commit ../$i -y;
done
rm -rf packages/yarn.lock;
yarn;
git add . && git commit -m "chore: initialize yarn.lock"
from angular.
This issue has been automatically marked as stale because it has not had
recent activity. It will be closed if no further activity occurs.
This does not mean that the issue is invalid. Valid issues
may be reopened.
Thank you for your contributions.
from angular.
Related Issues (20)
- Angular 12 HOT 8
- Future of ui-router? HOT 6
- Error: State 'quizzes' is already defined HOT 2
- uiSref doesn't work unless matching "name". Can't use full path/name. HOT 2
- How to lazy load with chunks HOT 11
- Incompatibility with Angular v13 - removal of `NgModuleFactoryLoader` HOT 1
- Angular 13 Support (libs update) and version policy HOT 13
- Redirects on local anchor reference HOT 2
- onError not redirecting HOT 1
- Angular v14 support HOT 2
- [bug(?)]: future state declaration's data not passed/merged to/with loaded child state HOT 1
- Angular 15 support HOT 5
- MergeInjector breaks normal Angular DI priority HOT 3
- [question] Lazy loaded module empty after creating
- Breaks when building with Angular 16
- Angular 16 support HOT 9
- Angular 17 support HOT 4
- Incorrect Ui Routing on iOS 17 safari private browsing mode.
- Example for angular 17 standalone
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular.