I have been trying loading a local json file present in my project folder of Angular 2 using http get method. Look at the following example code snippet:
private _productURL = 'api/products/products.json';
getProducts(): Observable<any> {
return this._http.get(this._productURL).map((response : Response) => <IProduct[]> response.json())
.do(data =>console.log(JSON.stringify(data))).catch(this.handleError);
}
Now when I'm trying to load it with internet connected, it's working. But when I'm turing on the offline checkbox from the browser developer options(https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#offline), the json stops loading again. It starts showing me error in console about No internet connection and doesn't load anything.
Is there any other way to do this? or using http get..how to do it?
You can import a json file if you do as follows:
create a json-typings.d.ts file with:
declare module "*.json" {
const value: any;
export default value;
}
this is a wildcard module definition that allows us to import non javascript files in this case JSON files.
you should now be able to import json files to your project:
import * as products from "./products.json";
Related
I am trying to integrate the convertapi in my Angular 11 application using the following documentation
https://www.npmjs.com/package/convertapi
I need to convert the pdf's into images,
When I try to upload a file, I get
_path2.default.basename is not a function
Here is how I have implemented this in my component
Import
import ConvertAPI from 'convertapi';
Initiate
const convertapi = new ConvertAPI('my actual api-secret ');
And convert
convertapi.convert('jpg', { File: file }) //'file' is actual file object, also tried pdf url
.then(function(result: any) {
console.log(result)
})
.catch(function(e: any) {
console.log(e.toString()); // this prints out the error message
});
Is there anything I am missing?
This library is a non module, please refer to this question on how to use it with Angular:
Angular 2+ Import a Non Module into TS
This is the documentation: https://github.com/ConvertAPI/convertapi-js
I am new to angular , electron.
I am trying to use type script component functions/variables in main.js.
I have LicesneController component which holds emailId, I want to call some methods at the time of tool closure which required emailId(stored in loginCompoenent).
I tried several ways to achieve this :
Local and session storage: Not worked as they cannot be used at client side. : giving error as localStorage is not defined
Include LicesneController module in main.js const { LicenseController } = require('./src/lib/LicenseController'); : giving Exception as Cann't find module
Question is :
why #2 is not working any reason (all the paths are correct) ?
Is there any other way to achieve this scenario ?
If we are using node local storage , how we can hold values set in ts file and use in js file for node local storage.
I have resolved this scenario by using win.webContents.send and ipc renderer.
I was trying to call typescript methods from main.js
in main.js:
win.webContents.send('On Close');
in typeScript :
app.component.ts :
ipcr: IpcRenderer;
ngOnInit() {
this.ipcr = window.ipcRenderer;
this.ipcr.on('On Close', (event, arg) => {
// Do Some stuff here
});
}
In my standard React app, I need to achieve the following: import a file that sits within my src folder, in order to simply read its content as a string. For example, let's say I have the following code in a file:
alert('hey')
then in some other file, I would like to do something like this, in pseudo code:
import * as string from './someFile.js'
console.log(string)
The output of the console.log should be the JS code, as a string:
alert('hey')
If I could place the file within my public folder, I'd be able to perform an http request and read it as I wish. But the problem is of course, that the file is part of the build process(inside the src folder)
Can this be done?
i can think about:
define constants.js file with following code:
export default "alert('vasia')";
import this file from some react file:
import vasia from "./constants";
const App = () => {
console.log(eval(vasia));
}
is that what you r searching for?
But, must warn you: "eval" is evil!
I wanted to do the very same thing but unfortunately found out it is not possible in pure JS as at 2022.
There's a stage 3 TC39 proposal for Import Assertions which is available in Chromium-based browsers but only allows to import JSON files so it certainly would not help in this particular case.
I believe your best bet for now is to use Fetch API to get the content of your file asynchronously.
async function getSampleText() {
const response = await fetch('someFile.js');
console.log(
await response.text()
);
}
I serve a static file server (through HTTP), which contains data generated by wasm-pack. Using the examples from the rustwasm book, I added this code to my index HTML page:
<script type="module">
import init from "./pkg/fstree_web.js";
async function run() {
await init();
}
run();
</script>
However, on Firefox, I get the error message as indicated in the title:
module from “http://localhost:8000/pkg/fstree_web_bg.wasm” was blocked because of a disallowed MIME type (“application/wasm”).
I suspected HTTPS issues or localhost issues, so I additionally tried 127.0.0.1, and even tried an https://***.ngrok.io tunnel, and Firefox still rejects loading the wasm module with this error message.
It links to an MDN article about X-Content-Type-Options, but I am not sure how it is relevant. My server is already sending Content-Type: application/wasm.
The JavaScript code generated by wasm-pack starts with this:
import { __cargo_web_snippet_72fc447820458c720c68d0d8e078ede631edd723 } from './snippets/stdweb-bb142200b065bd55/inline133.js';
import { __cargo_web_snippet_97495987af1720d8a9a923fa4683a7b683e3acd6 } from './snippets/stdweb-bb142200b065bd55/inline134.js';
import { __cargo_web_snippet_dc2fd915bd92f9e9c6a3bd15174f1414eee3dbaf } from './snippets/stdweb-bb142200b065bd55/inline135.js';
import { __cargo_web_snippet_1c30acb32a1994a07c75e804ae9855b43f191d63 } from './snippets/stdweb-bb142200b065bd55/inline136.js';
import { wasm_bindgen_initialize } from './snippets/stdweb-bb142200b065bd55/inline293.js';
import * as wasm from './fstree_web_bg.wasm';
Does Firefox want me to send *.wasm as a application/javascript? Or what is wrong?
The importing of WebAssembly modules is not yet standardized. You should set the --target argument of wasm-pack to web to generate JavaScript to use in a browser.
I am not sure if you have/had the same problem as me (trying to do the tutorial without using js-bundler), but I finally got it to work on my end.
Trying to attempt to get a handle on the *.wasm file you generated is already taken care of by the --target web parameter, so you don't actually need to import your *_bg.wasm file, but since the wasm Object (I'm not too sure yet, what this is) is actually returned by the init() function.
So if you want to carry on using the wasm handle, just do:
// Near imports worked for me, but choose your own scope
let wasm;
.
.
.
// instead of await init();
wasm = await init();
I'm having a number of issues putting together a very simple piece of code as I learn Meteor. See the comments, which are questions.
server/main.js
import { Meteor } from 'meteor/meteor';
import { Post } from './schema'
// Why is this required to make Post available in Meteor.startup?
// Isn't there auto-loading?
Meteor.startup(() => {
console.log(Post)
// This works, but why isn't Post available to meteor shell?
});
server/schema.js
import { Post } from './models/post'
export { Post }
server/models/post.js
import { Class } from 'meteor/jagi:astronomy';
// Why can't this be imported elsewhere, like main.js?
const Posts = new Mongo.Collection('posts');
const Post = Class.create({
name: 'Post',
collection: Posts,
fields: {
title: { type: String },
userId: String,
publishedAt: Date
},
});
export { Post }
In addition to these questions, how can I load my app into meteor shell? Post is undefined there, even though it's defined in Meteor.startup. I tried using .load with an absolute path, but this breaks my app's imports, which use relative paths.
As for which errors I'm confused about:
When I try and use import inside Meteor.startup(), I get an error that the keyword import is undefined. I'm using the ecmascript package.
When I don't import { Class } in the same file where I use Class, I get an unknown keyword error.
If I don't import { Post } in main.js, then Post is undefined.
Not able to load app into Meteor shell.
To access exported objects in Meteor shell, use require:
> require('server/schema.js').Posts.findOne();
To access objects exported by packages, use the package name:
> require('react').PropTypes;
The reason you can't access an object that's imported by another js file is that each file has its own scope here. When Meteor builds your app, it doesn't just concatenate js files like many other build systems do, and that's really a good thing.
Basically a Javascript object gets created for every js file you write. Anything you export in a js file becomes a field in this object which you can access by using require. And import is just a nicer version of the same thing.