I'm using vue-i18n in conjunction with quasar + vue 3 composition api but I get an error as following
SyntaxError: 19 vendor.49822a76.js:formatted:926 SyntaxError: 19 (at vendor.49822a76.js:formatted:27825:21)
at F (vendor.49822a76.js:formatted:27825:21)
at Pt (vendor.49822a76.js:formatted:29590:20)
at vn (vendor.49822a76.js:formatted:30617:27)
at 238.35491042.js:1:419
at f (vendor.49822a76.js:formatted:883:25)
at p (vendor.49822a76.js:formatted:892:27)
Error In console when using useI18n
and here is my i18n file:
Boot directory:
import { boot } from 'quasar/wrappers'
import { createI18n } from 'vue-i18n'
import messages from 'src/i18n'
export default boot(({ app }) => {
const i18n = createI18n({
locale: 'ar',
messages
})
// Set i18n instance on app
app.use(i18n)
})
My Vue File
import { useI18n } from 'vue-i18n';
import AppService from "../../services/api";
export default defineComponent({
setup() {
const { t } = useI18n();
console.log(t)
}
})
any clue?
You need specify allowComposition: true to createI18n options.
Here is the link to the documentaion
Related
I use Vue 3 togehter with Vuetify 3.0.0.-beta.4 and my src/main.js file looks like this:
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
// --- VUETIFY - START ---
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
const vuetify = createVuetify({
components,
directives,
theme: {
defaultTheme: 'myCustomTheme',
themes: {
myCustomTheme: {
dark: false,
colors: {
background: '#FFFFFF',
surface: '#FFFFFF',
primary: '#6200EE',
'primary-darken-1': '#3700B3',
secondary: '#03DAC6',
'secondary-darken-1': '#018786',
error: '#B00020',
info: '#2196F3',
success: '#4CAF50',
warning: '#FB8C00'
}
}
}
}
})
// --- VUETIFY - END ---
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.use(vuetify)
app.mount('#app')
The code works perfectly fine but as you can see this becomes very quickly confusing. I would like to outsource the Vuetify part form the src/main,js file into a separate file (src/plugins/vuetify.js) but all my efforts didn't work.
How can I outsource the vuetify part into a separate js file?
You can use the export functionality:
https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export
And then, in your main.js file, import your vuetify configured object and pass it to vue.
Can someone help me understand if there is a way to configure open Telemetry on the client side for react and vanilla JS projects all I want to do is to console the traces of fetch call that are being made from the browser.
Most of the documentation I see is only for nodejs. Pls pinpoint a documentation if there are any?
The documentation gives a common guide for Javascript. What you do for you React would be same as what you do for Node.js or even simple JS scripts.
Just follow the documentation. Create and export a tracer:
import { ZoneContextManager } from '#opentelemetry/context-zone';
import { registerInstrumentations } from '#opentelemetry/instrumentation';
import { DocumentLoadInstrumentation } from '#opentelemetry/instrumentation-document-load';
import { FetchInstrumentation } from '#opentelemetry/instrumentation-fetch';
import { UserInteractionInstrumentation } from '#opentelemetry/instrumentation-user-interaction';
import { XMLHttpRequestInstrumentation } from '#opentelemetry/instrumentation-xml-http-request';
import { ConsoleSpanExporter, SimpleSpanProcessor } from '#opentelemetry/sdk-trace-base';
import { WebTracerProvider } from '#opentelemetry/sdk-trace-web';
const setupTracer = () => {
const provider = new WebTracerProvider();
provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
provider.register({
// Changing default contextManager to use ZoneContextManager - supports asynchronous operations - optional
contextManager: new ZoneContextManager(),
});
// Registering instrumentations
registerInstrumentations({
instrumentations: [
new DocumentLoadInstrumentation(),
new UserInteractionInstrumentation(),
new XMLHttpRequestInstrumentation(),
new FetchInstrumentation()
],
});
}
export default setupTracer;
Import the tracer like this in your app's entry point (usually index.js):
setupTracer();
ReactDOM.render(<App />, document.getElementById('root'));
I have added angular2-dropdown-multiselect in Jhipster angular part. Its not working perfectly as per the angular2-dropdwon-multi select or ngx-treeview I have added the dependency using
npm install angular2-multiselect-dropdown --save
Then I have added the same into app.module.ts
import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown';
#NgModule({
// ...
imports: [
AngularMultiSelectModule,
]
// ...
})
Then Try this following example
import { Component, OnInit } from '#angular/core';
export class AppComponent implements OnInit {
dropdownList = [];
selectedItems = [];
dropdownSettings = {};
ngOnInit(){
this.dropdownList = [
{"id":1,"itemName":"India"},
{"id":2,"itemName":"Singapore"},
{"id":3,"itemName":"Australia"},
{"id":4,"itemName":"Canada"},
{"id":5,"itemName":"South Korea"},
{"id":6,"itemName":"Germany"},
{"id":7,"itemName":"France"},
{"id":8,"itemName":"Russia"},
{"id":9,"itemName":"Italy"},
{"id":10,"itemName":"Sweden"}
];
this.selectedItems = [
{"id":2,"itemName":"Singapore"},
{"id":3,"itemName":"Australia"},
{"id":4,"itemName":"Canada"},
{"id":5,"itemName":"South Korea"}
];
this.dropdownSettings = {
singleSelection: false,
text:"Select Countries",
selectAllText:'Select All',
unSelectAllText:'UnSelect All',
enableSearchFilter: true,
classes:"myclass custom-class"
};
}
onItemSelect(item:any){
console.log(item);
console.log(this.selectedItems);
}
OnItemDeSelect(item:any){
console.log(item);
console.log(this.selectedItems);
}
onSelectAll(items: any){
console.log(items);
}
onDeSelectAll(items: any){
console.log(items);
}
}
with HTML
<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)">
</angular2-multiselect>
But after runing yarn serve
it just showing
Please help me
I had a similar problem with another third party library (ngx-treeview) and I also was only getting the html component empty and with no errors in the javascript console.
It was solved after importing the third party library properly following the JHipster project structure. If you want to use an external module in more than one module component, which is common, you need to configure it in shared-libs.module.ts and also add it to imports and to the exports on its #NgModule configuration.
src\main\webapp\app\shared\shared-libs.module.ts
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { CommonModule } from '#angular/common';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { NgJhipsterModule } from 'ng-jhipster';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { CookieModule } from 'ngx-cookie';
import { FontAwesomeModule } from '#fortawesome/angular-fontawesome';
import { TreeviewModule } from 'ngx-treeview';
#NgModule({
imports: [
NgbModule.forRoot(),
NgJhipsterModule.forRoot({
alertAsToast: false,
i18nEnabled: true,
defaultI18nLang: 'en'
}),
InfiniteScrollModule,
CookieModule.forRoot(),
FontAwesomeModule,
TreeviewModule.forRoot() // new third party lib import
],
exports: [FormsModule, CommonModule, NgbModule, NgJhipsterModule,
InfiniteScrollModule, FontAwesomeModule,
TreeviewModule] // new third party lib export
})
export class MyProjectSharedLibsModule {}
Share-libs module is generated by Jhipster and it is by default imported in shared.module which is imported by app.module and also the other modules that are created at start by Jhipster. For more about project structure: https://www.jhipster.tech/using-angular/
However, if you create a new angular module component you need to add the shared module in the imports to be able to use the third parties libraries there.
#NgModule({
...
imports: [MyProjectSharedModule,
RouterModule.forChild([HOME_ROUTE])],
..
})
export class MyProjectAnotherModule {}
i'm trying to connect my spring boot project as my back-end using angular 2 as front-end.
based on web-service my back-end provide an API which present on JSON, then from here i'm building my front-end then 'm try to consume Restful service.
eventually, no component in running, a blank page displayed with three error on my web browser said:
error 1:
ERROR Error: No provider for ConnectionBackend!
at injectionError (core.es5.js:1169)
at noProviderError (core.es5.js:1207)
at ReflectiveInjector_.webpackJsonp../node_modules/#angular/core/#angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649)
at ReflectiveInjector_.webpackJsonp../node_modules/#angular/core/#angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
at ReflectiveInjector_.webpackJsonp../node_modules/#angular/core/#angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620)
at ReflectiveInjector_.webpackJsonp../node_modules/#angular/core/#angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489)
at resolveNgModuleDep (core.es5.js:9475)
at NgModuleRef_.webpackJsonp../node_modules/#angular/core/#angular/core.es5.js.NgModuleRef_.get (core.es5.js:10557)
at resolveDep (core.es5.js:11060)
at createClass (core.es5.js:10916)
error 2:
AppComponent_Host.html:1 ERROR CONTEXT DebugContext_ {view: Object, nodeIndex: 1, nodeDef: Object, elDef: Object, elView: Object}
error 3:
Unhandled Promise rejection: No provider for ConnectionBackend! ; Zone: <root> ; Task: Promise.then ; Value: Error: No provider for ConnectionBackend!
at injectionError (core.es5.js:1169)
at noProviderError (core.es5.js:1207)
at ReflectiveInjector_.webpackJsonp../node_modules/#angular/core/#angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649)
at ReflectiveInjector_.webpackJsonp../node_modules/#angular/core/#angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
at ReflectiveInjector_.webpackJsonp../node_modules/#angular/core/#angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620)
at ReflectiveInjector_.webpackJsonp../node_modules/#angular/core/#angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489)
at resolveNgModuleDep (core.es5.js:9475)
at NgModuleRef_.webpackJsonp../node_modules/#angular/core/#angular/core.es5.js.NgModuleRef_.get (core.es5.js:10557)
at resolveDep (core.es5.js:11060)
at createClass (core.es5.js:10916) Error: No provider for ConnectionBackend!
at injectionError (http://localhost:4200/vendor.bundle.js:33285:90)
at noProviderError (http://localhost:4200/vendor.bundle.js:33323:12)
at ReflectiveInjector_.webpackJsonp../node_modules/#angular/core/#angular/core.es5.js.ReflectiveInjector_._throwOrNull (http://localhost:4200/vendor.bundle.js:34765:19)
at ReflectiveInjector_.webpackJsonp../node_modules/#angular/core/#angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (http://localhost:4200/vendor.bundle.js:34804:25)
at ReflectiveInjector_.webpackJsonp../node_modules/#angular/core/#angular/core.es5.js.ReflectiveInjector_._getByKey (http://localhost:4200/vendor.bundle.js:34736:25)
at ReflectiveInjector_.webpackJsonp../node_modules/#angular/core/#angular/core.es5.js.ReflectiveInjector_.get (http://localhost:4200/vendor.bundle.js:34605:21)
at resolveNgModuleDep (http://localhost:4200/vendor.bundle.js:41591:25)
at NgModuleRef_.webpackJsonp../node_modules/#angular/core/#angular/core.es5.js.NgModuleRef_.get (http://localhost:4200/vendor.bundle.js:42673:16)
at resolveDep (http://localhost:4200/vendor.bundle.js:43176:45)
at createClass (http://localhost:4200/vendor.bundle.js:43032:35)
anyway guessing my back-end just gonna give as only one list in the other hand the angular2 project just gonna list all att names from the list provided by spring boot.
here my Angular code:
app.component.ts
import { NgFor } from '#angular/common';
import {Http} from '#angular/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
template: `<h1>Consumming a restful Webservice using angular 2</h1>
<ul>
<li #ngFor="item of personsLst">
{{item.id}}
</li>
</ul>`,
providers: [Http]
})
export class AppComponent {
personsLst: Array<string> = [];
theDataSource: Observable<string>;
constructor(private http: Http) {
this.theDataSource = this.http.get('/persons/dolist')
.map(res => res.json());
}
ngOnInit() {
// get the data from the rest service
this.theDataSource.subscribe(
data => {
if (Array.isArray(data)) {
this.personsLst = data;
}else {
this.personsLst.push(data);
}
},
err =>
console.log('can not get the persons list. Error code: %s, URL: %s', err.status, err.url),
() => console.log('Person(s) retrieved')
);
}
}
Note: i'm using the angular command line interface in this project!!
I am been having a terrible time getting nativescript to work with angular 2 with the official release. I am zero issues with good ole faction web angular but native script is a different story. NativeScript why will my hello world work? I see nothing.
Thanks
Home:
import {Component} from "#angular/core";
import { Router } from "#angular/router";
#Component({
selector: "home",
template: "hello",
})
export class HomeComponent {
constructor(private router: Router){
}
}
app
import {Component} from "#angular/core";
#Component({
selector: "main",
template: "<page-router-outlet></page-router-outlet>",
})
export class AppComponent {
}
Routes:
import { HomeComponent } from "./pages/home/home.component";
export const routes = [
{ path: "", component: HomeComponent }
];
export const navigatableComponents = [
HomeComponent
];
Modules:
import { NgModule } from "#angular/core";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptHttpModule } from "nativescript-angular/http";
import { NativeScriptModule } from "nativescript-angular/platform";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { AppComponent } from "./app.component";
import { HomeComponent } from "./pages/home/home.component";
import { routes, navigatableComponents } from "./app.routes";
#NgModule({
imports: [
NativeScriptModule,
NativeScriptFormsModule,
NativeScriptHttpModule,
NativeScriptRouterModule,
NativeScriptRouterModule.forRoot(routes)
],
declarations: [AppComponent,
...navigatableComponents ],
bootstrap: [AppComponent]
})
export class AppModule {}
Executing before-prepare hook from /Users/Documents/frontend/bootops-mobile-v1/hooks/before-prepare/nativescript-dev-typescript.js
Project successfully prepared (ios)
Transferring project files...
Successfully transferred all files.
Applying changes...
Sep 17 23:05:18 Davids-iMac com.apple.CoreSimulator.SimDevice.D28D29C3-07B6-4B60-B4B0-711475C505DE.launchd_sim[19187] (UIKitApplication:org.nativescript.bootopsmobilev1[0x7351][20309]): Service exited due to Terminated: 15
Successfully synced application org.nativescript.bootopsmobilev1 on device D28D29C3-07B6-4B60-B4B0-711475C505DE.
Sep 17 23:05:19 Davids-iMac bootopsmobilev1[20349]: objc[20349]: Class PLBuildVersion is implemented in both /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/AssetsLibraryServices.framework/AssetsLibraryServices (0x124c81910) and /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/PhotoLibraryServices.framework/PhotoLibraryServices (0x124aab210). One of the two will be used. Which one is undefined.
Sep 17 23:05:19 Davids-iMac bootopsmobilev1[20349]: assertion failed: 15G1004 14A345: libxpc.dylib + 62597 [37A9DF49-35C1-3D93-B854-B35CACF0100F]: 0x7d
Sep 17 23:05:19 Davids-iMac bootopsmobilev1[20349]: CONSOLE LOG file:///app/tns_modules/#angular/core/bundles/core.umd.js:210:20: Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
Everything in your code snippets looks good except the part with the HomeComponent template, that Component declaration should look like this:
#Component({
selector: "home",
template: `<Label text="hello"></Label>`,
})
export class HomeComponent {
constructor(private router: Router){
}
}
The reason behind this is the fact that in NativeScript there is not webview it is all native components. So in order for your "hello" text to be rendered you need to use the NativeScript Label. This is all true for NativeScript + Angular 2. Your code snippets work correctly on Angular 2 web because the web browser knows how to render that text, on the other hand NativeScripts Angular 2 renderer does not know how to render a text directly because on iOS and Android there is not such rendering and you need to tell it how via the Label tag.
In the index.html, you have to put <selector-for-the-page></selector-for-the-page> You might have different selector.