How to use breeze in aurelia? - breeze

Question

I am new to aurelia, and I use the skeleton-typescript-aspnetcore skeleton project to build my first application. The skeleton works fine, but when I followed aurelia-breeze plugin guide to integrate it to my application, I use
import breeze from 'breeze';
on a ts file, but there is an error: cannot find module 'breeze'. I googled so much that someone mentioned the d.ts file is missing, and I copy it from git(https://github.com/jdanyow/aurelia-breeze/blob/master/dist/aurelia-breeze.d.ts) to typings folder, but the d.ts file rose an other error in the first line, cannot find module 'breeze-client':
import breeze from 'breeze-client';
I checked the nmp folder(wwwroot/nmp), both aurelia-breeze and breeze-client are there,also, the same in package.json.
I compared the aurelia-breeze.d.ts with other d.ts file under typings folder,
the files come with the skeleton all named index.d.ts, and with a typings.json for decalaration.
So I suppose the error should be caused by typings configuration, and I Googled for a long time, but there is no answer, can you tell me how to make it work? thanks in advance.

Answer 1

I don't use TypeScript in my Aurelia app but I had the same problem integrating breeze. In the end I solved it (or rather found this workaround) by adding it as a simple script instead of loading it from the node_modules (or jspm_packages, depending which one you use).
This is my new main.js file:
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.plugin('aurelia-knockout');
return aurelia.start().then(() => {
require(["../scripts/lib/breeze.debug"], function(breeze) {
require([
"../scripts/lib/breeze.savequeuing",
], function(savequeuing){
aurelia.setRoot();
});
});
});
}
Hope this helps. In my case I even integrate the breeze.savequeuing plugin of breeze after breeze itself has been loaded. There are probably better ways to do this though.
Also notice I use "require" as the module loader. I use the Aurelia CLI so I have set it in the aurelia.json file under "build" like this:
"loader": {
"type": "require",
"configTarget": "vendor-bundle.js",
"includeBundleMetadataInConfig": "auto",
"config": {
"waitSeconds": 0,
"paths": {
"jquery": "../scripts/lib/cdn/jquery-3.1.0.min",
"knockout": "../scripts/lib/knockout-3.4.0"
}
},
....
}
and under "bundles" like this:
{
"name": "vendor-bundle.js",
"prepend": [
"node_modules/bluebird/js/browser/bluebird.core.js",
"scripts/lib/require.js"
],
...
}

Answer 2

To use breezejs client with aurelia you must do as follows
Install the required packages.
npm install breeze-client --save
npm install aurelia-breeze --save
Configure dependencies on your module loader.
In my case, I am using amd with requirejs thus the dependencies will be as follows...
paths...
"aurelia-breeze":'../node_modules/aurelia-breeze/dist/amd/aurelia-breeze'
"breeze-client": '../node_modules/breeze-client/breeze.base.min'
"breeze.modelLibrary": '../node_modules/breeze-client/breeze.modelLibrary.backingStore'
"breeze.dataService": '../node_modules/breeze-client/breeze.dataService.webApi'
"breeze.uriBuilder": '../node_modules/breeze-client/breeze.uriBuilder.json'
shims...
'aurelia-breeze': {
exports: 'BreezeObjectObserver',
deps: ['breeze-client', 'breeze.modelLibrary', 'breeze.dataService', 'breeze.uriBuilder']
}
'breeze-client': {
exports: 'breeze'
}
(requirejs config.js file and aurelia.json full files included below)
Import and initialize the library on your TypeScript project as you need
import * as breeze from 'breeze-client'
breeze.NamingConvention.camelCase.setAsDefault();
breeze.config.initializeAdapterInstance('modelLibrary',
'backingStore', true);
It´s done!! you can now use breeze. i.e.
const entityManager = new
EntityManager'http://zzaapi.azurewebsites.net/breeze/zza') const
entityQuery = EntityQuery.from(‘Customers’);
entityManager.executeQuery(entityQuery).then(queryResult =>
console.log(queryResult.results));
(from Brian Noyes excellent course on https://www.pluralsight.com/courses/building-data-centric-apps-angular-breezejs)
PS: I will post the full content of my requirejs config.js file and also the aurelia.json for aurelia cli build, take look and notice prepends, preload and shims.
//-------------------config.js----------------------------------------------
require.config(
{
baseUrl: 'src',
paths: {
pipelines: 'resources/pipelines',
templates: 'resources/templates',
interceptors: 'resources/interceptors',
bluebird: '../node_modules/bluebird/js/browser/bluebird.min',
bootstrap: '../node_modules/bootstrap/dist/js/bootstrap.min',
"aurelia-animator-css": '../node_modules/aurelia-animator-css/dist/amd/aurelia-animator-css',
"aurelia-binding": '../node_modules/aurelia-binding/dist/amd/aurelia-binding',
"aurelia-bootstrapper": '../node_modules/aurelia-bootstrapper/dist/amd/aurelia-bootstrapper',
"aurelia-breeze": '../node_modules/aurelia-breeze/dist/amd/aurelia-breeze',
"aurelia-computed": '../node_modules/aurelia-computed/dist/amd/aurelia-computed',
"aurelia-dependency-injection": '../node_modules/aurelia-dependency-injection/dist/amd/aurelia-dependency-injection',
"aurelia-event-aggregator": '../node_modules/aurelia-event-aggregator/dist/amd/aurelia-event-aggregator',
"aurelia-fetch-client": '../node_modules/aurelia-fetch-client/dist/amd/aurelia-fetch-client',
"aurelia-framework": '../node_modules/aurelia-framework/dist/amd/aurelia-framework',
"aurelia-history": '../node_modules/aurelia-history/dist/amd/aurelia-history',
"aurelia-history-browser": '../node_modules/aurelia-history-browser/dist/amd/aurelia-history-browser',
"aurelia-http-client": '../node_modules/aurelia-http-client/dist/amd/aurelia-http-client',
"aurelia-loader": '../node_modules/aurelia-loader/dist/amd/aurelia-loader',
"aurelia-loader-default": '../node_modules/aurelia-loader-default/dist/amd/aurelia-loader-default',
"aurelia-logging": '../node_modules/aurelia-logging/dist/amd/aurelia-logging',
"aurelia-logging-console": '../node_modules/aurelia-logging-console/dist/amd/aurelia-logging-console',
"aurelia-metadata": '../node_modules/aurelia-metadata/dist/amd/aurelia-metadata',
"aurelia-pal": '../node_modules/aurelia-pal/dist/amd/aurelia-pal',
"aurelia-pal-browser": '../node_modules/aurelia-pal-browser/dist/amd/aurelia-pal-browser',
"aurelia-path": '../node_modules/aurelia-path/dist/amd/aurelia-path',
"aurelia-polyfills": '../node_modules/aurelia-polyfills/dist/amd/aurelia-polyfills',
"aurelia-router": '../node_modules/aurelia-router/dist/amd/aurelia-router',
"aurelia-route-recognizer": '../node_modules/aurelia-route-recognizer/dist/amd/aurelia-route-recognizer',
"aurelia-task-queue": '../node_modules/aurelia-task-queue/dist/amd/aurelia-task-queue',
"aurelia-templating": '../node_modules/aurelia-templating/dist/amd/aurelia-templating',
"aurelia-templating-binding": '../node_modules/aurelia-templating-binding/dist/amd/aurelia-templating-binding',
"breeze-client": '../node_modules/breeze-client/breeze.base.min',
"breeze.modelLibrary": '../node_modules/breeze-client/breeze.modelLibrary.backingStore',
"breeze.dataService": '../node_modules/breeze-client/breeze.dataService.webApi',
"breeze.uriBuilder": '../node_modules/breeze-client/breeze.uriBuilder.json',
jquery: '../node_modules/jquery/dist/jquery.min',
lodash: '../node_modules/lodash/lodash.min',
moment: '../node_modules/moment/min/moment-with-locales.min',
numeral: '../node_modules/numeral/min/numeral.min',
pouchdb: '../node_modules/pouchdb/dist/pouchdb.min',
text: '../node_modules/text/text',
toastr: '../node_modules/toastr/build/toastr.min',
"jquery-ui": '../node_modules/jquery-ui/dist/jquery-ui.min'
},
packages: [
{
name: 'aurelia-dialog',
location: '../node_modules/aurelia-dialog/dist/amd',
main: 'aurelia-dialog'
},
{
name: 'aurelia-templating-resources',
location: '../node_modules/aurelia-templating-resources/dist/amd',
main: 'aurelia-templating-resources'
},
{
name: 'aurelia-templating-router',
location: '../node_modules/aurelia-templating-router/dist/amd',
main: 'aurelia-templating-router'
},
{
name: 'aurelia-testing',
location: '../node_modules/aurelia-testing/dist/amd',
main: 'aurelia-testing'
},
{
name: 'aurelia-validation',
location: '../node_modules/aurelia-validation/dist/amd',
main: 'aurelia-validation'
},
{
name: 'popper.js',
location: '../node_modules/popper.js/dist/umd/',
main: 'popper.min'
}
],
shim: {
'aurelia-breeze': {
exports: 'BreezeObjectObserver',
deps: ['breeze-client', 'breeze.modelLibrary', 'breeze.dataService', 'breeze.uriBuilder']
},
'breeze-client': {
exports: 'breeze'
},
bootstrap: {
exports: '$.fn.button',
deps: ['jquery', 'popper.js']
},
jquery: {
exports: '$'
},
"jquery-ui": {
exports: '$.autocomplete',
deps: ['jquery']
},
lodash: {
exports: '_'
},
"popper.js": {
exports: 'Popper'
},
toastr: {
deps: ['jquery']
}
}
});
require(['aurelia-bootstrapper']);
//-------------------aurelia.json----------------------------------------------
{
"name": "mgame",
"type": "project:application",
"bundler": {
"id": "cli",
"displayName": "Aurelia-CLI"
},
"platform": {
"id": "aspnetcore",
"displayName": "ASP.NET Core",
"index": "index.html",
"baseDir": ".",
"output": "dist"
},
"transpiler": {
"id": "typescript",
"displayName": "TypeScript",
"fileExtension": ".ts",
"dtsSource": [ "./custom_typings/**/*.d.ts" ],
"source": "src/**/*.ts"
},
"markupProcessor": {
"id": "maximum",
"displayName": "Maximum Minification",
"fileExtension": ".html",
"source": "src/**/*.html"
},
"cssProcessor": {
"id": "sass",
"displayName": "Sass",
"fileExtension": ".scss",
"source": "src/**/*.scss"
},
"editor": {
"id": "visualstudio",
"displayName": "Visual Studio"
},
"testFramework": {
"id": "jasmine",
"displayName": "Jasmine"
},
"unitTestRunner": {
"id": "karma",
"displayName": "Karma",
"source": "test/unit/**/*.ts"
},
"e2eTestRunner": {
"id": "protractor",
"displayName": "Protractor",
"source": "test/e2e/src/**/*.ts",
"dist": "test/e2e/dist/",
"typingsSource": [ "node_modules//#types/**/*.d.ts", "custom_typings/**/*.d.ts" ]
},
"paths": {
"root": "src",
"resources": "resources",
"elements": "resources/elements",
"pipelines": "resources/pipelines",
"templates": "resources/templates",
"attributes": "resources/attributes",
"interceptors": "resources/interceptors",
"valueConverters": "resources/converters",
"bindingBehaviors": "resources/behaviors",
"assets": [
{
"src": "node_modules/jquery-ui/dist/images/*",
"dest": "/../images"
},
{
"src": "node_modules/font-awesome/css/font-awesome.min.css",
"dest": "/css"
},
{
"src": "node_modules/font-awesome/fonts/*",
"dest": "/fonts"
}
]
},
"build": {
"targets": [
{
"id": "aspnetcore",
"displayName": "ASP.NET Core",
"index": "index.html",
"baseDir": ".",
"output": "dist"
}
],
"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.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/requirejs/require.js"
],
"dependencies": [
"jquery",
"lodash",
"moment",
"numeral",
"text",
{
"name": "aurelia-animator-css",
"path": "../node_modules/aurelia-animator-css/dist/amd",
"main": "aurelia-animator-css"
},
{
"name": "aurelia-binding",
"path": "../node_modules/aurelia-binding/dist/amd",
"main": "aurelia-binding"
},
{
"name": "aurelia-bootstrapper",
"path": "../node_modules/aurelia-bootstrapper/dist/amd",
"main": "aurelia-bootstrapper"
},
{
"name": "aurelia-breeze",
"path": "../node_modules/aurelia-breeze/dist/amd",
"main": "aurelia-breeze",
"exports": "BreezeObjectObserver",
"deps": [ "breeze-client", "breeze.modelLibrary", "breeze.dataService", "breeze.uriBuilder" ]
},
{
"name": "aurelia-computed",
"path": "../node_modules/aurelia-computed/dist/amd",
"main": "aurelia-computed"
},
{
"name": "aurelia-dependency-injection",
"path": "../node_modules/aurelia-dependency-injection/dist/amd",
"main": "aurelia-dependency-injection"
},
{
"name": "aurelia-dialog",
"path": "../node_modules/aurelia-dialog/dist/amd",
"main": "aurelia-dialog"
},
{
"name": "aurelia-event-aggregator",
"path": "../node_modules/aurelia-event-aggregator/dist/amd",
"main": "aurelia-event-aggregator"
},
{
"name": "aurelia-fetch-client",
"path": "../node_modules/aurelia-fetch-client/dist/amd",
"main": "aurelia-fetch-client"
},
{
"name": "aurelia-framework",
"path": "../node_modules/aurelia-framework/dist/amd",
"main": "aurelia-framework"
},
{
"name": "aurelia-history",
"path": "../node_modules/aurelia-history/dist/amd",
"main": "aurelia-history"
},
{
"name": "aurelia-history-browser",
"path": "../node_modules/aurelia-history-browser/dist/amd",
"main": "aurelia-history-browser"
},
{
"name": "aurelia-http-client",
"path": "../node_modules/aurelia-http-client/dist/amd",
"main": "aurelia-http-client"
},
{
"name": "aurelia-loader",
"path": "../node_modules/aurelia-loader/dist/amd",
"main": "aurelia-loader"
},
{
"name": "aurelia-loader-default",
"path": "../node_modules/aurelia-loader-default/dist/amd",
"main": "aurelia-loader-default"
},
{
"name": "aurelia-logging",
"path": "../node_modules/aurelia-logging/dist/amd",
"main": "aurelia-logging"
},
{
"name": "aurelia-logging-console",
"path": "../node_modules/aurelia-logging-console/dist/amd",
"main": "aurelia-logging-console"
},
{
"name": "aurelia-metadata",
"path": "../node_modules/aurelia-metadata/dist/amd",
"main": "aurelia-metadata"
},
{
"name": "aurelia-pal",
"path": "../node_modules/aurelia-pal/dist/amd",
"main": "aurelia-pal"
},
{
"name": "aurelia-pal-browser",
"path": "../node_modules/aurelia-pal-browser/dist/amd",
"main": "aurelia-pal-browser"
},
{
"name": "aurelia-path",
"path": "../node_modules/aurelia-path/dist/amd",
"main": "aurelia-path"
},
{
"name": "aurelia-polyfills",
"path": "../node_modules/aurelia-polyfills/dist/amd",
"main": "aurelia-polyfills"
},
{
"name": "aurelia-router",
"path": "../node_modules/aurelia-router/dist/amd",
"main": "aurelia-router"
},
{
"name": "aurelia-route-recognizer",
"path": "../node_modules/aurelia-route-recognizer/dist/amd",
"main": "aurelia-route-recognizer"
},
{
"name": "aurelia-task-queue",
"path": "../node_modules/aurelia-task-queue/dist/amd",
"main": "aurelia-task-queue"
},
{
"name": "aurelia-templating",
"path": "../node_modules/aurelia-templating/dist/amd",
"main": "aurelia-templating"
},
{
"name": "aurelia-templating-binding",
"path": "../node_modules/aurelia-templating-binding/dist/amd",
"main": "aurelia-templating-binding"
},
{
"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"
},
{
"name": "aurelia-validation",
"path": "../node_modules/aurelia-validation/dist/amd",
"main": "aurelia-validation"
},
{
"name": "bluebird",
"path": "../node_modules/bluebird/js/browser",
"main": "bluebird.min"
},
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": [ "jquery", "popper.js" ],
"exports": "$.fn.button",
"resources": [
"css/bootstrap.min.css"
]
},
{
"name": "breeze-client",
"path": "../node_modules/breeze-client",
"main": "breeze.base.min",
"exports": "breeze"
},
{
"name": "breeze.modelLibrary",
"path": "../node_modules/breeze-client",
"main": "breeze.modelLibrary.backingStore"
},
{
"name": "breeze.dataService",
"path": "../node_modules/breeze-client",
"main": "breeze.dataService.webApi"
},
{
"name": "breeze.uriBuilder",
"path": "../node_modules/breeze-client",
"main": "breeze.uriBuilder.json"
},
{
"name": "jquery-ui",
"path": "../node_modules/jquery-ui/dist",
"main": "jquery-ui.min",
"deps": [ "jquery" ],
"exports": "$.autocomplete",
"resources": [ "jquery-ui.min.css" ]
},
{
"name": "popper.js",
"path": "../node_modules/popper.js/dist/umd",
"main": "popper.min",
"exports": "Popper"
},
{
"name": "pouchdb",
"path": "../node_modules/pouchdb/dist",
"main": "pouchdb.min"
},
{
"name": "toastr",
"path": "../node_modules/toastr",
"main": "toastr",
"deps": [ "jquery" ],
"resources": [ "build/toastr.min.css" ]
}
]
}
]
}
}