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.

Michael Kang · Accepted Answer · 2017-03-15 07:33:58Z

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

edited Mar 15, 2017 at 7:33

answered Mar 15, 2017 at 7:28

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

MKM Over a year ago

It worked!! Thank you. I never know there is gulp-inline-ng2-template plugin. Great!!

MKM Over a year ago

One question. As we use NGC, we won't require typescript plugin for compilation, right.

Michael Kang Over a year ago

ngc is used to generate the factories needed for static compilation. tsc is still required after the factories are created to compile to es6 format prior to bundling and tree-shaking by rollup. You may be able to output to es6 using ngc alone - I think it should work.

MKM Over a year ago

Thanks for the clarification. Got confused with both compilers. And thank you very much for the starter app. It would be really helpful for beginners like me.

Michael Kang Over a year ago

sure np:) check out the feature module build which outputs to UMD, AMD, and CJS module formats. You'll be able to deploy feature modules to NPM and re-use it across multiple applications.

|

Collectives™ on Stack Overflow

angular 2 relativepath bundle with gulp

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related