I had following html code,
index.html
<li class = "list-group-item" style="margin:50px;" ng-repeat="product in store.products">
<h3>
{{product.name}}
<em class="pull-right">{{product.price | currency}} </em>
</h3>
</li>
In order to get to know the directive ng-include,I added another html in the same directory of index.html.
product-title.html
{{product.name}}
<em class="pull-right">{{product.price | currency}} </em>
And I changed the index.html to,
<h3 ng-include="'product-title.html'">
</h3>
But when I run the index,html, I am not getting the h3 details,
Please help me to find the mistake.
My Controller:
var app = angular.module("store", []);
app.controller('StoreController', function () {
this.products = gems;
});
var gems = [
{
name: 'Product1',
price: '2',
description: 'Bla bla bla',
images: [...],
reviews: [...]
},
{ .....}
];
Browser Error:
Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///D:/Angular%20JS/Source%20Codes/product-title.html'.
at Error (native)
at file:///D:/Angular%20JS/Source%20Codes/angular.min.js:79:137
at s (file:///D:/Angular%20JS/Source%20Codes/angular.min.js:74:109)
at f (file:///D:/Angular%20JS/Source%20Codes/angular.min.js:71:429)
at L (file:///D:/Angular%20JS/Source%20Codes/angular.min.js:100:187)
at L (file:///D:/Angular%20JS/Source%20Codes/angular.min.js:100:187)
at file:///D:/Angular%20JS/Source%20Codes/angular.min.js:101:350
at k.$eval (file:///D:/Angular%20JS/Source%20Codes/angular.min.js:112:68)
at k.$digest (file:///D:/Angular%20JS/Source%20Codes/angular.min.js:109:147)
at k.$apply (file:///D:/Angular%20JS/Source%20Codes/angular.min.js:112:398) angular.min.js:92
(anonymous function) angular.min.js:92
(anonymous function) angular.min.js:68
L angular.min.js:100
L angular.min.js:100
(anonymous function) angular.min.js:101
k.$eval angular.min.js:112
k.$digest angular.min.js:109
k.$apply angular.min.js:112
(anonymous function) angular.min.js:18
d angular.min.js:35
c angular.min.js:18
fc angular.min.js:18
Xc angular.min.js:17
(anonymous function) angular.min.js:214
a angular.min.js:145
(anonymous function) angular.min.js:31
r angular.min.js:7
c
You should not be loading index.html from file:///.... Most browsers will have issues loading data from file URLs, because it triggers cross site scripting protection. Instead, host your directory on a local webserver like LAMP or nodeJs, so your files are coming from http://localhost/....
Another way to solve the issue is to create the website using Microsoft Visual Studio Express for Web. (This version is for free).
Once you run your website you will get http://localhost/....
I had same issue while running through "file://....".
If you are using Mac or Linux, run your app with python simplehttpserver without installing anything.
1. cd [your-project-dir]
2. python -m SimpleHTTPServer
Your app will run on http://localhost:8000/
Related
This is the offending line of code:
<p>
{(isSameDay(event.start, event.end)) ? `On ${format(event.start, 'LLL do')}`: `From ${format(event.start, 'LLL do')} to ${format(event.end, 'LLL do')}`}
</p>
I also tried:
<p>
{(isSameDay(new Date(event.start), new Date(event.end))) ? `On ${format(new Date(event.start), 'LLL do')}`: `From ${format(new Date(event.start), 'LLL do')} to ${format(new Date(event.end), 'LLL do')}`}
</p>
and:
<p>
{(event.start === event.end) ? `On ${format(new Date(event.start), 'LLL do')}`: `From ${format(new Date(event.start), 'LLL do')} to ${format(new Date(event.end), 'LLL do')}`}
</p>
The last one comes back false when it should be true, so it doesn't even matter that it fails the build.
I also uninstalled and re-installed date-fns.
I'm able to use isBefore, isAfter, isToday on a different page, so I have no idea why this line in particular is messing me up. Is my logic wrong? What am I missing? I love date-fns and would prefer not to use a different library, and I definitely don't want to deal with dates with vanilla JavaScript, but if I can't figure this out that's probably what I'll end up doing.
Here is the output when I try to build:
info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info - Skipping validation of types
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
[== ] info - Generating static pages (20/175)undefined start
undefined end
Error occurred prerendering page "/vendor/events/EventsCard". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read property 'start' of undefined
at EventsCard (D:\boho\front\app\.next\server\chunks\9136.js:57:28)
at d (D:\boho\front\app\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:33:498)
at bb (D:\boho\front\app\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:36:16)
at a.b.render (D:\boho\front\app\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:42:43)
at a.b.read (D:\boho\front\app\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:41:83)
at Object.exports.renderToString (D:\boho\front\app\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:52:138)
at renderPage (D:\boho\front\app\node_modules\next\dist\server\render.js:596:45)
at Object.ctx.renderPage (D:\boho\front\app\.next\server\pages\_document.js:53:30)
at Function.getInitialProps (D:\boho\front\app\.next\server\chunks\6859.js:603:19)
at Function.getInitialProps (D:\boho\front\app\.next\server\pages\_document.js:60:56)
info - Generating static pages (175/175)
> Build error occurred
Error: Export encountered errors on following paths:
/vendor/events/EventsCard
at D:\boho\front\app\node_modules\next\dist\export\index.js:487:19
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async Span.traceAsyncFn (D:\boho\front\app\node_modules\next\dist\telemetry\trace\trace.js:60:20)
at async D:\boho\front\app\node_modules\next\dist\build\index.js:833:17
at async Span.traceAsyncFn (D:\boho\front\app\node_modules\next\dist\telemetry\trace\trace.js:60:20)
at async D:\boho\front\app\node_modules\next\dist\build\index.js:707:13
at async Span.traceAsyncFn (D:\boho\front\app\node_modules\next\dist\telemetry\trace\trace.js:60:20)
at async Object.build [as default] (D:\boho\front\app\node_modules\next\dist\build\index.js:77:25)
Rete library is giving this below error upon installing. Below is the error that I am getting.
(anonymous function)
node_modules/rete/build/rete.esm.js:413
410 | value: function () {
411 | var _build = _asyncToGenerator(
412 | /*#__PURE__*/
> 413 | regeneratorRuntime.mark(function _callee(node) {
414 | return regeneratorRuntime.wrap(function _callee$(_context) {
415 | while (1) {
416 | switch (_context.prev = _context.next) {
I found the solution. Here I have installed rete along with some other rete plugins as shown below.
npm i --save rete rete-react-render-plugin rete-connection-plugin rete-area-plugin
Rete Library has some dependencies which could be solved by pasting the below line in the index.html file of your react js project.
<script src="https://cdn.jsdelivr.net/npm/rete#1.0.0-alpha.9/build/rete.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/rete-vue-render-plugin#0.2.0/build/vue-render-plugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/rete-connection-plugin#0.1.2/build/connection-plugin.min.js"></script>
I don't know javascript and so I wanted to move a HUB model that's only available in JS to a SavedModel format.
I copied this script from a tutorial and tried to add the model.save function, but it's not working.
Here's the script:
<html><head>
<!-- Load the latest version of TensorFlow.js -->
<script src="https://unpkg.com/#tensorflow/tfjs"></script>
<script src="https://unpkg.com/#tensorflow-models/mobilenet"></script>
</head>
<body>
<div id="console"></div>
<!-- Add an image that we will use to test -->
<img id="img" src="https://i.imgur.com/JlUvsxa.jpg" width="227" height="227">
<script>
let net;
async function app() {
console.log('Loading mobilenet..');
// Load the model.
net = await mobilenet.load();
console.log('Successfully loaded model');
// Make a prediction through the model on our image.
const imgEl = document.getElementById('img');
const result = await net.classify(imgEl);
console.log(result);
console.log('Saving mobilenet...');
const saveResults = await net.save('downloads://my-model-1');
console.log('Mobilenet saved');
}
app();
</script>
</body></html>
And here's the error I get:
Uncaught (in promise) TypeError: net.save is not a function
at app (TFjsmodelSaver.html:27)
app # TFjsmodelSaver.html:27
async function (async)
app # TFjsmodelSaver.html:19
(anonymous) # TFjsmodelSaver.html:30
The error clearly says that net.save isn't a function at app, but at the same time net.classify works, and save is in the tfjs: https://js.tensorflow.org/api/0.12.5/#tf.Model.save
What am I missing?
BTW, if there's a way of getting the HUB models in SavedModel without going through this, please point me to it. I'd assume the models were created in TF first and then ported to TFJS, so they might be available somewhere...
mobilenet.load() returns a promise of type MobileNet. Here is the interface definition:
export interface MobileNet {
load(): Promise<void>;
infer(
img: tf.Tensor|ImageData|HTMLImageElement|HTMLCanvasElement|
HTMLVideoElement,
embedding?: boolean): tf.Tensor;
classify(
img: tf.Tensor3D|ImageData|HTMLImageElement|HTMLCanvasElement|
HTMLVideoElement,
topk?: number): Promise<Array<{className: string, probability: number}>>;
}
The loaded model does not contain a save method thus throwing the error.
save is not a function
Is it worth it saving the model ?
The loaded model is not used for training. So each time it is needed it can be loaded using mobilenet.load.
The mobilenet package is just a wrapper around the mobilet savedModel. The github repo contains the url of different version of mobilenet from which the savedModel can be downloaded. The model can be loaded locally using tf.loadGraphModel. But this locally loaded model will be of type tf.GraphModel and will not contain the methods classify and infer
A next release will provide the ability to save tf.GraphModel
I'm implementing PayPal's In-Context Checkout and am using Advanced In-Context JavaScript settings (https://developer.paypal.com/docs/classic/express-checkout/in-context/javascript_advanced_settings)
My app is a React app. So I can't use PP API as they suggest it, that is just throw a code between <script> ... </script> tags somewhere in the page under their buttons. My React components have state and data that I need to send to server within PP function calls. So I placed PP code in componentDidMount method. And for some reason PP throws this error:
checkout.js:4734 Uncaught SecurityError: Blocked a frame with origin "http://example.com:3000" from accessing a frame with origin "https://www.sandbox.paypal.com". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.
(anonymous function) # checkout.js:4734
checkout.js:4515 GET http://www.paypalobjects.com/api/oneTouch.html net::ERR_EMPTY_RESPONSE
Here is the code:
componentDidMount() {
window.paypalCheckoutReady = function() {
paypal.checkout.setup(config[NODE_ENV].ppMerchantID, {
locale: 'en_US',
environment: 'sandbox',
buttons: [
{
container: 'checkoutBtnContainer',
type: 'checkout',
color: 'gold',
size: 'medium',
shape: 'pill',
click: (ev)=>{
paypal.checkout.initXO();
$.post('/checkout', {
checkoutData: this.props.checkoutData,
})
.done(res => {
paypal.checkout.startFlow(res.link);
})
.fail(err => {
paypal.checkout.closeFlow();
});
}
}
],
});
};
},
I know about cross-origin policy. I don't understand why it is the case here. Why the code works fine if I throw it on the page between <script> ... </script> tags, but PP throws an error if I use it in my React component. What is the cause of that? Is it React fault or PayPal's?
UPD: No, below is not a solution for the problem. Occasionally Paypal's checkout.js script throws the error.
However, it solves this issue
Apparently,
1) there was no this:
window.paypalCheckoutReady = function() {
// wrong this is here
}
I changed to:
window.paypalCheckoutReady = () => {
// correct this is here now
}
I don't like .bind(this).
2) I removed <form /> tag and set plain <div> instead:
// before
<form id="checkoutBtnContainer" method="post" action="/checkout"></form>
// after
<div id="checkoutBtnContainer"></div>
I don't know why and how, but all works fine now.
I want to render a toolbar on top of page when the application initiates.
Running the following in viewport.js works when ext-all-dev.js is included in the page. but when I use ext-dev.js instead, it throw the exception.Uncaught TypeError: undefined is not a function
Ext.create("Ext.toolbar.Toolbar", {
renderTo: document.body,
defaultType: 'button',
items: [{text: 'foo'}]
});
What is wrong with it? Also running above code in console works with both ext-dev.js and ext-all-dev.js files. The exception stack is:
Uncaught TypeError: undefined is not a function AbstractComponent.js?_dc=1398852700374:170
Ext.define.statics.updateLayout AbstractComponent.js?_dc=1398852700374:170
Ext.define.updateLayout AbstractComponent.js?_dc=1398852700374:3319
Ext.define.afterRender Renderable.js?_dc=1398852701043:195
Base.implement.callParent ext-debug.js:4266
Ext.define.afterRender Component.js?_dc=1398852699982:435
Ext.define.finishRender Renderable.js?_dc=1398852701043:458
Ext.define.render Renderable.js?_dc=1398852701043:784
Ext.define.constructor AbstractComponent.js?_dc=1398852700374:1231
Base.implement.callParent ext-debug.js:4266
Ext.define.constructor Component.js?_dc=1398852699982:377
constructor ext-debug.js:4897
(anonymous function) VM11066:3
Ext.ClassManager.instantiate ext-debug.js:5485
(anonymous function) ext-debug.js:2112
(anonymous function) Viewport.js?_dc=1398852703350:51