I wish to use both Storage Capacitor and Ionic Storage but i have this error:
Duplicate identifier 'Storage'.
import { Storage } from '#ionic/storage';
import { Storage } from '#capacitor/storage';
Is there a way to bypass this error ?
I prefer to use both storage
Use imports aliases:
import { Storage as IonicStorage } from '#ionic/storage';
import { Storage as CapStorage } from '#capacitor/storage';
Related
I would like to use sails.io.js with angular5, so I used angular2-sails module. I managed to connect angular to sails but I didn't manage to retrieve the events from sails.js, for example when a new document is created in database. Is there something to configure sails side ? I used this.sailsService.on("user").subscribe(data => console.log("event on user")). The get and post methods are perfectly working. Sails side I put
ioclient: require('socket.io-client')('http://localhost:1337'),
io: require('sails.io.js'),
In config/http.js, instead of
var io = require('sails.io.js')( require('socket.io-client') );
because else sails cannot load
I didn't write anything in config/socket.js
angular2-sails module is deprecated so I used the io variable from sails.io.js using a service :
import {Injectable} from '#angular/core';
function _window(): any {
// return the global native browser window object
return window;
}
#Injectable()
export class SocketService {
get ioSails(): any {
return _window().io;
}
}
My Meteor application using Angular 2 and Typescript seems not to load the server data on the client side: I have followed this tutorial, both with autopublish turned on and of, but each time several tries to display data on client side with different collections failed.
Unlike in the tutorial (RC4), I am using Angular 2 RC5. My clients' main.ts looks as following:
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
Now I tried to copy the very simple sample from the tutorial using the collection "parties" (autopublish turned on).
I created the file both/collections/parties.collection.ts:
import {Mongo} from 'meteor/mongo';
import {Party} from '../interfaces/party.interface';
export const Parties = new Mongo.Collection<Party>('parties');
Instead of using the app.component.ts, I bind the collection in an another existing and functional component which looks like following:
import { Component } from '#angular/core';
import { Mongo } from 'meteor/mongo';
import template from './my-component.component.html';
import { Parties } from '../../../both/collections/parties.collection';
import { Party } from '../../../both/interfaces/party.interface';
#Component({
selector: 'my-selector',
template
})
export class MyComponent
{
parties: Mongo.Cursor<Party>;
constructor() {
this.parties = Parties.find();
alert(this.parties.count());
}
}
If I call db.parties.find({}); in the mongo console, it returns three rows, because I have set up the server side inserts from the sample.
My html template is the same as in the tutorial:
<ul>
<li *ngFor="let party of parties">
<a [routerLink]="['/party', party._id]">{{party.name}}</a>
<p>{{party.description}}</p>
<p>{{party.location}}</p>
<button (click)="removeParty(party)">X</button>
</li>
alert(this.parties.count()) returns "0" - both trying Mongo.Cursor and Mongo.Cursor. I have also tried to fetch the cursor and to alert the array. Each time I get "0" and the error message "NgFor only supports binding to Iterables such as Arrays.", but I think it fails because the client does not get the data the server has.
This is no more an issue on recent versions of angular2.0-meteor.
I am currently attempting to return an observable from a service in Angular2. If you look at the following code, if I uncomment the line in the constructor, everything works fine, and the consumer of the service won't break. But when I try to remove the call from the constructor, it crashes with:
Error: XHR error (404 Not Found) loading http://localhost:3847/rxjs/observable
I believe that it is trying to subscribe to the todo$ property prior to initialisation. So how can I create an initial observer that doesn't actually make the call to the get method straight away? That is, I need some sort of empty Observer that will stop the subscribe line from falling over.
How am I supposed to achieve this?
Tony
import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
import {Todo} from './todo';
import {Observable} from 'rxjs/observable'
#Injectable()
export class TodoService {
public todos$: Observable<Todo[]>;
constructor(private http: Http) {
//this.todos$ = this.http.get('api/Todo').map(res => <Array<Todo>>res.json());
}
loadData() {
this.todos$ = this.http.get('api/Todo').map(res => <Array<Todo>>res.json());
}
}
import {Observable} from 'rxjs/observable'
should be
import {Observable} from 'rxjs/Observable';
^
I'm developing with Webpack (hot reloading) and I'm importing React components with import Sample from './components/Sample/Sample', however, I'd like to simple be able to import with import {Sample, SampleTwo} from './components'.
The former works, however, the latter throws an error.
components/
index.jsx
Sample/
Sample.jsx
SampleTwo/
SampleTwo.jsx
Inside of index.jsx, I've tried:
export {default as Sample} from './component/Sample/Sample' which works, however, I get a warning from Webpack saying it's in read-only mode. Then, I tried the following:
import Sample from './components/Sample/Sample';
export default {
Sample: Sample
}
As Davin suggested, you can just export the object whose properties reference your components:
import Sample from './components/Sample/Sample';
export { Sample: Sample }
or even better:
import Sample from './components/Sample/Sample';
export { Sample }
Then you can import this way:
import { Sample } from './components'
components/Sample/Sample.jsx
[...]
class Sample extends React.Component
{
[...]
}
export default Sample;
Component/SampleTwo/SampleTwo.jws
[...]
class SampleTwo export React.Component
{
[...]
}
export default SampleTwo;
components/index.jsx
import Sample from './Sample/Sample'
import SampleTwo from './SampleTwo/SampleTwo'
export {Sample, SampleTwo};
I have this namespace
namespace Validation {
export function Func1() {
// code
}
export function Func2() {
// code
}
}
Which I can import in my app.ts:
import Validations = Validation;
But when I want to reference some modules in my Validation namespace
import {Request, Response} from 'express';
var jwt = require('jsonwebtoken');
var express = require('express');
import {Config} from './../config';
namespace Validation {
export function Func1() {
// code
}
export function Func2() {
// code
}
}
So then import Validations = Validation; in my app.ts giving me an error cannot find namespace Validation.
Why it is happened? Any thoughts how to fix?
UPDATE 1 : In case if I put imports after namespace I am getting an error Import declaration in a namespace cannot import a module:
namespace Validation {
import {Request, Response} from 'express'; //Error: Import declaration in a namespace cannot import a module
var jwt = require('jsonwebtoken');
var express = require('express');
import {Config} from './../config'; //Error: Import declaration in a namespace cannot import a module
export function Func1() {
// code
}
export function Func2() {
// code
}
}
my config.ts is just a simple class:
export class Config {
public static get Secret():string { return 'stuff'; }
public static get Database():string { return 'mongodb://127.0.0.1:27019/test'; }
}
And 'express' it is an npm package
UPDATE 2
I think I just fixed config by wrapping it in to namespace:
namespace Common {
export class Config { .. }
}
Also changed import statement from this import {Config} from './config'; to this: import Config = Common.Config; but haven't yet figure out how to fix 'express' thing
This happens because from the moment you put a top-level import or export statement into a file, that file is treated as an external module itself. If you are using internal modules (namespaces), I suggest importing inside namespaces, so that there are no top-level import or export statements.
namespace Validation {
import Request = ...;
import Response = ...;
export function Func1() {
// code
}
export function Func2() {
// code
}
}
The other approach would be to use external modules instead, but that requires a module loading system, which might be superfluous in many cases.
Right now, you are mixing internal and external modules, which is not recommended. Regarding complex structural cases like this, Typescript is still very far from being a mature language.
I assume that you have defined your validation functions in the separate (from app.ts) file. If this is the case then what you need to do is:
In your Validation.ts:
export function Func1() {
// code
}
export function Func2() {
// code
}
In your app.ts:
import * as Validation from './Validation';
Validation.Func1();
Your problem is most likely in mixing together concepts of modules and namespaces in typescript. Have a look here: Namespaces and Modules, and be sure to look through Modules and Namespaces