I am using Angular 5 application and using SVG icons throughout site. In normal browsers like Chrome, Mozilla and Safari, icons are loading properly but in IE11 icons don't.
For that i added svgxuse in my pollyfill.ts file. https://github.com/Keyamoon/svgxuse
After this change, all icons are now loading in IE11 browser but they load quite late. I mean it takes around 1-2 seconds after all content has been loaded on screen.
It is not good from user perspective. Does anyone has idea how to preload / fast load these icon in IE browsers.
Thanks in advance.
I think you can't do so much .. maybe give a try to service worker (I don't know if they work in IE11) .. with Service worker you can load and cache images and assets ...
something like: (in your ngsw-config.js file)
{
"index": "/index.html",
"assetGroups": [{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html"
],
"versionedFiles": [
"/*.bundle.css",
"/*.bundle.js",
"/*.chunk.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}]
}
then in your angular.cli.json file set:
"serviceWorker": true
hope it helps you!
Related
I use the typescript+webpack template from electron forge.
For loading a single preload script with webpack, there is a constant called MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY that can be set from the package.json, for example like so: "preload": { "js": "myPreload.ts" }. This constant is then somehow resolved from within the Electron Forge - Webpack Plugin depending on whether the application is run in debug or release mode.
I have this set up, and it works fine if you have single or multiple windows that share the same preload.ts script. However, I can not figure out how I could specify multiple different preload scripts for other windows.
How can I use multiple different preload.ts scripts (for different windows) with the electron forge webpack plugin?
Actually it is pretty simple to add multiple scripts, but as I have not seen this documented anywhere I will answer my own question here. The name field of the config is important, because the name in uppercase will be the prefix of the webpack constant, (e.g. "name": "my_name" will lead to the constant beeing called MY_NAME_PRELOAD_WEBPACK_ENTRY.
If you now want to add multiple preload scripts you will have to add multiple entry points to which you can then refer by their names. Unfortunately each entry point also requires the html and js fields, but if you do not need those you can create empty files with the correct extension and point to these).
Here is an example to better illustrate these points:
"config": {
"forge": {
"plugins": [
{
"name": "#electron-forge/plugin-webpack",
"config": {
"mainConfig": "./webpack.main.config.js",
"renderer": {
"config": "./webpack.renderer.config.js",
"entryPoints": [
{
"name": "main_window",
"html": "./src/main_window/index.html",
"js": "./src/main_window/index.js",
"preload": {
"js": "./src/main_window/preload.js"
}
},
{
"name": "extra_preload_main_window",
"html": "./src/empty.html",
"js": "./src/empty.js",
"preload": {
"js": "./src/main_window/preload2.js"
}
},
{
"name": "second_window",
"html": "./src/second_window/index.html",
"js": "./src/second_window/index.js",
"preload": {
"js": "./src/second_window/preload.js"
}
}
]
}
}
}
]
}
}
Which will then give you these (relevant) constants:
// Path to renderer of main window.
declare MAIN_WINDOW_WEBPACK_ENTRY;
// Path to first preload script (of main window).
declare MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY;
// Path to the second preload script (of the main window).
declare EXTRA_PRELOAD_MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY;
// Preload and renderer scripts for other window.
declare SECOND_WINDOW_WEBPACK_ENTRY;
declare SECOND_WINDOW_PRELOAD_WEBPACK_ENTRY;
Technically you will of course also get
declare EXTRA_PRELOAD_MAIN_WINDOW_WEBPACK_ENTRY;
but it points to an empty file / webpack output.
I have been working on an extension (google chrome only for now) that is supposed to add features to my school's online learning environment. This website (not actually run by the school itself) uses Angular for the front-end.
For the extension I am using Typescript, with Parcel. The scripts that are running on the webpages are content-scripts.
I am trying to add an item to the menu-bar that is on the left. This is what I've tried:
Inserting pure HTML into the ul element, but this breaks the entire menu-bar and the user is unable to use it after.
Use Angular (installed via NPM) in the content-script to find the scope of the menu-bar element, then add the new option (Menu-bar is an array) and then apply it. Although this also seems to not work, like so:
Expected behaviour (using browser console)
let target = document.getElementsByClassName("main-menu")[0];
let menu = angular.element(target);
console.log(menu);
>>> p.fn.init [ul.main-menu, context: ul.main-menu]
Received Behaviour (from content-script)
let target = document.getElementsByClassName("main-menu")[0];
let menu = angular.element(target);
console.log(menu);
>>> p.fn.init [ul.main-menu]
The absence of the context makes me think that my content-script and the webpage's script are not running in the same scope. Is that correct? I am not able to use the .scope() method in the content-script either.
This is my manifest.json for the plugin. Please let me know
{
"name": "Magister Plus",
"description": "TBD",
"version": "0.0.1",
"manifest_version": 3,
"permissions": [
"activeTab",
"scripting",
"tabs"
],
"background": {
"service_worker": "./background/background.js"
},
"host_permissions": [
"https://*.magister.net/*"
],
"content_scripts": [
{
"matches": ["https://*.magister.net/*"],
"js": ["./content/domain.js"]
},
{
"matches": ["https://*.magister.net/magister/#/vandaag"],
"js": ["./content/vandaag.js"]
}
],
"action": {}
}
I am not really sure what to do here anymore, since I am not really familiar with Angular.js at all.
Thanks for any help!
To change html you need to use appendChild or insertAdjacentHTML, but not innerHTML. 2) To access context property you need to run that part of code in page context.
By #wOxxOm
This worked indeed! Thank you so much!
as you see above, the building process never finishes and no extension host window appears.
the problem also exists when all extensions all disabled
but this problem doesn't exist when creating project with javascript (the problem is only with typescript)
the steps that I follow is from this tutorial
and I also tried the hello world sample from github.
but none of them worked.
EDIT:
I tried to open extension development host window manually by code --extensionDevelopmentPath="path/to/my/project" and it worked.
I think the issue is with some of vscode's configurations
possible fix: I should check the configurations such as npm: watch. but I don't know where are they and what should I do with them??
so any idea?
EDIT 2:
task.json
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "watch",
"problemMatcher": "$tsc-watch",
"isBackground": true,
"presentation": {
"reveal": "never"
},
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
launch.json
// A launch configuration that compiles the extension and then opens it inside a new window
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
{
"version": "0.2.0",
"configurations": [
{
"name": "Run Extension",
"type": "extensionHost",
"request": "launch",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}"
],
"outFiles": [
"${workspaceFolder}/out/**/*.js"
],
"preLaunchTask": "${defaultBuildTask}"
},
{
"name": "Extension Tests",
"type": "extensionHost",
"request": "launch",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}",
"--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
],
"outFiles": [
"${workspaceFolder}/out/test/**/*.js"
],
"preLaunchTask": "${defaultBuildTask}"
}
]
}
then I noticed that if I comment out "preLaunchTask": "${defaultBuildTask}" in launch.json file, the problem solves.
Finally I caught the issue. that was because of the locale of my system that was set to Persian which typescript problem matcher couldn't recognize(Persian digits).
By setting system locale to English the problem solved and everything now works fine as expected.
please see the issue on github
VSC: 1.42.1
Electron: 8.0.3
macOS: 10.14.5
node: 11.15.0
Here is one of the many example launch configurations I have tried. I can debug the main process successfully but the renderer process has the "breakpoint set but not bound" issue so the breakpoints are never triggered.
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Main Process",
"type": "node",
"request": "launch",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
},
"program": "${workspaceRoot}/main.js",
"protocol": "inspector"
},
{
"name": "Debug Renderer Process",
"type": "chrome",
"request": "launch",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
},
"runtimeArgs": [
"${workspaceRoot}/main.js",
"--remote-debugging-port=9222"
],
"webRoot": "${workspaceRoot}"
}
]
}
Also tried this example from Microsoft's "vscode-recipes" – with the same result as above: "breakpoint set but not bound" in the renderer process.
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Electron: Main",
"protocol": "inspector",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"runtimeArgs": [
"--remote-debugging-port=9223",
"."
],
"windows": {
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
}
},
{
"name": "Electron: Renderer",
"type": "chrome",
"request": "attach",
"port": 9223,
"webRoot": "${workspaceFolder}",
"timeout": 30000
}
],
"compounds": [
{
"name": "Electron: All",
"configurations": [
"Electron: Main",
"Electron: Renderer"
]
}
]
}
I've been struggling for months with the "breakpoint set but not bound" issue when trying to debug the renderer process in Electron. I will spend a few hours searching around, trying sample launch configurations, trying various suggestions (e.g. Electron main and renderer process debug configuration) and then I give up, until next time. . .
It DID work in VSC 5 or 6 versions ago and then it broke. I've been all over the VSC github "issues" pages and nothing works. I am able to debug the main process.
My project structure is shown below. I am not using webpack, angular, react or any other framework like that.
Does anyone have a launch configuration that works wwith this sort of set up? "console.log()" is getting really old . . .
I'm basically exactly using your second launch.json from vscode recipes. I do now recall having similar issues and these two things worked:
Start the renderer with devtools, and then Ctrl+R inside the devtools to refresh it for breakpoints to start working. (though this will rerun the script in the renderer, which may have unexpected effects)
Start your app using the "Electron: Main" configuration. When you app has started, switch to the "Electron: Renderer" option, click the triangle, and from the dropdown that should appear in the middle of VSCode, select the one that lists your app name. Then, breakpoints should work.
The JS source maps for Kendo UI that I am using are failing to map properly in Chrome because of the question mark entry in the sources property. Chrome tries to load js/src/js/? which just returns the directory listing. After that the debugger points to (index):9 for references to all minified scripts.
{
"version": 3,
"file": "kendo.core.min.js",
"sources": [
"?",
"kendo.core.js"
],
"names": [
"f",
"define",
"$",
"undefined",
"..."
],
"mappings": "CAAA,SAAUA,EAAGC,QACTA,...",
"sourceRoot": "../../src/js/"
}
What does the question mark mean? And is it necessary or should I remove it to make the source maps function properly?