Integrated web component uses wrong base-href in Angular 6

Question

I just created my first web-component using Angular 6. Everything worked fine, until I tried to integrate the web component into an existing application:

Application that integrates web component (https://www.example.com):

<script type="text/javascript" src="https://component.example.com/html-imports.min.js"></script>
<link rel="import" href="https://component.example.com/element.html">
<my-web-component uuid="2342-asdf-2342-ffsk"></my-web-component>

My web component index.html does not contain a base-href.

The browser now tries to load the assets of the web component:

https://www.example.com/assets/i18n/de_CH.json

instead

 https://component.example.com/assets/i18n/de_CH.json

When I try to add the base-href during the build, it results in this:

ng build --configuration=development --base-href https://component.example.com/

Cannot read property 'startTag' of null          
TypeError: Cannot read property 'startTag' of null
    at IndexHtmlWebpackPlugin.<anonymous> (/home/www-data/.../node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/index-html-webpack-plugin.js:147:62)
    at Generator.next (<anonymous>)
    at fulfilled (/home/www-data/.../node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/index-html-webpack-plugin.js:4:58)

Any help is really appreciated, I am running out of ideas.

Using base href in a web component doesn't make sense as far as I know now because the parent application that integrates the web component already sets one. There can only be one. — nimrod, Jul 11 '18 at 09:12

score 5 · Answer 1 · answered Jul 10 '18 at 10:27

A few tips first:

As Skorunka suggests, you should structure the <base> already in the <head> since all of them share the same starting URL. Also, it does not make sense to use both relative and absolute URLs in this case.
The --base-href configuration can even override the one in HTML so don't worry.
Detele the type in script tag, it's definitely not Javascript and it's not necessary.

Final look:

<base href="https://component.example.com/">
<script src="html-imports.min.js"></script>
<link rel="import" href="element.html">
<my-web-component uuid="2342-asdf-2342-ffsk"></my-web-component>

Back to the problem, can you give me a fiddle of your component source code? The problem may lie within the way you load files inside the component, not the way you import the component, nor the code in here.

score 3 · Answer 2 · answered Jul 12 '18 at 07:21

3

I Assume base-href is not supported in angular 6 anymore.

That's way you get this error.

Cannot read property 'startTag' of null

You can find your solution here.

base-href Not Supported in Angular 6

answered Jul 12 '18 at 07:21

molikh

1,274
13
24

score 0 · Answer 3 · answered Jul 16 '18 at 11:56

None of the above answers were correct for me so I am posting what fixed the problem. I stopped using base-href completelly. For all assets I used other ways to load them:

Use absolute URL for scripts or images (can be put together with a domain-url environment variable). If this is not done like this, it could happen at any time that the web component uses the base-href of the application that integrates it. And this is a risk we cannot take.
I am loading images with CSS classes and load them with url('xxx'). Like this webpack can correctly handle them.
When I build the app I am not using --base-href anymore. The problem is that I am defining element.html as "index", but this file is empty. There is no base-href definition and that's why this error is thrown. The file content is added during build when all scripts are added to this file.

I hope this helps.

Integrated web component uses wrong base-href in Angular 6

3 Answers3