What is the best way to import components through a Link-Tag from a package?

Question

I am currently importing components from a package in a relative path:

<link rel="components" href="packages/packageA/components/login.html"> 

However, when I run nested packages, this does not work properly. I created a small example that can be found here: https://github.com/nikgraf/nesting-components

When I try to create an application for a package, I get the following error message:

 error web/packages/packageA/components/login.html:6:5: exception while reading file "web/packages/packageA/components/packages/packageB/components/button.html", original message: FileIOException: Cannot open file 'web/packages/packageA/components/packages/packageB/components/button.html' (OS Error: No such file or directory, errno = 2) <link rel="components" href="packages/packageB/components/button.html"> ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ warning web/packages/packageA/components/login.html:12:7: custom element with tag name button not found. <div is="button"></div> ^^^^^^^^^^^^^^^^^ 

Current structure:

Application Dependency: PackageA

Package Hotel Dependency: PackageB

Some background information that might help: My application contains the x-login component from package A, which is used by several Dart applications that we create. The x-login component in general package A contains special code for our applications. x-login can use the x-button component that is in package B. Package B is a package with the generic components that we want to publish.

Do you have any recommendations on how to structure my application differently or what is the best way to import components?

Answer 1

Having separate packages for your utility components and then domain specific components seems like a good idea.

What you can do is use the package: packageA style syntax when you include components without using relative paths.

 <link rel="import" href="package:packageA/components/login.html"> 

As long as your pubspec knows where packageA is located, you should be fine. This means that when you change the package dependency path as with the git or pub symbol, it will still work.

Pub Package Manager Dependencies doc.