I'm trying to include aurelia-tabbed in my aurelia project (of which I think I have the latest version, but I can't find a version number anywhere). I have a problem however, because I'm using a bundle of my app and vendor js, and I don't know how to include the package.
I've tried adding this in my aurelia.json in build > bundles > (vendor) > dependencies:
{
"name": "aurelia-tabbed",
"path": "../node_modules/aurelia-tabbed/dist/amd",
"main": "index",
"resources": ["assets/tabs.css"]
},
However, while this compiles, I cannot run the webpage. It gives me errors in the console (even before I add any of the tabbed tags):
DEBUG [aurelia] Configured plugin aurelia-tabbed.
vendor-bundle.js:5700 GET http://localhost:9001/analysis/test-page/node_modules/aurelia-tabbed/dist/amd/tab-headers.js
vendor-bundle.js:5700 GET http://localhost:9001/analysis/test-page/node_modules/aurelia-tabbed/dist/amd/tabs-wrapper.js
vendor-bundle.js:5700 GET http://localhost:9001/analysis/test-page/node_modules/aurelia-tabbed/dist/amd/tab-content.js
vendor-bundle.js:1395 Unhandled rejection Error: Script error for "aurelia-tabbed/tab-headers"
http://requirejs.org/docs/errors.html#scripterror
at makeError (http://localhost:9001/scripts/vendor-bundle.js:3907:17)
at HTMLScriptElement.onScriptError (http://localhost:9001/scripts/vendor-bundle.js:5477:36)
The three calls all result in 404's (which is normal, because the node_modules path is located at the root).
However: why are the three calls even made? Aren't the files supposed to be bundled?
In your aurelia.json file, you need to list all resources of the plugin. Try the following:
{
"name": "aurelia-tabbed",
"path": "../node_modules/aurelia-tabbed/dist/amd",
"main": "index",
"resources": [
"tab-content.html",
"tab-headers.html",
"tabs-wrapper.html",
"assets/tabs.css"
]
},
Related
I configured a Vue.js project with Electron using Electron Builder and I can1t debug it.
If I run my electron:serve script (which calls vue-cli-service electron:serve) in "Run and Debug" of VS it runs my app correctly, but sets the breakpoints of my main file (background.js), and any other, as unbound, as you can see in the image bellow:
I tried also to set launch.json with a "node.js electron main" config. But when I run debugger with this config it doesn't find the electron app at main.js, probably because main.js is a vue app.
{
"version": "0.2.0",
"configurations": [
{
"name": "Electron Main",
"program": "${workspaceFolder}/main.js",
"request": "launch",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"skipFiles": [
"<node_internals>/**"
],
"type": "node"
},
And if I exchange the main.js in this config to background.js it also doesn't find.
I set breakpoint at background.js line 13. And in main.js also.
I tried this config of launch.json also. Note that in cwd I have the path to my src folder, where I have the electron file, background.js, and stills it says that it did not find. I tried without the / after src also:
Here's my repository.
So, i'm trying to get aurelia-ux to work but am unable to.
There is a demo application, but that one is based on 0.3 while 0.6.1 exists. And it seems quite some stuff changed.
The latest npm package for aurelia-ux that exists is 0.3.0, so I guess that is not the one to use. A package aurelia-ux/components seems the one to use.. for that one exists a 0.6.1 package.
So I added to my package.json:
"dependencies": {
"#aurelia-ux/components": "^0.6.1",
And to my aurelia.json:
{
"name": "aurelia-ux",
"path": "../node_modules/#aurelia-ux/components/dist/amd",
"main": "index",
"resources": ["**/*.{css,html}"]
}
And this gives me this in my build output:
Tracing aurelia-ux...
------- File not found or not accessible ------
| Location: C:/Work/Dat/AuFront/src/#aurelia-ux/button.js|
| Requested by: C:\Work\Dat\AuFront\node_modules\#aurelia-ux\components\dist\amd\index.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
So this looks like some kind of path reference problem? Is there someone with a working example?
So, the trick is to include this npm package:
#aurelia-ux/components
And in the Aurelia.json add this:
{
"name": "#aurelia-ux/core",
"path": "../node_modules/#aurelia-ux/core/dist/amd",
"main": "index",
"resources": ["**/*.{css,html}"]
},
And then every component you want to use, like so:
{
"name": "#aurelia-ux/button",
"path": "../node_modules/#aurelia-ux/button/dist/amd",
"main": "index",
"resources": ["**/*.{css,html}"]
},
Then, use it on your main.ts like this:
.plugin('#aurelia-ux/core')
.plugin('#aurelia-ux/button')
I use Polymer 2.0 and my build setting is:
"builds": [
{
"name": "bundled",
"bundle": true,
"js": { "compile": true},
"css": { "minify": true },
"html": { "minify": true }
}]
I get "Can’t find variable: babelHelpers" error after build.
The Polymer CLI version that I use is 1.1.0.
EDIT: I was using polymer-cli locally. After installing latest polymer-cli globally, now I get “Constructor requires ‘new’ operator” on safari and “Failed to construct ‘HTMLElement’: Please use the ‘new’ operator, this DOM object constructor cannot be called as a function.” on chrome.
EDIT2: used webcomponents-loader.js instead of webcomponents-lite.js and my problem solved.
I was getting same error. Problem was that index.html is technically my entrypoint in my polymer.json config, but my actual served up entrypoint is another file that comes from my server (_Layout.cshtml since I'm using .NET on my backend). What I needed to do was take the code in my compiled index.html file and move it over to my CSHTML file once I set "compile": true. Problem solved.
I am trying to get the Amazon Cognito Identity SDK working in Aurelia. I do not have a lot of Javascript experience and am very unfamiliar with the various dependency systems.
I installed the Cognito SDK using: npm install --save amazon-cognito-identity-js
I then edited my aurelia_project/aurelia.json file as suggested in the Aurelia documentation to include a new client library dependency in build.bundles vendor-bundle dependencies:
"sjcl",
"jsbn",
{
"name": "aws-sdk",
"path": "../node_modules/aws-sdk/",
"main": "dist/aws-sdk"
},
{
"name": "amazon-cognito-identity-js",
"path": "../node_modules/amazon-cognito-identity-js/dist",
"main": "amazon-cognito-identity.min"
}
However, when I try to run the code using au run I get the error: Error: ENOENT: no such file or directory, open '/Users/nathanskone/Projects/scc/aurelia-app/src/xmlbuilder.js'
I have tried to include xmlbuilder in my aurelia.json to no avail. When it is included I end up getting this error about lodash: Error: ENOENT: no such file or directory, open '/Users/nathanskone/Projects/scc/aurelia-app/src/lodash/object/assign.js'
I haven't found any way to get past the lodash error.
Is there anyone out there familiar with the Aurelia dependency system that could help?
Thanks,
Nathan
EDIT #2: While I got past the xmlbuilder/lodash errors, I have run into further errors trying to bundle the aws-sdk. Here is my current aurelia.json:
"dependencies": [
{
"name": "xmlbuilder",
"path": "../node_modules/xmlbuilder/lib",
"main": "index"
},
{
"name": "aws-sdk",
"path": "../node_modules/aws-sdk",
"main": "index",
"resources": ["lib/region_config.json"]
},
And the error I am currently getting:
Error: ENOENT: no such file or directory, open '/Users/nathanskone/Projects/scc/aurelia-app/src/crypto.js'
If I remove the resources (lib/region_config.json) then I get this error instead:
Error: ENOENT: no such file or directory, open '/Users/nathanskone/Projects/scc/aurelia-app/node_modules/aws-sdk/lib/region_config.json.js'
I think crypto is actually an object defined in aws-sdk/lib/util.js, which is required by aws-sdk/lib/region_config.js.
Try the compiled library instead, using the compiled lib bundled just fine.
Also the library seems to define window.AWS, so injecting it or not will work
{
"name": "aws-sdk",
"path": "../node_modules/aws-sdk/dist",
"main": "aws-sdk.min",
"exports": "AWS"
}
UPDATE:
It seems the only way to import those libraries is by using the prepend section, the libraries write to the window variable so it can still be accesible to your app scripts, only by not importing them like ES6 modules.
"prepend": [
"node_modules/aws-sdk/dist/aws-sdk.min.js",
"node_modules/amazon-cognito-identity-js/dist/aws-cognito-sdk.min.js",
"node_modules/amazon-cognito-identity-js/dist/amazon-cognito-identity.min.js",
"node_modules/bluebird/js/browser/bluebird.core.js",
"scripts/require.js"
],
I'm trying to get Durandal.js optimizer working on my test project, but it seems to generate nothing to main-built.js. I use the following command from node.js command prompt, in durandal/amd folder:
optimizer.exe --verbose true
Result is
Using default base configuration.
Configuring for deploy with almond (custom).
{
"name": "durandal/amd/almond-custom",
"inlineText": true,
"stubModules": [
"durandal/amd/text"
],
"paths": {
"text": "durandal/amd/text"
},
"baseUrl": "C:\\Users\\Tommi Gustafsson\\Documents\\Visual Studio 2012\\Projects\\DurandalTests\\DurandalTest1\\TestApp",
"mainConfigFile": "C:\\Users\\Tommi Gustafsson\\Documents\\Visual Studio 2012\\Projects\\DurandalTests\\DurandalTest1\\TestApp\\main.js",
"include": [
"main-built",
"main",
"bindings/tinymce-binding",
"durandal/app",
"durandal/composition",
"durandal/events",
"durandal/http",
"text!durandal/messageBox.html",
"durandal/messageBox",
"durandal/modalDialog",
"durandal/system",
"durandal/viewEngine",
"durandal/viewLocator",
"durandal/viewModel",
"durandal/viewModelBinder",
"durandal/widget",
"durandal/plugins/router",
"durandal/transitions/entrance",
"raphael-amd/eve.0.3.4",
"raphael-amd/raphael.2.1.0.amd",
"raphael-amd/raphael.2.1.0.core",
"raphael-amd/raphael.2.1.0.svg",
"raphael-amd/raphael.2.1.0.vml",
"viewmodels/flickr",
"viewmodels/modal1",
"viewmodels/myPage",
"viewmodels/shell",
"viewmodels/welcome",
"text!views/detail.html",
"text!views/flickr.html",
"text!views/modal1.html",
"text!views/myPage.html",
"text!views/shell.html",
"text!views/welcome.html"
],
"exclude": [],
"keepBuildDir": true,
"optimize": "uglify2",
"out": "C:\\Users\\Tommi Gustafsson\\Documents\\Visual Studio 2012\\Projects\\DurandalTests\\DurandalTest1\\TestApp\\main-built.js",
"pragmas": {
"build": true
},
"wrap": true,
"insertRequire": [
"main"
]
}
Deleting old output file.
Tracing dependencies for: durandal/amd/almond-custom
Then, when I check main-built.js, it is empty. Can anyone help me what is the problem? I have several AMD modules in the test project, including Raphael.js AMD modules.
My requirejs configuration looks like this:
requirejs.config({
paths: {
'text': 'durandal/amd/text',
'eve': './raphael-amd/eve.0.3.4',
'raphael.core': './raphael-amd/raphael.2.1.0.core',
'raphael.svg': './raphael-amd/raphael.2.1.0.svg',
'raphael.vml': './raphael-amd/raphael.2.1.0.vml',
'raphael': './raphael-amd/raphael.2.1.0.amd',
'tinymce': "../Scripts/tinymce/jquery.tinymce.min"
}
});
In the same amd folder, where optimizer is stored, try running node r.js -o app.build.js. I've seen r.js sometimes choke about some dependencies, which resolves without problem when loading via require.js. For whatever reason the error messages won't show up when using optimizer --verbose. Typically the error message provides enough information to see where this occurs and if you've to update require.contig.paths or a specific define dependency.