Glad to hear you find out a solution. Well done!
1 Like
Oh I will have a look at npm7+ as well
Would also like to say thanks for getting aurelia 2 finished its looking good for me, I built a forms renderer with it and got it to render out 45000 elements it was slow but considering what a a crazy amount of UI that is to render it looked pretty quick, and no real world UI would need that many elements.
Thanks for all the help
1 Like
Sorry I am back, I have spoken to senior members of the team and I don’t believe yarn workspace setup is what we want so I will try and explain why.
I want a aurelia 2 project which has all my components/controls bundled into it, this should be a completely separate project sitting in its own folder separate from all other projects. I should be able to build this project then add it too another completely separate aurelia project and use the controls in that project.
eg
import {MyTextBox} from ‘controlsLib’
Yarn workspace seems to require all projects sit under one folder could be my lack of knowledge though.
In aurelia toolbelt the boostrap-v5 lib sits under a parent project, we dont want our controls lib as part of any other projects we want it completely seperate
EG in you example root folder has a package.json and so does Bootstrap5.
But we do want to use the approach you highlighted for importing
boostrap-v5 is totally separated. I used it inside demo. you can publish it in the NPM.
Anyway, I hope someone else helps you.
1 Like
Ok Hamed thanks I will keep looking maybe I am still missing something
If you want a complete other separated project you might use npm link. But you wil have to manage dependencies yourself between your control library and app I guess.
See Understanding npm-link. Writing Application and Dependency Code… | by Franziska Hinkelmann | DailyJS | Medium
Thanks Arjen will take a look on monday
Sounds like you want two different npm projects perhaps even in custom git repos. What @arjendeblok proposed should be the simplest approach to get going. After that deploy them to npm or GitHubs repository and install for production. If you’re looking for a local npm repo give verdaccio a try
Depending on how often you’re going to make changes to that library you may choose to create it as a separate npm/local repository package or as others suggested include it as a workspace. The advantage of the latter is that during the active development phase it will be more convenient to live code. Once you have an established lib, then you can extract it to a separate package. Webpack and typescript can be configured to bundle from source directly removing the need to constantly rebuild the lib.
Hi All thanks for the comments, so far I have been unable to get this working I get the same issue about Conflicting aurelia/metadata module import detected, I have not given up yet though will try again tomorrow
I could not get npm link working (probably due to lack of experience of npm, yarn) but I have found a solution and I will post the steps on here
So I followed this tutorial Authoring Libraries | webpack I had tried it before but could not get it working.
My main.ts ended up like this in controlsLib
import { MyApp2 } from ‘./my-app2’;
import { MyApp3 } from ‘./my-app3’;
// Css files imported in this main file are NOT processed by style-loader
// They are for sharedStyles in shadowDOM.
// However, css files imported in other js/ts files are processed by style-loader.
// import shared from ‘./shared.css’;
// Components you want to consume in parent app
export { MyApp2, MyApp3 }
My webpack.config I added this, the important/changed bits are target, library, externals
var nodeExternals = require(‘webpack-node-externals’);
target: ‘node’,
mode: production ? ‘production’ : ‘development’,
devtool: production ? undefined : ‘eval-cheap-source-map’,
entry: {
entry: ‘./src/main.ts’
},
output: {
path: path.resolve(__dirname, ‘dist’),
filename: production ? ‘[name].[contenthash].bundle.js’ : ‘[name].bundle.js’,
library:
{
name:“controlsLib”,
type: ‘umd’,
}
},
externals: [nodeExternals()],
type setting allows you to use the library without using a script tag IE import
externals: excludes node_modules entirely from bundle, not sure what target node does yet 
In the app that consumes the library main.ts
import * as controlsLib from “…/node_modules/controlsLib/index”;
Aurelia.register(controlsLib)
Package.json
“dependencies”: {
"aurelia": "dev",
"controlsLib": "0.1.0"
},
I also created a folder under consumer app node_modules called controlsLib and pasted build output from the dist folder of controls lib into it, renamed bundle to index.js, its possible you could use local install npm for this as suggested by bigopon I have not tried yet
As for the error index.js?61f9:1 Uncaught Error: Conflicting @aurelia/metadata module import detected
What I think this error actually means is we have a node_modules folder in both bundles the consumer app and the controls lib, which I discovered by reading an unrelated post.
So fully remove node_modules I used this
It was the inclusion of node_modules twice that meant it did not work for me the 1st time I tried Authoring Libraries | webpack
It might also be possible thinking about it to get npm link working if you use webpack-node-externals, as I was also getting the same error using npm link
