npmpackage.info

Gathering detailed insights and metrics for angularjs-template-loader

Other packages similar to angularjs-template-loader

ngtemplate-loader

2.1.0

Include AngularJS templates in the Webpack bundle and preload the template cache.

ng-component-loader

1.0.39

Webpack loader for AngularJs components

angularjs-templateurl-loader

1.0.2

Webpack loader that inlines all html for AngularJS components/directives.

angular-template-url-loader

2.0.0

AngularJS webpack loader that inlines your templates into angular directives and components.

Gathering detailed insights and metrics for angularjs-template-loader

angularjs-template-loader - 0.1.2 | npmpackage.info

angularjs-template-loader

Webpack loader that inlines all html for AngularJS components/directives.

0.1.2

MIT

JavaScript

22.39 kB

1,080,659 1.9

Installations

npm install angularjs-template-loader

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

10.16.0

NPM Version

6.9.0 Score

72.2

Supply Chain

92.1

Quality

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

5

Total

20

Closed

8

Merged

7

Issues

Open

0

Total

2

Closed

2

Releases

minor bump publish via npm

v0.1.1

Updated on Apr 11, 2017

View All 1 releases

Languages

JavaScript

JavaScript (100%)

Developer

dgsmith2

Download Statistics

Total Downloads

1,080,659

Last Day

236

Last Week

2,851

Last Month

11,090

Last Year

141,233

GitHub Statistics

MIT License

7 Stars

21 Commits

8 Forks

1 Watchers

5 Branches

2 Contributors

Updated on Jul 27, 2024

Bundle Size

75.43 kB

Minified

22.39 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 2 Contributors

Package Meta Information

Latest Version

0.1.2

Package Id

angularjs-template-loader@0.1.2

Unpacked Size

7.29 kB

Size

3.31 kB

File Count

NPM Version

6.9.0

Node Version

10.16.0

Total Downloads

Cumulative downloads

Total Downloads

1,080,659

Last Day

-10.6%

236

Compared to previous day

Last Week

13%

2,851

Compared to previous week

Last Month

-6.2%

11,090

Compared to previous month

Last Year

2.2%

141,233

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

loader-utils

Dev Dependencies

codecov istanbul mocha should

angularjs-template-loader

Webpack loader that inlines all html for AngularJS code that specifies a templateUrl. It is a port of code from angular2-template-loader.

Installation

Option 1: Install from npm.

npm install angularjs-template-loader --save-dev

Option 2: Install from yarn.

yarn add angularjs-template-loader --dev

Chain the angularjs-template-loader to your currently used TypeScript loader.

1loaders: ['awesome-typescript-loader', 'angularjs-template-loader'],

Requirements

To be able to use the template loader you must have a loader registered, which can handle .html files.

The most recommended loader is raw-loader

This loader allows you to decouple templates from the component file. This is particularly useful when building complex components that have large templates.

Example Usage

Webpack

Here is an example markup of the webpack.config.js, which chains the angularjs-template-loader to the awesome-typescript-loader

1module: {
2  rules: [
3    {
4      test: /\.ts$/,
5      use: [
6        {
7          loader: 'awesome-typescript-loader'
8        },
9        {
10          loader: 'angularjs-template-loader',
11          options: {
12            relativeTo: path.resolve(__dirname, 'app/src'
13          }
14        }
15      ]
16      exclude: [/\.(spec|e2e)\.ts$/]
17    },
18    { 
19      test: /\.html$/, 
20      use: ['raw-loader']
21    }
22  ]
23}

Before

1angular.module("my-module").component("my-component", {
2  templateUrl: "./myComponent.html" ,
3  controller: "MyController"
4});

After (before it is bundled into your webpack'd application)

1angular.module("my-module").component("my-component", {
2  template: require('/root/some/path/app/src/myComponent.html" ,
3  controller: "MyController"
4});

How does it work

The angularjs-template-loader searches for templateUrl declarations inside of the AngularJS files and replaces the paths with the corresponding require statement. If relativeTo: '/some/absolute/path' is added to the loader's options, ALL templates will loaded in relation to the specified path instead of the current directory.

The generated require statements will be handled by the given loader for .html files.

Common Issues

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.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

1.9

/10

Last Scanned on 2025-04-28

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More