Aurelia library js file in Bundle but is resolved

Question

My project structure is as follows:

src
..lib
....someLibrary.js

bundles.js:

"bundles": {
    "dist/app-build": {
        "includes": [
            "[**/*.js]",
            "**/*.html!text",
            "**/*.css!text"
        ],
        "options": {
            "sourceMaps": 'inline'
            "inject": true,
            "minify": true,
            "depCache": true,
            "rev": true
        }
    },

The project builds fine, but when I check app-build.js I don't find a definition for lib/someLibrary.js. I am using typescript for my own project so I assume this has something to do with that, how can I mix regular js files and output from my transpiled TS files into the same app-build bundle?

Update So I tried to split the 'build-system' gulp task into two tasks: 'build-typescript' which is the same as 'build-system' was before, then I created 'build-libs' which looks like so:

gulp.task('build-libs', function() {
  return gulp.src(paths.root + '**/*.js')
    .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
    .pipe(changed(paths.output, {extension: '.js'}))
    .pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '/src' }).on('error', gutil.log))
    .pipe(gulp.dest(paths.output));
});

I then added to my dist/app-build bundle config: "lib/someLibrary.min.js"

And now my app-build.js does have the library defined, however when I try to use the library in one of my views using:

<require from="lib/someLibrary.min.js">

I get an error:

Failed to load resource: the server responded with a status of 404 (Static File '/dist/lib/someLibrary.min.html' not found)

What?!?? Why is it looking for html when nowhere is html ever involved in this whole scenario? Why is something that should be easy this hard?

Update2

So apparently 'require' does not work with javascript files. I changed to use the 'script' tag, however it seems these get stripped out when rendered by Aurelia. I am at a loss as to how to get Aurelia to do what I want it to.

Answer 1

Ok so after much frustration and disbelief at how hard something so simple could be, in addition to the changes to the build tasks mentioned above (which includes the javascript library file that has no npm/jspm package into the app-bundle) I created a modified version of this solution which looks as follows:

import { bindable, bindingMode, customElement, noView } from 'aurelia-framework';

@noView()
@customElement('scriptinjector')
export class ScriptInjector {
  @bindable public url;
  @bindable public isLocal;
  @bindable public isAsync;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) protected scripttag;

  public attached() {
    if (this.url) {
      this.scripttag = document.createElement('script');
      if (this.isAsync) {
        this.scripttag.async = true;
      }
      if (this.isLocal) {
        const code = 'System.import(\'' + this.url + '\').then(null, console.error.bind(console));';
        this.scripttag.text = code;
      } else {
        this.scripttag.setAttribute('src', this.url);
      }
      document.body.appendChild(this.scripttag);
    }
  }

  public detached() {
    if (this.scripttag) {
      this.scripttag.remove();
    }
  }
}

To use it, simply add the following tag to the view where you want the script library to be used as follows:

<scriptinjector url="lib/bootstrap-toc.js" is-local.bind='true'></scriptinjector>

This will keep the original scriptinjector functionality which allows you to add remote 3rd party libraries to your Aurelia app but it will also allow you to load any local 3rd party libraries that you have bundled with your app.

Hope this helps someone.