{"id":13481660,"url":"https://github.com/TheLarkInn/angular2-template-loader","last_synced_at":"2025-03-27T12:31:16.433Z","repository":{"id":43781403,"uuid":"60283125","full_name":"TheLarkInn/angular2-template-loader","owner":"TheLarkInn","description":"Chain-to loader for webpack that inlines all html and style's in angular2 components. ","archived":false,"fork":false,"pushed_at":"2020-07-21T12:34:54.000Z","size":36,"stargazers_count":205,"open_issues_count":43,"forks_count":70,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-10-13T15:08:53.581Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TheLarkInn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-02T17:17:42.000Z","updated_at":"2024-09-05T07:48:22.000Z","dependencies_parsed_at":"2022-09-10T22:40:15.866Z","dependency_job_id":null,"html_url":"https://github.com/TheLarkInn/angular2-template-loader","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheLarkInn%2Fangular2-template-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheLarkInn%2Fangular2-template-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheLarkInn%2Fangular2-template-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheLarkInn%2Fangular2-template-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TheLarkInn","download_url":"https://codeload.github.com/TheLarkInn/angular2-template-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221825602,"owners_count":16886992,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T17:00:53.836Z","updated_at":"2024-10-30T15:31:15.762Z","avatar_url":"https://github.com/TheLarkInn.png","language":"JavaScript","readme":"# angular2-template-loader\nChain-to loader for webpack that inlines all html and style's in angular components.\n\n[![Build Status](https://travis-ci.org/TheLarkInn/angular2-template-loader.svg?branch=master)](https://travis-ci.org/TheLarkInn/angular2-template-loader)\n[![Coverage](https://codecov.io/gh/TheLarkInn/angular2-template-loader/branch/master/graph/badge.svg)](https://codecov.io/gh/TheLarkInn/angular2-template-loader)\n[![Taylor Swift](https://img.shields.io/badge/secured%20by-taylor%20swift-brightgreen.svg)](https://twitter.com/SwiftOnSecurity)\n\n### Quick Links\n- [Installation](#installation)\n- [Requirements](#requirements)\n- [Example usage](#example-usage)\n- [How does it work](#how-does-it-work)\n- [Common Issues](#common-issues)\n\n### Installation\nInstall the webpack loader from [npm](https://www.npmjs.com/package/angular2-template-loader).\n- `npm install angular2-template-loader --save-dev`\n\nChain the `angular2-template-loader` to your currently used typescript loader.\n\n```js\nloaders: ['awesome-typescript-loader', 'angular2-template-loader'],\n```\n\n### Requirements\nTo be able to use the template loader you must have a loader registered, which can handle `.html` and `.css` files.\n\u003e The most recommended loader is [`raw-loader`](https://github.com/webpack/raw-loader)\n\nThis loader allows you to decouple templates from the component file and maintain AoT compilation. This is particularly useful  when building complex components that have large templates.\n\n### Example Usage\n\n#### Webpack\nHere is an example markup of the `webpack.config.js`, which chains the `angular2-template-loader` to the `tsloader`\n\n```js\nmodule: {\n  loaders: [\n    {\n      test: /\\.ts$/,\n      loaders: ['awesome-typescript-loader', 'angular2-template-loader?keepUrl=true'],\n      exclude: [/\\.(spec|e2e)\\.ts$/]\n    },\n    /* Embed files. */\n    { \n      test: /\\.(html|css)$/, \n      loader: 'raw-loader',\n      exclude: /\\.async\\.(html|css)$/\n    },\n    /* Async loading. */\n    {\n      test: /\\.async\\.(html|css)$/, \n      loaders: ['file?name=[name].[hash].[ext]', 'extract']\n    }\n  ]\n}\n```\n\n#### Before\n```js\n@Component({\n  selector: 'awesome-button',\n  template: 'button.template.html',\n  styles: ['button.style.css']\n})\nexport class AwesomeButtonComponent { }\n```\n\n#### After (before it is bundled into your webpack'd application)\n```js\n@Component({\n  selector: 'awesome-button',\n  template: require('./button.template.html'),\n  styles: [require('./button.style.css')]\n})\nexport class AwesomeButtonComponent { }\n```\n\n### How does it work\nThe `angular2-template-loader` searches for `templateUrl` and `styleUrls` declarations inside of the Angular 2 Component metadata and replaces the paths with the corresponding `require` statement.\nIf `keepUrl=true` is added to the loader's query string, `templateUrl` and `styleUrls` will not be replaced by `template` and `style` respectively so you can use a loader like `file-loader`.\n\nThe generated `require` statements will be handled by the given loader for `.html` and `.js` files.\n\n### Common Issues\nIn some cases the webpack compilation will fail due to unknown `require` statements in the source.\u003cbr/\u003e\nThis is caused by the [way the template loader works](#how-does-it-work). \n\n\u003e The Typescript transpiler doesn't have any typings for the `require` method, which was generated by the loader.\n\nWe recommend the installation of type defintions, which contain a declaration of the `require` method.\n- [@types/node](https://www.npmjs.com/package/@types/node) | [dt~node](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/node/node.d.ts)\n- [@types/requirejs](https://www.npmjs.com/package/@types/requirejs) | [dt~requirejs](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/requirejs)\n","funding_links":[],"categories":["Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)","Uncategorized"],"sub_categories":["Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e","Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTheLarkInn%2Fangular2-template-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTheLarkInn%2Fangular2-template-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTheLarkInn%2Fangular2-template-loader/lists"}