How to use breeze in aurelia?
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.
2 answers
solution1
0 2016-12-02 10:27:05
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"
],
...
}
solution2
0 2018-01-03 17:15:04
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. ie
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" ]
}
]
}
]
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Unit Test Breeze calls for Aurelia
How to use Breeze IQueryable with CORS?
How to use Laravel sanctum with Breeze
How to use predicates on expanded entities in breeze
How to use subqueries with Breeze.js
How to use Breeze with multiple Entity Framework Contexts
Breeze Datatype.Binary: what is it for and how to use it?
How to use Breeze with Generic Unit of Work and Repositories?
How to use Breeze Js with DevForce services
How to use Bootstrape in breeze in laravel 9 and vite
Related Tags