I am working on create a Outlook Add-in using Angular. For a sample i added task pane button to open up a side panel in outlook. After index page loading its open another component.
Problem is angular component not loading in Outlook 2016 mac, but it works Firefox, Chrome, Safari browsers.
How would you recommend carrying out such a problem?
Note : I have tested outlook on mac with Vorlon. Office.intialize not loading and got folllowing console messages.
Attempting to configure 'userAgent' with descriptor '{}' on object '[object Navigator]' and got error, giving up: TypeError: Attempting to change the getter of an unconfigurable property.
Attempting to configure 'appVersion' with descriptor '{}' on object '[object Navigator]' and got error, giving up: TypeError: Attempting to change the getter of an unconfigurable property.
Attempting to configure 'appName' with descriptor '{}' on object '[object Navigator]' and got error, giving up: TypeError: Attempting to change the getter of an unconfigurable property.
Attempting to configure 'product' with descriptor '{}' on object '[object Navigator]' and got error, giving up: TypeError: Attempting to change the getter of an unconfigurable property.
Attempting to configure 'vendor' with descriptor '{}' on object '[object Navigator]' and got error, giving up: TypeError: Attempting to change the getter of an unconfigurable property.
And also I published the addin and checked F12 to console messages in Outlook on windows. getting an error message "SCRIPT5022: Office.js has not been fully loaded yet. Please try again later or make sure to add your initialization code on the Office.initialize function."
This is my main.ts file
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
declare let Office:any;
Office.initialize = (reason: any) => {
console.log('SampleAddin: initalizing office.js...');
// bootstrap
platformBrowserDynamic().bootstrapModule(AppModule)
.then((success: any) => {
console.log('SampleAddin: bootstrap success', success);
})
.catch((error: any) => {
console.log('SampleAddin: bootstrap error', error);
});
};
Without an error/warning, it is difficult to identify what might be going on. I'd recommend looking at the following resources:
Tips for creating Office Add-ins with Angular
Debug Office Add-ins on iPad and Mac
OfficeDev/script-lab (OSS Word/Ppt/Excel Add-in using Angular)
Related
I am working on a React project, in that I am implementing Microblink https://www.npmjs.com/package/#microblink/blinkcard-in-browser-sdk npm for scanning credit cards but when I run the project it is showing this kind of error Error during the initialization of the SDK! DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope'
Please help to resolve this issue.
This is my code
import React from 'react';
import * as BlinkCardSDK from "#microblink/blinkcard-in-browser-sdk";
import './App.css';
const App = () => {
if (BlinkCardSDK.isBrowserSupported()) {
const loadSettings = new BlinkCardSDK.WasmSDKLoadSettings("sRwAAAYJbG9jYWxob3N0r/lOPmg/w35CpOHWK+o8YBgy/pGDcaB7TnbwT8mPpSzcCTWnV/AEyEIWVrcjyzdUSYb2bT0ccHxN4WDKrHoxoLQKBeq+ZukLOK13VwZXeikV4ggv2wrrW162/GIO5hajgqiEATKco+QfglS+OwguBweuacsuRR8UCD/YTdg4ysGMVljN7IIrthHPnmUa0SBOoeReXYvGmrKkVztIZzu9qkZoHu0UwCTN9Xloxa9Srw==");
BlinkCardSDK.loadWasmModule(loadSettings).then
(
(wasmSDK: BlinkCardSDK.WasmSDK) => {
},
(error: any) => {
// console.log('test')
console.log("Error during the initialization of the SDK!", error);
// console.log('testnew')
}
)
}
else {
console.log("This browser is not supported by the SDK!");
}
return (
<div>
</div>
)
}
export default App
If you have any questions please let me know.
Besides the license key, you also need to set the proper absolute path to the actual wasm and js support files of the SDK, a.k.a the engineLocation. The resource files need to be hosted somewhere accessible to the app.
There's a more detailed explanation of the SDK configuration in the documentation
Quick side note: it's probably not recommended to share your license key publicly, even if it's just a trial key.
I'm following the feathersJS guide, but in TS and React and I've run into a problem trying to type the client object.
I've written the following code from the guide
import feathers from '#feathersjs/client';
import io from 'socket.io-client';
const socket = io();
const client = feathers();
client.configure(feathers.socketio(socket));
client.configure(feathers.authentication({
storage: window.localStorage
}));
And then a snippet from my top level React file I have and get a type error
useEffect(() => {
try {
return await client.reAuthenticate() // <- type error Property 'reAuthenticate' does not exist on type 'Application<any>'
}
})
I tried typing client as const client: Application = feathers(); but then I just get the type error Property 'reAuthenticate' does not exist on type 'Application<{}>'. How can I type client?
You need to use this #feathersjs/authentication-client library.
Run this commands npm install #feathersjs/authentication-client --save and follow this instruction.
#feathersjs/authentication-client declares reAuthenticate methods for you (see this).
I have a react module where i am using TypeScript.
I want to use html within a Swal-component, and that just doesn't work.
Here is my code:
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
const MySwal = withReactContent(Swal);
MySwal.fire(<p>Holahola</p>);
When i hover the "Holahola" i get the error message: "Type 'Element' has no properties in common with type 'SweetAlertOptions'.ts(2769)".
When i try to run my code in Chrome, i get: "Uncaught TypeError: sweetalert2_react_content_1.default is not a function"
Someone got a clue what happens here?
I have also tried:
MySwal.fire({
title: <p>Holahola</p>
})
Then i get this error:
That's the known issue, you can subscribe to it here: https://github.com/sweetalert2/sweetalert2-react-content/issues/102
As a workaround, use SweetAlertOptions for passing the params:
MySwal.fire({
title: <p>Holahola</p>
});
I am confused about aws-sdk for react, trying to configure it throws error which is a bit confusing, considering the object looks fine in the debugger, but the moment that I step over it throws error: TypeError: Unable to get property 'config' of undefined or null reference
the code:
import {AWS, CustomEvent, AMA} from 'aws-sdk';
class App extends Component {
constructor(props) {
debugger;
AWS.config.region = 'us-east-1';
...
I assumed that once imported the AWS included config object, and if I were to attach with debugger (at the debugger; line) the AWS object looks good and so does the AWS.config and further AWS.config.region is set to null, but if I step, it throws the above error.... Any thoughts what may be misconfigured?
I had the same issue, I solved it with:
import AWS from 'aws-sdk';
AWS.config.region = 'us-east-1';
For some reason it is the import { AWS } as opposed to import AWS that caused the error
I am using Ionic 2 and Firebase to build a chat app.
I add the following which is supposed to be used to add a filter:
import 'rxjs/add/operator/filter';
...
public af: AngularFire
...
this.firelist = this.af.database.list('/chat/', {
query: {
orderByChild: 'negativtimestamp'
}
}).filter(item => item.memberIds === 'xxx');
However, I get the following:
[ts] Property 'filter' does not exist on type
'FirebaseListObservable'.
ps. this.af.database.list(...) returns a FirebaseListObservable<any[]>. filter can be done on Observable but not on FirebaseListObservable.
Question
So how do I implement the filter on FirebaseListObservable because class FirebaseListObservable<T> extends Observable<T>?
Also
import 'rxjs/add/operator/map'
...
this.af.database.list('').map(item => {});
has the following error:
[ts] Property 'map' does not exist on type 'FirebaseListObservable'.
More Info:
My package.json has:
"rxjs": "5.0.0-beta.12",
Any help appreciated.
UPDATE
If you look at the following youtube tutorial, they do exactly what I want to achieve, but without the errors. Does anyone know why I get errors? I am using "angularfire2": "^2.0.0-beta.7-pre",.
This issue was fixed in the following version:
"angularfire2": "^2.0.0-beta.7.1-pre",
Solution:
npm install firebase angularfire2#^2.0.0-beta.7.1-pre --save