I'm using the babel-plugins-sync-dynamic -import package in the vue instance. What should I do?
I installed the babel-plugin-synch-dynamic -import package, and in the vue instance import the corresponding components, and he had the following error.
export default {
name: 'App',
created () {
console.log(111)
Promise.resolve(import('./Test.vue')).then(response => {
console.log(response.default) // //Shouldn't you load a component dynamically?
})
}
}
I wrote it like this.An error is as follows
Related
I'm trying to work on a project with a numerous amount of files, and I thought an import object would be helpful. For example, here would be menu.ts on the top-level, which every program will reference to:
import router from "./router/index";
import controllers from "./controllers/index";
import config from "./config";
export default {
router: router,
controllers: controllers
config: config
}
This would be a sample controllers/index.ts:
import database from "./database";
import accounts from "./accounts";
import a_controller from "./a_controller";
export default {
database: database,
accounts: accounts,
a_controller: a_controller
}
Obviously, this would raise some circular dependency issues with controllers referencing to menu. This is asserted with a TypeError: cannot read property controllers of undefined error message. Is there a way to do this?
Thank you for your time.
in your case it is better to use named import, in controllers/index.ts: you can do like:
export { database } from "./database";
export { accounts } from "./accounts";
export { a_controller } from "./a_controller";
and in your menu.ts you can import them like:
import { database, accounts, a_controller } from './controller'
I run command ionic generate pages/login but me return this error
Since you're using the React project type, this command won't work. The Ionic CLI doesn't know how to generate framework components for React
You'll have to make a new file in e.g src/pages/ (e.g. with the name xy.tsx) with the following contents:
import React from "react";
import {IonPage} from "#ionic/react";
const PageXY: React.FC = () => {
return (
<IonPage>
...
</IonPage>
);
};
export default PageXY;
and in your App.tsx aka Router you have to import it with import PageXY from "./pages/xy";
and hook it up to the Router like so: <Route path="/xy" component={PageXY} exact />
Hope this still helps someone
I often find packages on npm that I want to include in a Polymer3 element.
the instructions to install the package are often to use npm with something like npm install fingerprintjs2
Below I included the basic Polymer 3 elementas an example. but i get the error
Uncaught TypeError: Cannot read property 'exports' of undefined
I dont understand how I should import from https://github.com/Valve/fingerprintjs2
import {html, PolymerElement} from '#polymer/polymer/polymer-element.js';
import './node_modules/fingerprintjs2/dist/fingerprint2.min.js';
class FingerPrint extends PolymerElement {
static get template() {
return html`
<style>
:host {display: block;}
</style>
<h2>Finger Print</h2>
`;
}
ready() {
super.ready();
setTimeout(function () {
Fingerprint2.get(function (components) {
console.log(components)
})
}, 5000)
}
} window.customElements.define('finger-print', FingerPrint);
if I try to import it with
import Fingerprint2 from './node_modules/fingerprintjs2/dist/fingerprint2.min.js';
then I get the error Uncaught SyntaxError: The requested module '../fingerprintjs2/dist/fingerprint2.min.js' does not provide an export named 'default'
I also tried
import {Fingerprint2} from './node_modules/fingerprintjs2/dist/fingerprint2.min.js';
and get Uncaught SyntaxError: The requested module '../fingerprintjs2/dist/fingerprint2.min.js' does not provide an export named 'Fingerprint2'
very simple:
import Fingerprint2 from 'fingerprint2'
I have already configured mixpanel in my angular 5 app. Now I want to separate mixpanel project for production and development. I have already added mixpanel script snippet in index.html in head section containing token of production project. Now I need to add another token and select one based upon selected environment, but environment variable is not accessible in index.html. I don't want to have two separate index.html in my project. In another way as suggested here (How to integrate mixpanel with angular2).I set token from main.ts, but it is unable to access environment variable.Is there any way to set token in index.html based upon selected environment?
I am getting following error:
ERROR in /home/Project/src/main.ts (9,27): Property 'mixpanel' does not exist on type '{ production: boolean; }'.
exported api key from environment.ts:
export const mixpanel= {
apikey: 'MY_PROJECT_TOKEN_HERE'
}
main.ts
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
declare const mixpanel: any;
enableProdMode();
mixpanel.init(environment.mixpanel.apikey);
platformBrowserDynamic().bootstrapModule(AppModule);
I have to implement autocomplete for a text input that takes addresses/locations in Angular 4.
I found this package on Google, https://tanoy009.github.io/ng4-geoautocomplete/, but I am not sure where to place the settings part of example3 in my own code. This is what I have so far:
export class TestComponent {
apiAddress: string = "";
#Output() notify: EventEmitter<any> = new EventEmitter<any>();
autoCompleteCallback1(selectedData: any) {
this.apiAddress = selectedData.description;
this.notify.emit(this.apiAddress);
}
You should look at the documentation. It's very clear.
https://github.com/tanoy009/ng4-geoautocomplete#installation
Installation
Install through npm:
npm install --save ng4-geoautocomplete Then include in your apps
module:
import { Component, NgModule } from '#angular/core'; import {
Ng4GeoautocompleteModule } from 'ng4-geoautocomplete';
#NgModule({
imports: [
Ng4GeoautocompleteModule.forRoot()
]
})
export class MyModule{}
Add google place script in your main file generally referred to
'index.html' (Optional if you want to use google services).
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=true&key=XXReplace
this with valid keyXX&libraries=places&language=en-US"></script>
Finally use in one of your apps components:
import { Component } from '#angular/core';
#Component({ template: '<ng4geo-autocomplete
(componentCallback)="autoCompleteCallback1($event)"></ng4geo-
autocomplete>'
})
export class MyComponent {
autoCompleteCallback1(selectedData:any) {
//do any necessery stuff.
}
}
UPDATE: The next part of the answer is an update placed here to answer the question in the comment section.
The following links show the code for the demo you linked. This will tell you where to put the settings. You basically create settings in your component's typescript file and then use them in the html.
TypeScript
public userSettings2: any = {
showRecentSearch: false,
geoCountryRestriction: ['in'],
searchIconUrl: 'http://downloadicons.net/sites/default/files/identification-search-magnifying-glass-icon-73159.png'
};
HTML
<ng4geo-autocomplete [userSettings]="userSettings2" (componentCallback)="autoCompleteCallback2($event)"></ng4geo-autocomplete>
https://github.com/tanoy009/ng4-geoautocomplete/blob/master/demo/demo.component.ts
https://github.com/tanoy009/ng4-geoautocomplete/blob/master/demo/demo.component.html