Can't bundle sub directories

Greeting, here my issue: I am using the skeleton-es2016 repository.

I reorganized the /src directory, creating a subdirectory and placed all related files into them. e.g. I created a directory /src/welcome and placed welcome.js and welcome.html into it. Same for users, child-router.

I created a directory lib and moved styles.css from /styles to /src/lib/ and places blur-image.js into it as well, and a directoty /src/common where I placed nav-bar.html.

here the result: src ├── app.html ├── app.js ├── child-router │ ├── child-router.html │ └── child-router.js ├── common │ └── nav-bar.html ├── css │ └── styles.css ├── lib │ └── blur-image.js ├── main.js ├── users │ ├── users.html │ └── users.js └── welcome ├── welcome.html └── welcome.js

Here how my bundles.js looks like: module.exports = { "bundles": { "dist/app-build": { "includes": [ "[*/.js]", "**/_.html!text", "_/.css!text" ], "options": { "inject": true, "minify": true, "depCache": true, "rev": false } }, ...

In the index.html, i removed the reference to /styles/styles.css, I assumed the styles would be now bundled.

But the application doesn't load. Here the console output: aurelia.js:6 DEBUG [aurelia] Loading plugin aurelia-templating-binding. aurelia.js:6 DEBUG [aurelia] Configured plugin aurelia-templating-binding. aurelia.js:6 DEBUG [aurelia] Loading plugin aurelia-templating-resources. aurelia.js:6 DEBUG [aurelia] Configured plugin aurelia-templating-resources. aurelia.js:6 DEBUG [aurelia] Loading plugin aurelia-history-browser. aurelia.js:6 DEBUG [aurelia] Configured plugin aurelia-history-browser. aurelia.js:6 DEBUG [aurelia] Loading plugin aurelia-templating-router. aurelia.js:6 DEBUG [aurelia] Configured plugin aurelia-templating-router. aurelia.js:6 DEBUG [aurelia] Loading plugin aurelia-event-aggregator. aurelia.js:6 DEBUG [aurelia] Configured plugin aurelia-event-aggregator. aurelia.js:6 INFO [aurelia] Aurelia Started aurelia.js:6 DEBUG [templating] importing resources for http://localhost:9000/dist/app.html Array[2] aurelia.js:6 DEBUG [templating] importing resources for http://localhost:9000/dist/nav-bar.html Array[0] undefined:1 Uncaught (in promise) Error: Bootstrap's JavaScript requires jQuery(…) http://localhost:9000/dist/welcome.js Failed to load resource: the server responded with a status of 404 (Not Found) aurelia.js:6 ERROR [app-router] Error: XHR error (404 Not Found) loading http://localhost:9000/dist/welcome.js(…)a.ConsoleAppender.a.error @ aurelia.js:6 aurelia.js:6 ERROR [app-router] Router navigation failed, and no previous location could be restored.a.ConsoleAppender.a.error @ aurelia.js:6

and there is not style apply to index.html.

So, my question is: How can I organize the /src folder and place elements into subdirectory?

Bonus question: is there a way I could place the index.html and config.js into the src directory?

I like to have my source code clean and organized :/

Thank you.

There's no problem with having nested folders. Your bundle globs are wrong. You need */**/*.js and the same for html and css. Here's an example of how our docs app is bundled:

{
  "bundles": {
    "dist/app-build": {
      "includes": [
        "[app.js]",
        "[app.html!text]",
        "[app.css!text]",
        "[main.js]",
        "[*/**/*.js]",
        "*/**/*.html!text",
        "*/**/*.css!text"
      ],
      "excludes": [
        "core-js"
      ],
      "options": {
        "inject": true,
        "minify": true
      }
    },
    "dist/aurelia": {
      "includes": [
        "aurelia-framework",
        "aurelia-bootstrapper",
        "aurelia-http-client",
        "aurelia-router",
        "aurelia-animator-css",
        "aurelia-templating-binding",
        "aurelia-templating-resources",
        "aurelia-templating-router",
        "aurelia-loader-default",
        "aurelia-history-browser",
        "aurelia-logging-console",
        "github:aurelia/platforms@master",
        "commonmark",
        "text",
        "nprogress",
        "moment",
        "numeral",
        "hammer",
        "css"
      ],
      "options": {
        "inject": true,
        "minify": true
      }
    }
  }
}

I was having the same error as reported in this issue, starting from ES2016 navigation skeleton, then organizing src in subdirectories like this:

src
├── app.html
├── app.js
├── home
│   ├── home.html
│   └── home.js
├── main.js
├── nav-bar.html
├── search
│   ├── search-bar.html
│   ├── search-bar.js
│   └── suggestion-service.js
├── welcome.html
└── welcome.js

After updating the bundles.js file to use globbing as mentioned above, it's mostly working. Except getting a 404 on suggestion-service.js:

SuggestionService is used by search-bar.js like this:

import {SuggestionService} from './suggestion-service';

And the service itself looks like:

export class SuggestionService {
  constructor() { }

  // other methods...
}

Is there something different I need to do either in the source or bundle configuration to use SuggestionService?

Hi,

I have smilar problem. After bundling the application I have two bundle files aurelia.js and app-build.js. When starting application I get many 404 error from system.js that none of my custom js files was found. Morover I checked the app-bundle.js, everything is there... So what could be the problem? Here my bundles.js:

module.exports = {
    "bundles": {
        "dist/app-build": {
            "includes": [
                "[app.js]",
                "[app.html!text]",
                "[main.js]",
                "[settings.js]",
                "[*/**/*.js]",
                "*/**/*.html!text",
                "*/**/*.css!text"
            ],
            "excludes": [
                '[vendor/**/*.*]'
            ],
            "options": {
                "inject": true,
                "minify": true,
                "depCache": true,
                "rev": false
            }
        },
        "dist/aurelia": {
            "includes": [
                "aurelia-framework",
                "aurelia-bootstrapper",
                "aurelia-fetch-client",
                "aurelia-router",
                "aurelia-animator-css",
                "aurelia-templating-binding",
                "aurelia-event-aggregator",
                "aurelia-polyfills",
                "aurelia-templating",
                "aurelia-templating-resources",
                "aurelia-templating-router",
                "aurelia-task-queue",
                "aurelia-loader-default",
                "aurelia-history-browser",
                "aurelia-logging-console",
                "aurelia-validation",
                "jquery",
                "bootstrap",
                "bootstrap/css/bootstrap.css!text",
                "toastr",
                "moment",
                "bootstrap3-dialog",
                "bootstrap3-dialog/dist/css/bootstrap-dialog.min.css!text",
                "fullcalendar",
                "fullcalendar/dist/lang-all"
            ],
            "options": {
                "inject": true,
                "minify": true,
                "depCache": false,
                "rev": false
            }
        }
    }
};

I will just add, that this is quite big project with many files distributed in subfolders and I cannot directly attach its files.

aurelia / bundler

Can't bundle sub directories #103