rollup-plugin-angular-inline

1.0.1 verified Mon Apr 27 auth: no javascript deprecated

Rollup plugin to inline Angular templateUrl and styleUrls into transpiled JavaScript files, and remove module.id. Current version: 1.0.1. Based on the Angular Material2 inlining script, it operates after ngc to produce UMD bundles while preserving ES2015 for tree shaking. Aims to simplify Angular library builds, but the README warns of inaccurate sourcemaps. Serves as a transitional tool; the author recommends a more modern approach that inlines templates/styles directly in TypeScript sources via https://github.com/filipesilva/angular-quickstart-lib.

Common errors

error Error: Cannot find module 'rollup-plugin-angular-inline' ↓

cause Package not installed or missing from node_modules.

fix

Run 'npm install --save-dev rollup-plugin-angular-inline'.

error TypeError: angularInline is not a function ↓

cause Incorrect import style; used named import instead of default import.

fix

Use 'import angularInline from ...' instead of 'import { angularInline } from ...'.

Warnings

gotcha Plugin likely produces inaccurate sourcemaps for inlined templates/styles. ↓

fix Consider using a build step that inlines templates/styles directly in TypeScript sources, e.g., angular-quickstart-lib.

deprecated The package is deprecated in favor of inlining in TypeScript sources directly. ↓

fix Migrate to a TypeScript-based inliner like the one in angular-quickstart-lib.

Install

npm install rollup-plugin-angular-inline

yarn add rollup-plugin-angular-inline

pnpm add rollup-plugin-angular-inline

Imports

angularInline

wrong

const angularInline = require('rollup-plugin-angular-inline');

correct

import angularInline from 'rollup-plugin-angular-inline';

ESM-only; CommonJS require will not work with Rollup plugin.

default

wrong

import { angularInline } from 'rollup-plugin-angular-inline';

correct

import angularInline from 'rollup-plugin-angular-inline';

The module has a default export, not a named export.

types

import type { AngularInlineOptions } from 'rollup-plugin-angular-inline';

TypeScript types are included; use import type for options.

Quickstart

Configure Rollup to inline Angular template URLs and styles after ngc compilation for UMD bundle production.

// rollup.config.js
import angularInline from 'rollup-plugin-angular-inline';

export default {
  input: './src/index.js',
  output: {
    file: './bundles/my-lib.umd.js',
    format: 'umd',
    name: 'ng.my-lib',
    globals: {
      '@angular/core': 'ng.core'
    }
  },
  plugins: [
    angularInline({ include: './src/**/*.component.js' })
  ]
};