Angular html file not found in component library

Question

I'm building a component library for angular which we will share across projects. But when i build the package the html files don't get copied to the dist folder. I get the error angular Failed to load text-input.component.html.

This is my tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  },
  "exclude": [
    "node_modules",
    "dist",
    "**/*.spec.ts"
  ]
}

This is the compiled component:

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var abstract_input_component_1 = require("./../abstract-input/abstract-input.component");
var TextInputComponent = /** @class */ (function (_super) {
    __extends(TextInputComponent, _super);
    function TextInputComponent() {
        var _this = _super.call(this) || this;
        _this.type = 'text';
        return _this;
    }
    TextInputComponent.prototype.ngOnInit = function () {
        //
    };
    __decorate([
        core_1.Input(),
        __metadata("design:type", Object)
    ], TextInputComponent.prototype, "type", void 0);
    TextInputComponent = __decorate([
        core_1.Component({
            moduleId: module.id,
            selector: 'hp-text-input',
            templateUrl: './text-input.component.html',
            styleUrls: ['./text-input.component.scss']
        }),
        __metadata("design:paramtypes", [])
    ], TextInputComponent);
    return TextInputComponent;
}(abstract_input_component_1.AbstractInputComponent));
exports.TextInputComponent = TextInputComponent;
//# sourceMappingURL=text-input.component.js.map

This is the uncompiled component with the template url:

import { Component, OnInit, Input } from '@angular/core';
import { AbstractInputComponent } from './../abstract-input/abstract-input.component';

@Component({
  moduleId: module.id,
  selector: 'hp-text-input',
  templateUrl: './text-input.component.html',
  styleUrls: ['./text-input.component.scss']
})
export class TextInputComponent extends AbstractInputComponent implements OnInit {
  @Input() type = 'text';

  constructor() {
    super();
  }

  ngOnInit() {
    //
  }
}

This is the compiled directory:

And this is the uncompiled directory:

These are my build scripts in package.json:

  "scripts": {
    "clean": "rm -rf dist/",
    "build": "npm run clean && tsc",
    "install": "npm run build"
  },

I've tried searching but most of the results are outdated or rely heavily on more dependencies. is there some config i'm missing?

Have you tried to inline html? How do you build your library? — yurzui
– yurzui, Commented Jan 11, 2018 at 15:44
For creating a component library, ng-packagr works great: npmjs.com/package/ng-packagr. There's a guide over at medium.com/@nikolasleblanc/… — user184994
– user184994, Commented Jan 11, 2018 at 17:01

Aniruddha Das · Accepted Answer · 2018-08-08 15:45:19Z

3

For angular 6 onwards you can tell the angular compiler to convert your template html file to inline template during build.

add "enableResourceInlining": true under angularCompilerOptions to your tsconfig.lib.json file inside your library folder to convert html files to inline template for angular components.

  "angularCompilerOptions": {
    "enableResourceInlining": true
  },

answered Aug 8, 2018 at 15:45

Aniruddha Das

21.8k27 gold badges104 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Florin D Over a year ago

this worked for me, the option is inside tsconfig.json, not tsconfig.lib.json

dhilt · Accepted Answer · 2018-01-17 23:06:23Z

2

I've got an issue that is directly related to your one: Build Angular module with rollup.js: external html template file won't work (404). Then here I found a meaningful thread on this topic, and moving from link to link I saw the official document Angular Package Format (APF) v5.0, containing following:

Inlining of templates and stylesheets
Component libraries are typically implemented using stylesheets and html templates stored in separate files. While it's not required, we suggest that component authors inline the templates and stylesheets into their FESM files as well as *.metadata.json files by replacing the stylesheetUrls and templateUrl with stylesheets and template metadata properties respectively. This simplifies consumption of the components by application developers.

The way that allows you to use external templates/styles is based on deep customization of the build process, which should provide an artificially inlining of your external temlates/styles before compilation. The examples could be found on that GitHub thread (one man even published his solution on npm with 1k downloads per month). A useful approach is in my SO thread...

But I decided to take the middle path:

my.component.ts

import template from './my.component.temlate.html'
import style from './my.component.temlate.css'

@Component({
  selector: 'app-my-component',
  template: template + '',
  styles: [style + '']
})

my.component.temlate.html.ts

export default `
<div data-padding-top></div>
...
`

my.component.temlate.css.ts

export default `
:host {
  overflow-anchor: none;
  overflow-y: auto;
}
`

edited Jan 17, 2018 at 23:06

answered Jan 14, 2018 at 19:16

dhilt

21.1k8 gold badges79 silver badges96 bronze badges

2 Comments

Kon Over a year ago

How did you get your import template from... to work? I'm getting an error: Cannot find module './cart.component.html'

Domske Over a year ago

this does only work in development build. not in production build.

Vivek Doshi · Accepted Answer · 2018-01-11 15:52:31Z

0

You are using moduleId: module.id here so no need to use relative path,

Just remove ./ from templateUrl and styleUrls.

@Component({
  moduleId: module.id,
  selector: 'hp-text-input',
  templateUrl: 'text-input.component.html',
  styleUrls: ['text-input.component.scss']
})

edited Jan 11, 2018 at 15:52

answered Jan 11, 2018 at 15:46

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

2 Comments

Sjoerd de Wit Over a year ago

Still doesn't compile the template

Vivek Doshi Over a year ago

@SjoerddeWit, is it solved ? if not then try to remove moduleId: module.id, , it might work

Sjoerd de Wit · Accepted Answer · 2019-01-10 12:01:14Z

0

I ended up using gulp to do this task since it's not possible with the angular CLI yet. I used this tutorial: How to set up an angular 2 component library

I must note that this probably isn't AOT compatible yet. but the project isn't in that phase yet, so that'll come when we need to be production ready. I'll update the answer at that time.

=======

UPDATE

I ended up using ng-packagr since angular also adopted it. Works nicely although you need to pay attention which version to use that corresponds with the angular version

edited Jan 10, 2019 at 12:01

answered Jan 14, 2018 at 12:28

Sjoerd de Wit

2,4135 gold badges28 silver badges47 bronze badges

Collectives™ on Stack Overflow

Angular html file not found in component library

4 Answers 4

1 Comment

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related