Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bundling RC files

See original GitHub issue

I think it’s necessary to mention “How to bundle RC files using systemjs.json.js file”. Because without this step, using systemjs.json.js file, will produce hundreds of round trips to the server, which is unacceptable. These gulp tasks, using gulp-typescript and systemjs-builder, will automate this job:

var
    gulp = require("gulp"),
     tsc = require("gulp-typescript"),
     SystemBuilder = require("systemjs-builder");

var appFolder = "./app";
var outFolder = "wwwroot";

gulp.task("tsc", () => {
    var tsProject = tsc.createProject("./tsconfig.json");
    var tsResult = gulp.src([
         appFolder + "/**/*.ts"
    ])
    .pipe(tsc(tsProject), undefined, tsc.reporter.fullReporter());

    return tsResult.js.pipe(gulp.dest("build/"));
});

gulp.task("system-build", ["tsc"], () => {
    var builder = new SystemBuilder();

    return builder.loadConfig("systemjs.config.js")
        .then(() => builder.buildStatic(appFolder, outFolder + "/js/bundle.js"))
        .then(() => del("build"));
});

Issue Analytics

State:
Created 7 years ago
Reactions:2
Comments:15 (4 by maintainers)

Top GitHub Comments

2reactions

VahidNcommented, May 10, 2016

after bundling, your index.html file, should look like this:

<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Application</title>

    <link href="wwwroot/css/bootstrap.css" rel="stylesheet" />

    <script src="wwwroot/js/shims.js"></script>
</head>

<body>
    <div>
        <my-app>Loading App...</my-app>
    </div>

    <script src="wwwroot/js/jquery/dist/jquery.min.js"></script>
    <script src="wwwroot/js/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="wwwroot/js/bundle.js"></script>
</body>
</html>

Now js/bundle.js contains all the angular2 related files + your application’s files (all of them). So you don’t need to add systemjs.config.js entry anymore. because it’s complied to a single file, using systemjs-builder task. Also js/shims.js now bundles es6-shim.js & zone.js & Reflect.js files.

1reaction

VahidNcommented, May 14, 2016

A better solution: Introduction to Webpack It’s also able to embed all of the .html and .css files too, using the require method:

import { Component } from '@angular/core';
import '../../public/css/styles.css';

@Component({
      selector: 'my-app',
      template: require('./app.component.html'),
      styles: [require('./app.component.css')]
})
export class AppComponent { }

Top Results From Across the Web

s6-rc - Gentoo Wiki

This file specifies one of the s6-rc's supported service types: longrun, oneshot and bundle (see service bundles). The contents of a service definition ......

bundle-config - - Set bundler configuration options

Executing bundle config set --global <name> <value> will set that configuration to the value specified for all bundles executed as the current user....

How to Bundle Non-JavaScript Resources - Bits and Pieces

Within the webpack.config.js file and rules array, we can create a new entry for CSS bundling as a child property of the module...

Bundling Configuration - SWC

SWC is able to bundle multiple JavaScript or TypeScript files into one. ... You can configure bundling using spack.config.js with similar options to...

RC-BUNDLE-100-110 - RC FILESALE

RC -BUNDLE-100-110 · 10x .ZIP Files · Happy Creating -RC-.