Angular2：Rollupjs捆绑包含组件类中的相对路径

Question

To support i18n as explained here I have to support AOT and therefore need to use relative templateUrl and styleUrls in my components and set moduleId: module.id .

This works perfect for my dev build which does not bundle and loads the files using systemjs (built using gulp)

1. compile typescript: `target: es5, module: commonjs'

In the production build I use rollup.js to tree-shake and bundle. Here I have to compliation steps since rollup needs es2015 modules and the browser (and to have module.id set in the components) needs common.js

1. compile typescript: target: es5, module: es2015
2. bundle with rollup.js: format: iife
3. compile typescript again: target: es5, module: commonjs, allowJs: true

Doing that I get the following error when running the app: failed to load app.component.html

Version info:

• angular: 2.2.1
• typescript: 2.0.10
• rollup: 0.36.3

Does anyone have an idea what is causing the problem? Thanks a lot for your help

Answer 1

when you use module.id you have to declare a variable on the component for modules. that is:

declare var module: any;
import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app',
  templateUrl: 'content.component.html'
})
export class ContentComponent {}

I hope this works for you