Our app (https://web.hashlearn.com) is built with Vuetify works and looks awesome in all browsers except IE11 (we don't support < IE11). This is essentially a Rails app with Webpacker, VueJS, and Vuetify (0.16.9). Most of the things seem to work except a few issues in IE11, the icons just don't show up in IE. I've tried multiple things including:
Installing and including babel-polyfill via npm and importing it into our application.js
Including babel-polyfill via Webpacker entry config as suggested here: https://github.com/rails/webpacker/issues/523#issuecomment-309871748
.babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": "> 1%",
"node": "current",
"uglify": true
},
"useBuiltIns": true
}]
],
"plugins": [
"transform-object-rest-spread",
"syntax-dynamic-import",
["transform-class-properties", { "spec": true }],
["transform-runtime", { "polyfill": false, "regenerator": true }]
]
}
Has anybody faced this kind of issues? how did you solve the issues? Most of the issues reported in GitHub don't seem to have proper solutions though.
Related
I'm trying to build an electron app with electron builder,
but I encountered a problem: my network blocks packages from GitHub on downloading.
Is there any other way to disable the look for the packages while online?
the script code:
"electron:admin": "electron-builder -c.extraMetadata.main=build/main.js",
the electron builder part of package.json:
"build": {
"extends": null,
"icon": "build/logo.ico",
"files": [
"build/**/*",
"package.json"
],
"extraFiles": [
{
"from": "../database-client.db",
"to": "./database-client.db",
"filter": [
"**/*"
]
},
{
"from": "../clientUploads/",
"to": "./uploads/",
"filter": [
"**/*"
]
}
],
"directories": {
"buildResources": "assets"
}
},
I'm building for windows only
I solved that by building the application outside the network and copying the AppData files of electron and electron builder.
When I'm building the app I turn down the connection to the internet so the electron builder will not look for the GitHub packages.
I still did not find a way to do that While I'm online.
My Angular tsconfig does not detect my Cypress 12.3 types. I've tried all kinds of things to get this working, short of starting my Cypress project over (which I suspect would work).
My code runs fine but I cannot resolve this situation pictured here in my IDE:
At the moment, my cypress/tsconfig.json looks like this:
{
"extends": "../tsconfig.spec.json",
"files": [
"../cypress/**/*.ts",
"../cypress.config.ts",
"../node_modules/cypress"
],
"compilerOptions": {
"sourceMap": false,
"types": ["cypress", "node", "jasmine-expect", "chai"]
}
}
The above config is trying to prefer jasmine expect type over chai expect, which I REQUIRE.
Ok, I found the solution. Must be careful about using files rather than include/exclude:
{
"extends": "../tsconfig.spec.json",
"include": [
"**/*.ts",
"../cypress.config.ts",
"../node_modules/cypress"
],
"exclude": [
"../src/**/*.ts"
],
"compilerOptions": {
"sourceMap": false,
"types": ["cypress", "node", "jasmine-expect"]
}
}
While installing the appx now i am able to see logo on launcher/install popup screen.
This worked when i made below changes:
1)Downgraded electron-builder version to: 20.39.0
2)Changed the directories entry in package.json as :
directories:{
"buildResources": "build",
"output": "build"}
3)Created appx named folder inside the build directory and created the build directory at package.json level
4)Added icon named "StoreLogo.png" inside build/appx directory that we have created earlier.
5)add the entry of the same in :
"win": {
"icon":"build/appx/StoreLogo.png"
}
6)After this just create the appx using electron-builder -w appx command
Now I have one more doubt after complete installation i am still seeing the default electron logo at the task-bar and also in the apps & features if i search for my application.
On the launcher/install popup i am able to see the app logo like below hidden with red color:
After installing and launching the app i am still able to see the default electron icon in the taskbar as below highlighted in red:
This is how my package.json build property looks:
{
"build": {
"extraFiles": [
"node_modules/ionic-enterprise-couchbase-lite-electron/**/*"
],
"publish": [
{
"provider": "generic",
"url": "***********"
}
],
"appId": "**************",
"nsis": {
"perMachine": true,
"oneClick": false,
"allowToChangeInstallationDirectory": true
},
"squirrelWindows": {},
"files": [
"electron.js",
"www/**/*",
"build/Square150x150Logo.png",
"build/Square44x44Logo.png"
],
"directories": {
"buildResources": "build",
"output": "build"
},
"appx": {
"identityName": "myApp",
"publisher": "CN=*************************",
"publisherDisplayName": "my Company",
"applicationId": "myApp",
"displayName": "myApp",
"backgroundColor": "#f2f4f7"
},
"win": {
"certificateFile": "./certs/CordovaApp.Windows10_StoreKey.pfx",
"publisherName": "my Company",
"icon": "build/appx/StoreLogo.png",
"target": [
{
"target": "nsis",
"arch": [
"ia32"
]
},
"appx",
"msi"
]
},
"nodeGypRebuild": "false",
"npmRebuild": "false"
}
}
I tried adding all related resources as mentioned in : https://www.electron.build/configuration/appx but it started giving error of invalid manifest when creating a appx.
So can anyone please help me to resolve this issue?
I solved the issue by doing below changes:
1) Added the assets mentioned in the appx link: https://www.electron.build/configuration/appx
2) created appx folder in the build directory, keep the package.json as mentioned above.
3)Make sure the app logos named should be specific as metioned in the link .PNG format.
4)Earlier I had icon names as e.g: Square44x44Logo.png format .PNG then after changing the name to Square44x44Logo kept format .PNG as it is I was able to solve installed app issue.
What i realized by this is naming convention does matter a lot in case of applying icons. So the main issue caused due to pont 4.
Im trying to set up my own Extension, for having in the all kind of changes to my Site. I set up typo3 9.5.5 via. Composer. The next step was building up my own extension. I followed the official docs and also added a composer.json, but it wont show up in the Extension Manager.
ext_emconf
<?php
$EM_CONF[$_EXTKEY]=[
'title'=>'MS Site Extension',
'description'=>'TYPO3 Site Extionsion',
'category'=>'plugin',
'author'=>'-',
'author_company'=>'-',
'author_email'=>'-',
'state'=>'alpha',
'clearCacheOnLoad'=>true,
'version'=>'0.0.1',
'constraints'=>[
'depends'=>[
'typo3'=>'9.5.5-9.9.99',
],
],
'autoload'=>[
'psr-4'=>[
'Ms\\MsSite\\'=>'Classes'
],
],
];
composer.json of the extension
{
"name": "ms/ms_site",
"type": "typo3-cms-extension",
"description": "MS SITE",
"license": [
"GPL-2.0+"
],
"keywords": [
"typo3",
"cms",
"ms",
"ms_site"
],
"version": "0.0.1-dev",
"require": {
"typo3/cms": "^9.5"
},
"autoload-dev": {
"psr-4": {
"Ms\\MsSite\\": "Classes/"
},
"replace": {
"hellotypo3": "self.version",
"typo3-ter/ms_site": "self.version"
},
"extra": {
"typo3/cms": {
"extension-key": "ms_site"
}
}
}
}
I'm a bit confused what I have to do now, the only place where my extension currently is, is at: typo3conf/ext, I configured it in the ext_emconf and the composer.json of the extension.
How do I solve this problem?
Edit: Hmm my console tells me that ms_site is added to PackageStates but I still can't see my Extension in my Backend ...
I'm just tilted and dumb, after over 4 hours of searching I recognized my mistake ... I just didnt uploaded the data to my server. :) I thought that I enabled an auto upload but it wasn't.
I am working on an angular-cli v1.0.5 (angular 4) project. Below is the output of the ng -v command.
#angular/cli: 1.0.5
node: 6.10.3
os: win32 x64
#angular/common: 4.1.3
#angular/compiler: 4.1.3
#angular/core: 4.1.3
#angular/forms: 4.1.3
#angular/http: 4.1.3
#angular/platform-browser: 4.1.3
#angular/platform-browser-dynamic: 4.1.3
#angular/router: 4.1.3
#angular/cli: 1.0.5
#angular/compiler-cli: 4.1.3
I am also using;
Typescript version 2.3.4
Webpack version 2.2.1
Chrome Version 58.0.3029.110 (64-bit)
Windows 10
VS Code version 1.13.0
Debugger for Chrome version 3.1.2
I am trying to get debugging to work in VS Code but all of my breakpoints are dimmed and when I hover over them, I get the message "Breakpoint ignored because generated code was not found."
Directory Structure - My project starts in the masclient folder. This is where my package.json and angular-cli.json files are at. Within the masclient folder, I have a src folder and within the src folder, I have an app folder. My angular 4 app.module.ts is in this folder. All of my components are in their own folders below the app folder. The specific typescript file I am trying to debug is in the masclient\src\app\bulk-labels\create-bulk-labels folder
My launch.json file is shown below;
{
"version": "0.2.0",
"configurations": [
{
"name": "LaunchChrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/src",
"diagnosticLogging": false,
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"sourceMapPathOverrides": {
"webpack:///C:*": "c:/*"
}
},
{
"name": "AttachChrome",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}/src",
"diagnosticLogging": true,
"sourceMapPathOverrides": {
"webpack:///*": "/*"
}
}
]
}
My angular-cli.json is shown below;
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"project": {
"name": "masclient"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "masc",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles/vendor.scss",
"styles/main.scss"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/tether/dist/js/tether.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"component": {}
}
}
My tsconfig.json file is shown below;
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2016",
"dom"
]
}
}
I have gone through several recommendations I have found on Google with no luck. Most seem to refer to the process before angular-cli switched to webpack. There seem to be a lot of variation of property settings in the launch.json file. As I read through the posts before deciding to post my own question here, it seems that the issue may be related to the fact that the ng serve process keeps all of the compiled files in memory rather than pulling the map files from a ./dist folder... but I am not sure how that would change the location settings in the launch.json file.
I start debugging using the following process;
Run ng serve from the command line to start the web server
From within VS Code, I go to the Debug section and click on the green arrow next to "Launch Chrome" ( or press F5)
I have also tried this process;
Run ng serve from the command line to start the web server
Launch chrome.exe --remote-debugging-port=9222 from an admin level command prompt.
In the instance of Chrome that launched, navigate to locaohost:4200
From within VS Code, I go to the Debug section and click on the green arrow next to "Launch Chrome" ( or press F5)
With either of the startup methods listed above, wile viewing my source code *.ts files in the VS Code editor, I can see that my breakpoints are grayed out as soon as the debugger starts.
I am sure it probably just a matter of getting my settings in the various config files synced properly, but after several hours of research, the actual solution has eluded me.
Any help would be greatly appreciated.