What's the best Way to import Components via Link-Tag from a Package?

Question

Currently I import components from a package by a relative path:

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

However when I start nesting packages this doesn't work properly anymore. I set up a small example which can be found here: https://github.com/nikgraf/nesting-components

When I try to build package app I get this 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:

app - dependency: PackageA

PackageA - dependency: PackageB

Some Background information which might help: My application contains the x-login component from package A which is used by several Dart apps we build. The x-login component and in general package A contains specific code for our applications. x-login should able to use the x-button component which is in package B. Package B is a package with generic components we want to publish.

Do you have any advice on structuring my application differently or how to import components in a better way?

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 including the components without having to use relative paths.

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

As long as your pubspec knows where packageA is, you should be fine. This means when you change the path to the package dependancy to be either a git or pub url it will still work.

Pub Package Manager Dependencies doc.