Aurelia 1.x Q&A - Sandbox at https://codesandbox.io/s/aurelia-javascript-sandbox-jnl6q85zq5
dependabot[bot] on npm_and_yarn
chore(deps): bump socket.io fro… (compare)
EisenbergEffect on master
doc: new one time backer (compare)
mapUnknownRoutes
is the path to the view model you want to use, not a redirect URL
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 Stack
i 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
@_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?