Aurelia 1.x Q&A - Sandbox at https://codesandbox.io/s/aurelia-javascript-sandbox-jnl6q85zq5
here is what i have now:
```export class App {
configureRouter( config, router )
{
config.title = 'ARIS';
config.options.pushState = true;
config.options.root = 'home';
config.map([
{route: '', name: 'home', moduleId: PLATFORM.moduleName('home'), nav: true, title: 'home'},
{route: 'search', moduleId: PLATFORM.moduleName('search'), nav: true,
title: 'Search/Worklist'},
]);
config.mapUnknownRoutes('home');
config.fallbackRoute('home');
this.router = router; }
}
```
and i am still getting the error, so i am confused as to what i need to actually change.
Error: Unable to find module with ID: app
at WebpackLoader.eval (aurelia-loader-webpack.js?e63c:197)
at step (aurelia-loader-webpack.js?e63c:41)
at Object.eval [as next] (aurelia-loader-webpack.js?e63c:22)
at eval (aurelia-loader-webpack.js?e63c:16)
at new Promise (<anonymous>)
at __awaiter (aurelia-loader-webpack.js?e63c:12)
at WebpackLoader._import (aurelia-loader-webpack.js?e63c:162)
at WebpackLoader.eval (aurelia-loader-webpack.js?e63c:262)
at step (aurelia-loader-webpack.js?e63c:41)
at Object.eval [as next] (aurelia-loader-webpack.js?e63c:22)if i change the line in main.js to this:
aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));i get the following error, and it appears to be complaining still about app?
aurelia-logging-console.js?dc89:45 ERROR [app-router] Error: Error invoking Home. Check the inner error for details.
------------------------------------------------
Inner Error:
Message: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
Inner Error Stack:
Error: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
at validateKey (webpack-internal:///3U8n:373:15)
at Container.get (webpack-internal:///3U8n:512:9)
at eval (webpack-internal:///3U8n:415:68)
at Array.map (<anonymous>)
at Object.invoke (webpack-internal:///3U8n:415:30)
at InvocationHandler.invoke (webpack-internal:///3U8n:389:28)
at Container.invoke (webpack-internal:///3U8n:575:28)
at StrategyResolver.get (webpack-internal:///3U8n:133:39)
at Container.get (webpack-internal:///3U8n:530:28)
at eval (webpack-internal:///hij8:4962:71)
End Inner Error Stacki can't find where the message is being generated so that i can figure out what the call is that is breaking things.
I am trying to use AJAX to get info from the database. I have set up login.pl and login. js, but all that happens is a reload of the page.
Here's my login.js -> login function:
login() {
if ( this.username && this.password )
{
$.ajax({
type: "GET",
url: "login.pl", // URL of the Perl script
contentType: "application/json; charset=utf-8",
dataType: "json",
// send username and password as parameters to the Perl script
data: "username=" + username + "&password=" + password,
// script call was *not* successful
error: function(XMLHttpRequest, textStatus, errorThrown) {
$('div#loginResult').text("responseText: " + XMLHttpRequest.responseText
+ ", textStatus: " + textStatus
+ ", errorThrown: " + errorThrown);
$('div#loginResult').addClass("error");
}, // error
// script call was successful
// data contains the JSON values returned by the Perl script
success: function(data){
if (data.error) { // script returned error
$('div#loginResult').text("data.error: " + data.error);
$('div#loginResult').addClass("error");
} // if
else { // login was successful
$('form#loginForm').hide();
$('div#loginResult').text("data.success: " + data.success
+ ", data.userid: " + data.userid);
$('div#loginResult').addClass("success");
} //else
} // success
}); // ajax
debugger;
} // if
else {
$('div#loginResult').text("enter username and password");
$('div#loginResult').addClass("error");
} // else
$('div#loginResult').fadeIn();
return false;
}
}now that i have ajax working, i'm getting an error in the console:
GET http://[localhost]:8080/login.pl?username=[object%20HTMLInputElement]&password=[object%20HTMLInputElement] 404 (Not Found)
my directory structure is:
src/
login.html
login.js
login.pl
i have tried in the url field:
/login.pl
./login.pl
login.pl
all give me the same 404 errors.
do i need to configure a route for this script? and if so, how do i go about doing that?
Hello guys,
I am trying to integrate aurelia app with Identityserver4. The issue arise with the redirecturi. I have simple page as callback as below -
view
<template>
<h1>${'Hello redirector'}</h1>
</template>
viewmodel
export class Callback {
// private _userManager: UserManager;
}So after the login when Identityserver redirects to callback.html its give error : Cannot GET /callback.html.
I have also tried and defined route
{
route: "child-router",
name: "child-router",
moduleId: "./child-router",
nav: true,
title: "Child Router",
}anyone have some inputs please let me know
:point_up: February 13, 2018 1:54 AM
@weoreference, and until we get scoped CSS in the browsers, we’ll have to continue doing what @MaximBalaganskiy does.
We use in the html the<require from=‘./custom.css’>approach though, keeping markup concerns in markup files.
@AStoker Thank you for letting me know
We have been using Aurelia since alpha, and are very pleased with the result. We got some big apps ready to migrate to Aurelia 2. I believe Aurelia 2 will be a great upgrade, and am very excited about any progress :D
@_ArchEnemy__gitlab - i am trying the fetch-client, but i still get a 404 error on the login.pl
here's the code for the fetch client:
import {HttpClient, json} from 'aurelia-fetch-client';
//import { responseTypeTransformer } from 'aurelia-http-client';
let httpClient = new HttpClient();
export class Login {
constructor() {
this.loginResponse = null;
this.login();
}
heading = 'Login';
username = '';
password = '';
login() {
if ( this.username && this.password )
{
var params = '?username=' + this.username + '&password=' + this.password;
var url = 'login.pl' + params;
httpClient.fetch(url)
.then( response => response.json())
.then(data => {
console.log(data);
});
}
}
}i also tried to configure the httpClient as follows:
httpClient.configure(config => {
config
.withBaseUrl('/')
.withDefaults({
credentials: 'same-origin',
headers: {
'Accept': 'application/json',
'X-Requested-With': 'Fetch'
}
})
});i've done the baseUrl with 'src/' and the '/' shown above. both give me the 404 error.
and configuring BaseUrl with the actual 'http://[localhost]:8080/' also gives the 404 error.
i feel like i am missing something basic that sets up where aurelia is looking for files?
@bigopon the error i get is the basic 404 - file not found. and it gives the url as: http://[localhost]:8080/login.pl, which is accurate.
and which place is best to ask my question? the discord server or the discourse?
Is there a way to bind to as-element? So frex instead of going:
<div as-element="title-listing" if.bind="type === 'title' && listing" listing.bind="listing"></div>
<div as-element="underlined-listing" if.bind="type === 'underlined' && listing" listing.bind="listing"></div>
doing:
<div as-element.bind="type" listing.bind="listing"></div> ?
1 reply
computedFrom('array.0') or computedFrom('array[0]')
This morning I have an error and can't run my app. So I updated node and also tried with a new app but get this error:
```
PS C:\DevTest\Aurelia\test13> au run
Local aurelia-cli v1.3.1
Starting 'readProjectConfiguration'...
INFO [Bundle] Manually adding package: 2.3.3 aurelia-bootstrapper
INFO [Bundle] Manually adding package: 1.2.1 aurelia-loader-default
INFO [Bundle] Manually adding package: 1.8.1 aurelia-pal-browser
INFO [Bundle] Manually adding package: 1.0.0 aurelia-testing
INFO [Bundle] Manually adding package: 2.0.16 text
Finished 'readProjectConfiguration'
Starting 'processMarkup'...
Starting 'processJson'...
Starting 'processCSS'...
Starting 'copyFiles'...
Starting 'configureEnvironment'...
Finished 'copyFiles'
Finished 'processJson'
Finished 'processCSS'
Finished 'processMarkup'
Finished 'configureEnvironment'
Starting 'buildTypeScript'...
Finished 'buildTypeScript'
Starting 'writeBundles'...
INFO [Bundler] Tracing files ...
INFO [Bundler] Auto tracing package: 1.0.3 aurelia-event-aggregator
INFO [Bundler] Auto tracing package: 1.3.1 aurelia-framework
INFO [Bundler] Auto tracing package: 1.4.0 aurelia-history-browser
INFO [Bundler] Auto tracing package: 1.0.2 aurelia-loader
INFO [Bundler] Auto tracing package: 1.1.1 aurelia-logging-console
INFO [Bundler] Auto tracing package: 1.0.6 aurelia-metadata
INFO [Bundler] Auto tracing package: 1.8.2 aurelia-pal
INFO [Bundler] Auto tracing package: 1.3.4 aurelia-polyfills
INFO [Bundler] Auto tracing package: 1.5.3 aurelia-templating-binding
INFO [Bundler] Auto tracing package: 1.13.0 aurelia-templating-resources
INFO [Bundler] Auto tracing package: 1.4.0 aurelia-templating-router
INFO [Bundler] Auto tracing package: 2.5.4 aurelia-binding
INFO [Bundler] Auto tracing package: 1.5.2 aurelia-dependency-injection
INFO [Bundler] Auto tracing package: 1.2.1 aurelia-history
INFO [Bundler] Auto tracing package: 1.5.2 aurelia-logging
INFO [Bundler] Auto tracing package: 1.1.5 aurelia-path
INFO [Bundler] Auto tracing package: 1.7.1 aurelia-router
INFO [Bundler] Auto tracing package: 1.3.3 aurelia-task-queue
INFO [Bundler] Auto tracing package: 1.10.3 aurelia-templating
INFO [Bundler] Auto tracing package: 1.3.2 aurelia-route-recognizer
INFO [Bundle] Writing app-bundle.js...
INFO [Bundle] Writing vendor-bundle.js...
Finished 'writeBundles'
Application Available At: http://localhost:9000
BrowserSync Available At: http://localhost:3001
events.js:287
throw er; // Unhandled 'error' event
^
Error: listen EACCES: permission denied 0.0.0.0:3001
at Server.setupListenHandle [as _listen2] (net.js:1296:21)
at listenInCluster (net.js:1361:12)
at Server.listen (net.js:1449:7)
at Object.startServer [as fn] (C:\DevTest\Aurelia\test13\node_modules\browser-sync-ui\lib\async.js:123:39)
at C:\DevTest\Aurelia\test13\node_modules\browser-sync-ui\lib\UI.js:184:14
at iterate (C:\DevTest\Aurelia\test13\node_modules\async-each-series\index.js:8:5)
at C:\DevTest\Aurelia\test13\node_modules\async-each-series\index.js:16:16
at C:\DevTest\Aurelia\test13\node_modules\browser-sync-ui\lib\UI.js:192:13
at Object.setUrlOptions [as fn] (C:\DevTest\Aurelia\test13\node_modules\browser-sync-ui\lib\async.js:76:9)
at C:\DevTest\Aurelia\test13\node_modules\browser-sync-ui\lib\UI.js:184:14
Emitted 'error' event on Domain instance at:
at Server.EventEmitter.emit (domain.js:500:12)
at emitErrorNT (net.js:1340:8)
at processTicksAndRejections (internal/process/task_queues.js:84:21) {
code: 'EACCES',
errno: 'EACCES',
syscall: 'listen',
address: '0.0.0.0',
port: 3001,
domainEmitter: Server {
insecureHTTPParser: undefined,
_events: [Object: null prototype] {
request: [Function],
connection: [Array]
},
_eventsCount: 2,
_maxListeners: undefined,
_connections: 0,
_handle: null,
_usingWorkers: false,
_workers: [],
_unref: false,
allowHalfOpen: true,
pauseOnConnect: false,
ht
tpAllowHalfOpen: false,
timeout: 120000,
keepAliveTimeout: 5000,
maxHeadersCount: null,
headersTimeout: 40000,
destroy: [Function],
[Symbol(IncomingMessage)]: [Function: IncomingMessage],
[Symbol(ServerResponse)]: [Function: ServerResponse],
[Symbol(kCapture)]: false,
[Symbol(asyncId)]: -1 },
domainThrown: false
}
The -by far- easiest solution is to just change the browsersync UI port number to something else:
1: open run.ts in aurelia_projects/tasks
2:
let serve = gulp.series(build, done => {
bs.init(
{
ui: { // <===
port: 8080, // <=== your preference
}, // <===
online: false,
open: CLIOptions.hasFlag("open") || project.platform.open,
...
