angular 2 relativepath bundle with gulp

Question

I am working on a web application using Spring 4.3.5.Release. I am using angular 2 for front-end. Inside components, i used relative paths to the templateURLs and StyleURLs following the guide here

Component-relative Paths

But i am confused on how to bundle this project structure using gulp as we place all the component related files (html, css, ts) etc into the same folder.

I would create a minified version of compiles js files using gulp but how do i maintain this structure for relative path.

Would be really happy if somebody could help.

Answer 1

Use gulp-inline-ng2-template plugin to inline the CSS and HTML, prior to compiling with ngc and bundling with rollup:

Compiling with NGC:

gulp.task('compile:aot', function (cb) {
  exec('"node_modules\\.bin\\ngc" -p tsconfig.prod.json', function (err, stdout, stderr) {
    console.log(stdout);
    console.log(stderr);
    cb(err);
  });
});

Compiling to ES6 module format (pre-requisite for tree-shaking by rollup):

gulp.task('compile:es6', function () {
  return gulp.src(['./src/**/*.ts'])
    .pipe(inlineNg2Template({ base: '/src', useRelativePaths:true }))
    .pipe(tsc({
      "target": "es5",
      "module": "es6",
      "moduleResolution": "node",
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "lib": ["es6", "dom"]
    }))
    .pipe(gulp.dest('./dist/src'));
});

Bundle with rollup:

gulp.task('rollup:app', function(){
  return rollup.rollup( {
    entry: 'dist/src/main.aot.js',
    onwarn: function (warning) {
      // Skip certain warnings

      // should intercept ... but doesn't in some rollup versions
      if (warning.code === 'THIS_IS_UNDEFINED') { return; }
      // intercepts in some rollup versions
      if ( warning.message.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1 ) { return; }

      // console.warn everything else
      console.warn(warning.message);
    },

    plugins: [
          nodeResolve({
            jsnext: true,
            module: true
          }),
          commonjs({
              include: 'node_modules/rxjs/**',
          })
    ]
  })
  .then(function(bundle) {
      bundle.write( {
        format: "iife",
        dest: "dist/app.bundle.js",
        sourceMap: true
      });
  });
});

Demo Starter App