Template files are not coppied to dist folder

[LunicLynx]

The template files of components are not copied to the dist folder.

It would be possible to create them there directly but this does not seem like a clean solution.

@Component({
    moduleId: module.id,
    templateUrl: require('./abc.html'), // <<-----
})
export class AbcComponent implements OnInit {

[jvandemo]

I think, for now, the best approach is to use inline templates for libraries (see https://github.com/valor-software/ng2-bootstrap/blob/development/components/alert/alert.component.ts for an example).

Because Angular 2 recently started using Webpack, another option may be to use a Webpack build process to generate a bundle for production.

Any other thoughts would be appreciated.

[jbrecht]

not the best solution, but I added these scripts in package.json:

    "htmlcopy": "copyfiles src/**/*.html dist",
    "lesscopy": "copyfiles src/**/*.less dist",
    "dist": "npm run tsc && npm run htmlcopy && npm run lesscopy",

which means you must add this to devDependencies:
"copyfiles": "1.0.0"

[jvandemo]

@jbrecht — Thanks for your input. I will leave this issue open until Angular CLI comes with a recommendation that we can port to this generator.

[jvandemo]

As a reference, Angular Material uses Gulp to copy the files over the dist directory: https://github.com/angular/material2/blob/master/tools/gulp/tasks/components.ts

[caroso1222]

Something cool that material does is to inline html and scss files into the generated js components. This way, you'd only be shipping js. Checkout this where the task is initiated, then it calls another gulp task called :inline-resources which, after going through a bunch of functions, gets to this function. It basically replaces all instances of templateUrl with the content of the respective file. Same with styleUrls .scss files.

I found this datepicker library which does the same. You can check out the gulp file here. I pointed out the gulp task which makes the template and style inlining into the component. It's simpler than the material's one to understand, but the idea is the same.

If this makes sense to you, @jvandemo, I can go ahead and take a stab at adding this to the generator so we can include it into the build & publish pipeline.

[jvandemo]

@caroso1222 — Indeed, we are currently waiting for recommendations by the Angular team on how we can best approach this. Thank you for sharing your thoughts and offering to help. Much appreciated.

For now, I would suggest to only take action when we know what the official recommendation is.

[caroso1222]

Sure, sounds good! Lets wait for the official recommendation then.

[AhsanAyaz]

I just published my library over npm and found the same issue. Not loading templates . Looks like I'll have to use inline templates for now 😅

[jvandemo]

@AhsanAyaz — Inline templates indeed seem to be the way to go (for now). Thank you for your feedback and trying out the generator.

[gilbertogwa]

The below has some solutions and comments on how to solve this, I tried to replicate but I could not make it work yet. If anyone wants to try it is here:

https://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html

Another info: http://blog.mgechev.com/2017/01/21/distributing-an-angular-library-aot-ngc-types/#checklist

[tonkla]

Another solution, use asset-loader such as html-loader, sass-loader

@Component({
    selector: 'app-abc',
    template: require('./abc.component.html'),
    styles: [require('./abc.component.scss')]
})
export class AbcComponent implements OnInit {

webpack.conf.js

module: {
  rules: [{
    test: /\.html$/,
    loader: 'html-loader',
    exclude: /node_modules/
  }, {
    test: /\.scss$/,
    loader: 'raw-loader!sass-loader',
    exclude: /node_modules/
  }]
}

This might help, https://github.com/nsmolenskii/ng-demo-lib

[jvandemo]

@gilbertowa, @tonkla — Thank you both for the great suggestions! 👍

[BioPhoton]

So is there a solution beside inline templates? Same for css which is not so nice inlined.
Would be cool to have the html and css in a separate file. :-)

thx Michael

[caroso1222]

@BioPhoton what material currently does is to inline CSS and HTML into the component via gulp in build step. ngconf just announced they will be releasing a guideline on how to properly build ng libraries, so I guess we'll be able to address a lot of issues when this comes out.

[jvandemo]

There is an experimental branch with Gulp that should support Mac, Linux and Windows (see #65).

Can any of you please install the Gulp version:

$ npm install -g https://github.com/jvandemo/generator-angular2-library#feat/gulp

After generating a library, you should be able to build your library using:

$ npm run build

or use watch mode to build whenever a file changes in src:

$ npm run build:watch

Templates and styles should now be inlined automatically in the resulting bundle in the dist directory.

Can anyone please verify if everything works as expected on your machine?

Thanks in advance!

[jvandemo]

v9.0.0 has been released with automatic inlining of HTML and CSS files.

Feel free to report issues if you experience problems. Thanks!

[abalad]

@jvandemo It seems that it happened again in the latest versions:

#199

[tonysamperi]

Quote @abalad

[jvandemo]

#199 was resolved 👍