aurelia-forms bundling issue aurelia-cli

Question

I am attempting to use the Aurelia-Form plugin in a Aurelia\Aspnetcore\Typescript project.

Unfortunately I get an issue when using the aurelia-cli build process where the aurelia-form components are not correctly bundled.

Bundling progress

On the left is how it should (Project taken from here https://github.com/SpoonX/swan-example-client).

I am thinking that there might be a error in my aurelia.json but I can't see anything suspicious.

{
  "name": "AuFormsEx",
  "type": "project:application",
  "platform": {
    "id": "aspnetcore",
    "displayName": "ASP.NET Core",
    "output": "wwwroot\\scripts",
    "baseUrl": "scripts"
  },
  "transpiler": {
    "id": "typescript",
    "displayName": "TypeScript",
    "fileExtension": ".ts",
    "dtsSource": [
      "./typings/**/*.d.ts",
      "./custom_typings/**/*.d.ts"
    ],
    "source": "src\\**\\*.ts"
  },
  "markupProcessor": {
    "id": "none",
    "displayName": "None",
    "fileExtension": ".html",
    "source": "src\\**\\*.html"
  },
  "cssProcessor": {
    "id": "none",
    "displayName": "None",
    "fileExtension": ".css",
    "source": "src\\**\\*.css"
  },
  "editor": {
    "id": "visualstudio",
    "displayName": "Visual Studio"
  },
  "unitTestRunner": {
    "id": "none",
    "displayName": "None"
  },
  "paths": {
    "root": "src",
    "resources": "src\\resources",
    "elements": "src\\resources\\elements",
    "attributes": "src\\resources\\attributes",
    "valueConverters": "src\\resources\\value-converters",
    "bindingBehaviors": "src\\resources\\binding-behaviors"
  },
  "build": {
    "targets": [
      {
        "id": "aspnetcore",
        "displayName": "ASP.NET Core",
        "output": "wwwroot\\scripts",
        "baseUrl": "scripts"
      }
    ],
    "loader": {
      "type": "require",
      "configTarget": "vendor-bundle.js",
      "includeBundleMetadataInConfig": "auto",
      "plugins": [
        {
          "name": "text",
          "extensions": [
            ".html",
            ".css"
          ],
          "stub": true
        }
      ]
    },
    "options": {
      "minify": "stage & prod",
      "sourcemaps": "dev & stage"
    },
    "bundles": [
      {
        "name": "app-bundle.js",
        "source": [
          "[**/*.js]",
          "**/*.{css,html}"
        ]
      },
      {
        "name": "vendor-bundle.js",
        "prepend": [
          "node_modules/bluebird/js/browser/bluebird.core.js",
          "wwwroot\\scripts/require.js"
        ],
        "dependencies": [
          "aurelia-binding",
          "aurelia-bootstrapper",
          "aurelia-dependency-injection",
          "aurelia-event-aggregator",
          "aurelia-framework",
          "aurelia-history",
          "aurelia-history-browser",
          "aurelia-loader",
          "aurelia-loader-default",
          "aurelia-logging",
          "aurelia-logging-console",
          "aurelia-metadata",
          "aurelia-pal",
          "aurelia-pal-browser",
          "aurelia-path",
          "aurelia-polyfills",
          "aurelia-route-recognizer",
          "aurelia-router",
          "aurelia-task-queue",
          "aurelia-templating",
          "aurelia-templating-binding",
          "aurelia-fetch-client",
          "extend",
          "aurelia-view-manager",
          {
            "name": "aurelia-validation",
            "path": "../node_modules/aurelia-validation/dist/amd",
            "main": "index"
          },
          {
            "name": "validate.js",
            "path": "../node_modules/validate.js",
            "main": "validate"
          },
          {
            "name": "aurelia-validatejs",
            "path": "../node_modules/aurelia-validatejs/dist/amd",
            "main": "aurelia-validatejs"
          },
          {
            "name": "aurelia-form",
            "path": "../node_modules/aurelia-form/dist/amd",
            "main": "aurelia-form",
            "resources": [
              "component/**/*.html"
            ]
          },
          "jquery",
          {
            "name": "bootstrap",
            "path": "../node_modules/bootstrap/dist",
            "main": "js/bootstrap.min",
            "deps": [ "jquery" ],
            "exports": "$",
            "resources": [
              "css/bootstrap.css"
            ]
          },
          {
            "name": "text",
            "path": "../wwwroot\\scripts/text"
          },
          {
            "name": "aurelia-templating-resources",
            "path": "../node_modules/aurelia-templating-resources/dist/amd",
            "main": "aurelia-templating-resources"
          },
          {
            "name": "aurelia-templating-router",
            "path": "../node_modules/aurelia-templating-router/dist/amd",
            "main": "aurelia-templating-router"
          },
          {
            "name": "aurelia-testing",
            "path": "../node_modules/aurelia-testing/dist/amd",
            "main": "aurelia-testing",
            "env": "dev"
          }
        ]
      }
    ]
  }
}

Any ideas?

Francis Omoruto Francis Omoruto · Accepted Answer · 2017-02-19T06:37:06

In case you are still looking for an answer, I would recommend you leave config.json the way the Aurelia-CLI creates it, and then publish to the wwwroot from Visual studio. Take a look at this one I have just generated.

{
  "name": "AuFormsEx",
  "type": "project:application",
  "platform": {
    "id": "aspnetcore",
    "displayName": "ASP.NET Core",
    "output": "scripts",
    "index": "index.html",
    "baseUrl": "scripts"
  },
  "transpiler": {
    "id": "typescript",
    "displayName": "TypeScript",
    "fileExtension": ".ts",
    "dtsSource": [
      "./typings/**/*.d.ts",
      "./custom_typings/**/*.d.ts"
    ],
    "source": "src/**/*.ts"
  },
  "markupProcessor": {
    "id": "none",
    "displayName": "None",
    "fileExtension": ".html",
    "source": "src/**/*.html"
  },
  "cssProcessor": {
    "id": "none",
    "displayName": "None",
    "fileExtension": ".css",
    "source": "src/**/*.css"
  },
  "editor": {
    "id": "visualstudio",
    "displayName": "Visual Studio"
  },
  "unitTestRunner": {
    "id": "none",
    "displayName": "None"
  },
  "paths": {
    "root": "src",
    "resources": "src/resources",
    "elements": "src/resources/elements",
    "attributes": "src/resources/attributes",
    "valueConverters": "src/resources/value-converters",
    "bindingBehaviors": "src/resources/binding-behaviors"
  },
  "build": {
    "targets": [
      {
        "id": "aspnetcore",
        "displayName": "ASP.NET Core",
        "output": "scripts",
        "index": "index.html",
        "baseUrl": "scripts"
      }
    ],
    "loader": {
      "type": "require",
      "configTarget": "vendor-bundle.js",
      "includeBundleMetadataInConfig": "auto",
      "plugins": [
        {
          "name": "text",
          "extensions": [
            ".html",
            ".css"
          ],
          "stub": true
        }
      ]
    },
    "options": {
      "minify": "stage & prod",
      "sourcemaps": "dev & stage"
    },
    "bundles": [
      {
        "name": "app-bundle.js",
        "source": [
          "[**/*.js]",
          "**/*.{css,html}"
        ]
      },
      {
        "name": "vendor-bundle.js",
        "prepend": [
          "node_modules/bluebird/js/browser/bluebird.core.js",
          "node_modules/requirejs/require.js"
        ],
        "dependencies": [
          "aurelia-binding",
          "aurelia-bootstrapper",
          "aurelia-dependency-injection",
          "aurelia-event-aggregator",
          "aurelia-framework",
          "aurelia-history",
          "aurelia-history-browser",
          "aurelia-loader",
          "aurelia-loader-default",
          "aurelia-logging",
          "aurelia-logging-console",
          "aurelia-metadata",
          "aurelia-pal",
          "aurelia-pal-browser",
          "aurelia-path",
          "aurelia-polyfills",
          "aurelia-route-recognizer",
          "aurelia-router",
          "aurelia-task-queue",
          "aurelia-templating",
          "aurelia-templating-binding",
          "text",
          {
            "name": "aurelia-templating-resources",
            "path": "../node_modules/aurelia-templating-resources/dist/amd",
            "main": "aurelia-templating-resources"
          },
          {
            "name": "aurelia-templating-router",
            "path": "../node_modules/aurelia-templating-router/dist/amd",
            "main": "aurelia-templating-router"
          },
          {
            "name": "aurelia-testing",
            "path": "../node_modules/aurelia-testing/dist/amd",
            "main": "aurelia-testing",
            "env": "dev"
          }
        ]
      }
    ]
  }
}

You are also mixing \\ and / path separators and that is not necessary. I hope this helps.

aurelia-forms bundling issue aurelia-cli

1 Answers