trying run an aurelia v1.0.1 app in safari gives me a very strange error.
Error: eval#[native code]
promiseReactionJob#[native code]
Evaluating http://localhost:8080/app/src/main.js
Error loading http://localhost:8080/app/src/main.js — system.src.js:5031
I tried adding the aurelia-polyfills but that id not do the trick.
main.js looks like
import "aurelia-polyfills";
export function configure(aurelia) {
return new Promise((resolve) => {
aurelia.use
.standardConfiguration()
.developmentLogging();
aurelia.start().then(() => {
aurelia.setRoot();
resolve();
});
});
}
In chrome and firefox everything is fine.
Any ideas?
ps, the systemjs code that the error refers to is
else if (typeof importScripts !== 'undefined') {
var basePath = '';
try {
throw new Error('_');
} catch (e) {
e.stack.replace(/(?:at|#).*(http.+):[\d]+:[\d]+/, function(m, url) {
$__curScript = { src: url };
basePath = url.replace(/\/[^\/]*$/, '/');
});
}
if (doPolyfill)
importScripts(basePath + 'system-polyfills.js');
bootstrap();
}
else {
$__curScript = typeof __filename != 'undefined' ? { src: __filename } : null;
bootstrap();
}
The second last line "bootstrap()" being the line refered to by the error.enter code here
I installed chrome os and got a better error.
It turns out that the code typescript is generating is es2015 so it was the arrow functions causing the issue.
Transpiling it to es5 solved the problem.
Related
I have compiled the C code using this command emcc add.c -o js_plumbing.js -s -s EXTRA_EXPORTED_RUNTIME_METHODS=['ccall','cwrap'] -s MODULARIZE=1
This is my Vue component code -
public instance:any = {
ready: new Promise(resolve => {
Module({
onRuntimeInitialized() {
this.instance = Object.assign(this, {
ready: Promise.resolve()
});
resolve();
}
});
})
};
public draw_outline() {
this.instance.ready
.then(_ => this.result_web = this.instance.addTwoNumbers(2,2));
}
draw_outline is getting called when I click on a text element.
And this is the error I'm getting -
So after this error I went to generate file and just added export to the module and this error disappears. but now my function in C "addTwoNumbers" is not getting called from instance.
if I print the value of instance I get
Does anyone know how to proceed from here?
I figured that when compiling I needed to use USE_ES6_IMPORT_META=0 flag so that WebAssembly module will use an older version of the import.meta.url line of code for systems that don't recognize the import style. so the command looks like emcc add.c -o js_plumbing.js -s EXTRA_EXPORTED_RUNTIME_METHODS=['ccall','cwrap'] -s ENVIRONMENT='web,worker' -s EXPORT_ES6=1 -s MODULARIZE=1 -s USE_ES6_IMPORT_META=0
This is my updated code -
Module().then(myModule => {
const result = myModule.ccall('addTwoNumbers',
'number',
['number', 'number'],
[4, 6]);
console.log("Value from wasm file", result);
});
My config file -
const path = require('path');
const contentBase = path.resolve(__dirname, '..', '..');
module.exports = {
configureWebpack: config => {
config.devServer = {
before(app) {
// use proper mime-type for wasm files
app.get('*.wasm', function (req, res, next) {
var options = {
root: contentBase,
dotfiles: 'deny',
headers: {
'Content-Type': 'application/wasm'
}
};
res.sendFile(req.url, options, function (err) {
if (err) {
next(err);
}
});
});
}
}
},
}
It is inside a function that I call on a click event . I can elaborate the whole process if someone is interested. It should not take this much time for anyone, I hope it helps others who have been looking for the solution. I realise I have not properly stated the problem in this post, I shall update everything here in a proper way soon.
I ran this command in my console npm install react-native-fs --save
then have this code in my onclick function
_download = (downloadpath) => {
// console.log(introduction);
var RNFS = require('react-native-fs');
try {
RNFS.downloadFile({
fromUrl: downloadpath,
toFile: `${RNFS.DocumentDirectoryPath}/test.zip`,
}).promise.then((r) => {
this.setState({ isDone: true })
});
} catch (error) {
console.log(error);
// Error saving data
}
}
but its giving this
Well, unfortunately RNFS is not compatible with expo since it wraps native libraries. You can check it out usually in http://native.directory
I'm trying to get HMR to work on the server-side with an express app and I'm seeing some odd behavior. My simple test project;
index.ts
let httpListener: Server = null;
let AppServer = require('./AppServer').default;
const port = Config.serverPort;
if (process.env.NODE_ENV === 'dev') {
if ((module as any).hot) {
(module as any).hot.addDisposeHandler((data: any) => {
httpListener.close();
AppServer = require('./AppServer').default;
});
console.log('index.ts', (module as any).hot.dependencies);
(module as any).hot.accept((err: any) => {
console.log('HMR Error', err);
});
}
}
httpListener = AppServer.app.listen(port, (error: Error) => {
if (error) {
console.error(error);
} else {
console.info(`Listening on port ${port}.`);
}
});
AppServer.ts
class AppServer {
public app: express.Application = express();
constructor() {
this.app.use('/api', (new ApiRouter()).router);
}
}
export default new AppServer();
and ApiRouter.ts
export class ApiRouter {
public router: express.Router = express.Router();
constructor() {
this.router.use('/auth', (new AuthRouter()).router);
this.router.get('/', (req, res) => {
res.json({success: true});
});
}
}
Webpack bundles correctly, and HMR reports modules being updated. If I change some code in index.ts, those changes take effect. However, when I flip {success: true} to {success: false}, I see HMR update;
[HMR] Updated modules:
[HMR] - ./src/server/AppServer.ts
[HMR] - ./src/server/index.ts
[HMR] - ./src/server/api/ApiRouter.ts
but when I hit the endpoint, I get back {success: true}. So despite HMR seemingly doing the right thing, the code isn't being changed at run-time. I suspect I'm missing something fundamental about how module.hot.accept works here, but I can not figure out where I'm going wrong.
Has anyone gotten this to work correctly?
I want to develop pdf ebook application for mobile. Is there pdf viewer component for ionic framework. I fond mozilla pdf.js . I need ionic project example.
Have you tried the angular module ng-pdfviewer? Because angular works under the hood of Ionic.
var app = angular.module('testApp', [ 'ngPDFViewer' ]);
app.controller('TestCtrl', [ '$scope', 'PDFViewerService', function($scope, pdf) {
$scope.viewer = pdf.Instance("viewer");
$scope.nextPage = function() {
$scope.viewer.nextPage();
};
$scope.prevPage = function() {
$scope.viewer.prevPage();
};
$scope.pageLoaded = function(curPage, totalPages) {
$scope.currentPage = curPage;
$scope.totalPages = totalPages;
};
}]);
And the Directive uses the above pdf.js file
and the Html is bellow:
<button ng-click="prevPage()"><</button>
<button ng-click="nextPage()">></button>
<br>
<span>{{currentPage}}/{{totalPages}}</span>
<br>
<pdfviewer src="test.pdf" on-page-load='pageLoaded(page,total)' id="viewer"></pdfviewer>
and using ng-pdf should solve your problem.
Have you tried this Phonegap plugin https://github.com/ti8m/DocumentHandler
Below is how I used it.
$scope.HandleDocumentPlugin = function () {
if (DocumentViewer != null) {
DocumentViewer.previewFileFromUrlOrPath(
function () {
console.log('success');
}, function (error) {
if (error == 53) {
console.log('No app that handles this file type.');
var alert = $ionicPopup.alert({
title: 'Alert!',
template: "There is no app installed that handles this file type."
});
alert.then(function (res) {
});
}
}, $scope.PDF_URL);
}
else if (DocumentHandler != null) {
DocumentHandler.previewFileFromUrlOrPath(
function () {
console.log('success');
}, function (error) {
if (error == 53) {
console.log('No app that handles this file type.');
var alert = $ionicPopup.alert({
title: 'Alert!',
template: "There is no app installed that handles this file type."
});
alert.then(function (res) {
});
}
}, $scope.PDF_URL);
}
else {
console.log("error");
}
}
You could use Cordova - InAppBrowser since it will be able to display pdf just open specify the static or dynamic path . you do need to add other modules as this an be also used to open web pages also you could use
https://github.com/initialxy/cordova-plugin-themeablebrowser
to theme the pdf openings for custom loading to hide url etc fields
these two approaches can be used to open a simple pdf document for reading purposes.
but for more specific options you should go with
https://github.com/akrennmair/ng-pdfviewer
which requires pdf.js and pdf.compat.js.
add it as a dependency in your app.
var app = angular.module('testApp', [ 'ngPDFViewer' ]);
basic controller syntax useage :
app.controller('TestCtrl', [ '$scope', 'PDFViewerService', function($scope,
pdf) {
$scope.viewer = pdf.Instance("viewer");
$scope.nextPage = function() {
$scope.viewer.nextPage();
};
$scope.prevPage = function() {
$scope.viewer.prevPage();
};
$scope.pageLoaded = function(curPage, totalPages) {
$scope.currentPage = curPage;
$scope.totalPages = totalPages;
};
}]);
you can use pdfmake library to generate the pdf, there is a good example to integrate it to ionic
I've followed examples for injecting jQuery from the getting started page and that works just fine. I have a local copy of jQuery in the same directory, and do something like...
if(page.injectJs('jquery.min.js')) {
page.evaluate(function(){
//Use jQuery or $
}
}
When I try to inject my own script(s), none of the functions are available to me. Say I have a script called myScript.js that just has
function doSomething() {
// doing something...
}
I cannot then use doSomething like...
if(page.injectJs('myScript.js')) {
console.log('myScript injected... I think');
page.evaluate(function() {
doSomething();
});
} else {
console.log('Failed to inject myScript');
}
I've tried
window.doSomething = function() {};
and
document.doSomething = function() {};
as well with no luck, as well as trying to call them with window.doSomething() or document.doSomething() in the subsequent page.evaluate().
The following works for me, maybe some other part of your app logic is wrong:
inject.coffee
page = require('webpage').create()
page.onConsoleMessage = (msg) -> console.log msg
page.open "http://www.phantomjs.org", (status) ->
if status is "success"
page.includeJs "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js", ->
if page.injectJs "do.js"
page.evaluate ->
title = echoAndReturnTitle('hello')
console.log title
phantom.exit()
do.coffee:
window.echoAndReturnTitle = (arg) ->
console.log "echoing '#{arg}'"
console.log $(".explanation").text()
return document.title
Result:
> phantomjs inject.coffee
echoing 'hello'
PhantomJS is a headless WebKit with JavaScript API.
It has fast and native support for various web standards:
DOM handling, CSS selector, JSON, Canvas, and SVG.
PhantomJS is created by Ariya Hidayat.
PhantomJS: Headless WebKit with JavaScript API
or if you prefer JavaScript (they're auto-generated and a little ugly):
`inject.js':
// Generated by CoffeeScript 1.3.1
(function() {
var page;
page = require('webpage').create();
page.onConsoleMessage = function(msg) {
return console.log(msg);
};
page.open("http://www.phantomjs.org", function(status) {
if (status === "success") {
return page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js", function() {
if (page.injectJs("do.js")) {
page.evaluate(function() {
var title;
title = echoAndReturnTitle('hello');
return console.log(title);
});
return phantom.exit();
}
});
}
});
}).call(this);
do.js:
// Generated by CoffeeScript 1.3.1
(function() {
window.echoAndReturnTitle = function(arg) {
console.log("echoing '" + arg + "'");
console.log($(".explanation").text());
return document.title;
};
}).call(this);