Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
angular2-template-loader
Advanced tools
Angular2 webpack loader that inlines your angular2 templates and stylesheets into angular components.
Chain-to loader for webpack that inlines all html and style's in angular2 components.
Install the webpack loader from npm.
npm install angular2-template-loader --save-dev
Chain the angular2-template-loader
to your currently used typescript loader.
loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
To be able to use the template loader you must have a loader registered, which can handle .html
and .css
files.
The most recommended loader is
raw-loader
This 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.
Here is an example markup of the webpack.config.js
, which chains the angular2-template-loader
to the tsloader
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader?keepUrl=true'],
exclude: [/\.(spec|e2e)\.ts$/]
},
/* Embed files. */
{
test: /\.(html|css)$/,
loader: 'raw-loader',
exclude: /\.async\.(html|css)$/
},
/* Async loading. */
{
test: /\.async\.(html|css)$/,
loaders: ['file?name=[name].[hash].[ext]', 'extract']
}
]
}
@Component({
selector: 'awesome-button',
template: require('./button.template.html'),
styles: [require('./button.style.css')]
})
export class AwesomeButtonComponent { }
The 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.
If 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
.
The generated require
statements will be handled by the given loader for .html
and .js
files.
In some cases the webpack compilation will fail due to unknown require
statements in the source.
This is caused by the way the template loader works.
The Typescript transpiler doesn't have any typings for the
require
method, which was generated by the loader.
We recommend the installation of type defintions, which contain a declaration of the require
method.
FAQs
Angular2 webpack loader that inlines your angular2 templates and stylesheets into angular components.
The npm package angular2-template-loader receives a total of 34,048 weekly downloads. As such, angular2-template-loader popularity was classified as popular.
We found that angular2-template-loader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.