I have a project migrated to angular 12.2 with the package.json file configured like this:
{
"name": "xxxx",
"version": "1",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"#agm/core": "^3.0.0-beta.0",
"#angular-slider/ngx-slider": "^2.0.3",
"#angular/animations": "~12.2.0",
"#angular/cdk": "^12.2.11",
"#angular/common": "~12.2.0",
"#angular/compiler": "~12.2.0",
"#angular/core": "~12.2.0",
"#angular/forms": "~12.2.0",
"#angular/platform-browser": "~12.2.0",
"#angular/platform-browser-dynamic": "~12.2.0",
"#angular/router": "~12.2.0",
"#angularclass/hmr": "^3.0.0",
"#ngx-translate/core": "^13.0.0",
"#ngx-translate/http-loader": "^6.0.0",
"#types/geojson": "^7946.0.8",
"#types/googlemaps": "^3.39.12",
"angular-2-local-storage": "^3.0.2",
"angular2-highcharts": "^0.5.5",
"angular2-query-builder": "^0.6.2",
"animate.css": "^4.1.1",
"chart.js": "^3.6.0",
"core-js": "^3.19.0",
"d3-array": "^3.1.1",
"file-saver": "^2.0.5",
"font-awesome": "^4.7.0",
"fullcalendar": "^5.10.0",
"geojson": "^0.5.0",
"gzip-all": "^1.0.0",
"highcharts": "^9.3.0",
"jexl": "^2.3.0",
"jquery": "^3.6.0",
"jsbarcode": "^3.11.5",
"moment": "^2.29.1",
"nanoscroller": "^0.8.7",
"ng2-dragula": "^2.1.1",
"ngx-localized-numbers": "^0.4.1",
"ngx-schema-form": "^2.6.6",
"node-sass": "^6.0.1",
"pg": "^8.7.1",
"primeicons": "^4.1.0",
"primeng": "^12.2.1",
"quill": "^1.3.7",
"rxjs": "~6.6.0",
"ts-helpers": "^1.1.2",
"tslib": "^2.3.0",
"typescript": "^4.2.4",
"uuid": "^8.3.2",
"venn.js": "^0.2.20",
"xlsx": "^0.17.3",
"z-schema": "^4.2.4",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~12.2.11",
"#angular/cli": "~12.2.11",
"#angular/compiler-cli": "~12.2.0",
"#angular/language-service": "^12.2.11",
"#types/angular": "^1.8.3",
"#types/jasmine": "~3.8.0",
"#types/jasminewd2": "^2.0.10",
"#types/jquery": "^3.5.8",
"#types/node": "^12.20.36",
"codelyzer": "^6.0.2",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "^7.0.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-coverage-istanbul-reporter": "^3.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"protractor": "^7.0.0",
"ts-node": "^10.4.0"
}
}
The tsconfig.app.json file is configured like this:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": ["googlemaps","jquery","node"]
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
The tsconfig.json file is configured like this:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2018","dom"],
"module": "es2020",
"moduleResolution": "node",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"target": "es2017",
"typeRoots": ["./node_modules/#types"]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true,
//"enableIvy": false,
"strictDomEventTypes": false
}
}
Unfortunately, no data binding is done on any variable of any view, why?
I am using the same configuration on an angular 10 project and everything works fine.
Thanks.
At this time I solved it like this:
example I replaced {{variable}} with <span [innerText]="variable"></span>
However I didn't understand why I can't use {{variable}} syntax ... I hope someone can help me.
Thanks.
Related
Hi everyone I was trying to implement Tailwind in angular, I installed tailwindcss post css and autoprefixer
{
"name": "ip-tracker",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"#angular/animations": "~13.0.0",
"#angular/common": "~13.0.0",
"#angular/compiler": "~13.0.0",
"#angular/core": "~13.0.0",
"#angular/forms": "~13.0.0",
"#angular/platform-browser": "~13.0.0",
"#angular/platform-browser-dynamic": "~13.0.0",
"#angular/router": "~13.0.0",
"leaflet": "^1.7.1",
"rxjs": "~7.4.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~13.0.1",
"#angular/cli": "~13.0.1",
"#angular/compiler-cli": "~13.0.0",
"#types/jasmine": "~3.10.0",
"#types/node": "^12.11.1",
"autoprefixer": "^10.4.2",
"jasmine-core": "~3.10.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"postcss": "^8.4.6",
"tailwindcss": "^2.1.2",
"typescript": "~4.4.3"
}
}
and I imported the styles in the style.scss file:
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
and here is my tailwind.config.js file:
module.exports = {
mode: "jit",
purge: {
enabled: true,
content: ["./src/**/*.{html,ts}"],
},
darkMode: false,
theme: {
extend: {},
screens: {
sm: "375px",
lg: "1440px",
},
colors: {
"very-dark-grey": "hsl(0, 0%, 17%)",
"dark-grey": "hsl(0, 0%, 59%)",
},
fontFamily: {
sans: ["Rubik", "sans-serif"],
},
},
plugins: [
require("postcss-import"),
require("tailwindcss"),
require("autoprefixer"),
],
};
but when I use one of the tailwind classes I don't see the style applied to the elements:
<h1 class="text-white">Test</h1>
Can anyone tell me where am I wrong and why?
Thanks so much...
I can't able to figure out the issue. But I tried with the same configuration that you posted above in my tailwind.config.js file. It works fine for me.
My tailwind.config.js file
module.exports =[ {
mode: "jit",
purge: {
enabled: true,
content: ["./src/**/*.{html,ts}"],
},
darkMode: false,
theme: {
extend: {},
screens: {
sm: "375px",
lg: "1440px",
},
colors: {
"very-dark-grey": "hsl(0, 0%, 17%)",
"dark-grey": "hsl(0, 0%, 59%)",
},
fontFamily: {
sans: ["Rubik", "sans-serif"],
},
},
plugins: [
require("postcss-import"),
require("tailwindcss"),
require("autoprefixer"),
]
}]
My Package.json file
{
"name": "tailwind-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"#angular/animations": "~13.0.0",
"#angular/common": "~13.0.0",
"#angular/compiler": "~13.0.0",
"#angular/core": "~13.0.0",
"#angular/forms": "~13.0.0",
"#angular/platform-browser": "~13.0.0",
"#angular/platform-browser-dynamic": "~13.0.0",
"#angular/router": "~13.0.0",
"rxjs": "~7.4.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~13.0.0",
"#angular/cli": "~13.0.0",
"#angular/compiler-cli": "~13.0.0",
"#types/jasmine": "~3.10.0",
"#types/node": "^12.11.1",
"autoprefixer": "^10.4.2",
"jasmine-core": "~3.10.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"postcss": "^8.4.6",
"tailwindcss": "^2.1.2",
"typescript": "~4.4.3"
}
}
styles.css
My app.component.html
Output
To create custom styles, in tailwind.config.js extend object must be added to theme. Inside extend a colors object is added, where its key-value is the name of the custom color and its corresponding value
...
theme: {
extend: {
colors: {
"very-dark-grey": "hsl(0, 0%, 17%)",
"dark-grey": "hsl(0, 0%, 59%)",
},
},
...
How to uninstall ng-multiselect-dropdown? I tried with npm uninstall ng-multiselect-dropdown, but it did not uninstalled.
ng remove ng-multiselect-dropdown also not working.
This is my package.json
{
"_from": "ng-multiselect-dropdown",
"_id": "ng-multiselect-dropdown#0.3.4",
"_inBundle": false,
"_integrity": "sha512-ZUzA4apGY7Y0MW7scF35iPYy4/DpIRhZcQiTICDJFs66+JoJOE+YqA+Tx9C2Ylv0B8tADX7PAsTQL9Jys1vWiQ==",
"_location": "/ng-multiselect-dropdown",
"_phantomChildren": {},
"_requested": {
"type": "tag",
"registry": true,
"raw": "ng-multiselect-dropdown",
"name": "ng-multiselect-dropdown",
"escapedName": "ng-multiselect-dropdown",
"rawSpec": "",
"saveSpec": null,
"fetchSpec": "latest"
},
"_requiredBy": [
"#USER",
"/"
],
"bugs": {
"url": "https://github.com/nileshpatel17/ng-multiselect-dropdown/issues"
},
"bundleDependencies": false,
"dependencies": {
"tslib": "^1.9.0"
},
"deprecated": false,
"description": "Angular Multi-Select Dropdown",
"devDependencies": {
"#angular-devkit/build-angular": "~0.802.2",
"#angular/animations": "8.2.2",
"#angular/cli": "^8.2.2",
"#angular/common": "8.2.2",
"#angular/compiler": "8.2.2",
"#angular/compiler-cli": "8.2.2",
"#angular/core": "8.2.2",
"#angular/forms": "8.2.2",
"#angular/http": "7.2.15",
"#angular/language-service": "8.2.2",
"#angular/platform-browser": "8.2.2",
"#angular/platform-browser-dynamic": "8.2.2",
"#angular/router": "8.2.2",
"#types/jasmine": "~3.4.0",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~12.7.2",
"angular-cli-ghpages": "^0.6.0-rc.2",
"angular2-markdown": "^2.2.3",
"codelyzer": "~5.1.0",
"copyfiles": "^2.0.0",
"core-js": "^3.2.1",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"jest": "^24.9.0",
"jest-preset-angular": "^7.1.1",
"karma": "~4.2.0",
"karma-chrome-launcher": "~3.1.0",
"karma-cli": "~2.0.0",
"karma-coverage-istanbul-reporter": "^2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"ng-multiselect-dropdown": "^0.2.11",
"ng-packagr": "^5.5.0",
"ngx-bootstrap": "^5.1.1",
"protractor": "~5.4.2",
"rimraf": "^3.0.0",
"rxjs": "^6.2.1",
"rxjs-compat": "^6.2.1",
"ts-node": "~8.3.0",
"tslint": "~5.19.0",
"typescript": "3.5.3",
"zone.js": "^0.10.2"
},
"es2015_ivy_ngcc": "__ivy_ngcc__/fesm2015/ng-multiselect-dropdown.js",
"es2015": "fesm2015/ng-multiselect-dropdown.js",
"esm2015": "esm2015/ng-multiselect-dropdown.js",
"esm5": "esm5/ng-multiselect-dropdown.js",
"fesm2015_ivy_ngcc": "__ivy_ngcc__/fesm2015/ng-multiselect-dropdown.js",
"fesm2015": "fesm2015/ng-multiselect-dropdown.js",
"fesm5": "fesm5/ng-multiselect-dropdown.js",
"homepage": "https://github.com/nileshpatel17/ng-multiselect-dropdown#readme",
"keywords": [
"angular4",
"angular8",
"angular multiselect dropdown",
"angular4 multiselect dropdown",
"angular8 multiselect dropdown",
"ng multiselect dropdown",
"ng4 multiselect dropdown",
"ng8 multiselect dropdown"
],
"license": "MIT",
"main": "bundles/ng-multiselect-dropdown.umd.js",
"metadata": "ng-multiselect-dropdown.metadata.json",
"module": "fesm5/ng-multiselect-dropdown.js",
"name": "ng-multiselect-dropdown",
"peerDependencies": {
"#angular/common": ">=2.0.0",
"#angular/core": ">=2.0.0"
},
"private": false,
"repository": {
"type": "git",
"url": "git+https://github.com/nileshpatel17/ng-multiselect-dropdown.git"
},
"sideEffects": false,
"typings": "ng-multiselect-dropdown.d.ts",
"version": "0.3.4",
"__processed_by_ivy_ngcc__": {
"es2015": "11.0.9",
"esm2015": "11.0.9",
"esm5": "11.0.9",
"fesm2015": "11.0.9",
"fesm5": "11.0.9",
"main": "11.0.9",
"module": "11.0.9",
"typings": "11.0.9"
},
"scripts": {
"prepublishOnly": "node --eval \"console.error('ERROR: Trying to publish a package that has been compiled by NGCC. This is not allowed.\\nPlease delete and rebuild the package, without compiling with NGCC, before attempting to publish.\\nNote that NGCC may have been run by importing this package into another project that is being built with Ivy enabled.\\n')\" && exit 1"
}
}
could anyone help me?
try
npm uninstall ng-multiselect-dropdown
I am using ionic 5 with angular 8 in my project. I have introduced Sass variables SCSS files which is not getting converted into CSS. I can see only SCSS file compiled while serving with ionic serve command.
What am I doing wrong here? How to compile SCSS into CSS in live reload always. Please suggest a way. Thanks in advance.
$secondary-color: #162a38;
$base-color: #407294;
.custom-alert .alert-input {
color: $base-color !important;
}
My package.json look like below:
"dependencies":
"#angular/common": "~8.1.2",
"#angular/core": "~8.1.2",
"#angular/fire": "^5.2.3",
"#angular/forms": "~8.1.2",
"#angular/platform-browser": "~8.1.2",
"#angular/platform-browser-dynamic": "~8.1.2",
"#angular/router": "~8.1.2",
"#fortawesome/angular-fontawesome": "^0.5.0",
"#fortawesome/fontawesome-svg-core": "^1.2.32",
"#fortawesome/free-brands-svg-icons": "^5.15.1",
"#fortawesome/free-regular-svg-icons": "^5.15.1",
"#fortawesome/free-solid-svg-icons": "^5.15.1",
"#ionic-native/base64": "^5.29.0",
"#ionic-native/core": "^5.0.0",
"#ionic-native/file": "^5.29.0",
"#ionic-native/file-chooser": "^5.29.0",
"#ionic-native/file-path": "^5.29.0",
"#ionic-native/splash-screen": "^5.0.0",
"#ionic-native/status-bar": "^5.0.0",
"#ionic/angular": "^5.4.0",
"#ionic/core": "5.4.0",
"#ionic/storage": "^2.2.0",
"#types/jquery": "^3.5.1",
"com-badrit-base64": "^0.2.0",
"cordova": "^9.0.0",
"cordova-android": "8.1.0",
"cordova-ios": "5.1.0",
"cordova-plugin-camera": "^4.1.0",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-filechooser": "^1.2.0",
"cordova-plugin-filepath": "^1.5.8",
"cordova-sqlite-storage": "^4.0.0",
"core-js": "^2.5.4",
"fast-glob": "^3.2.4",
"firebase": "^7.6.1",
"ionicons": "^5.2.3",
"jquery": "^3.5.1",
"lodash": "^4.17.20",
"ngx-quill": "^12.0.1",
"npm": "^6.13.4",
"quill": "^1.3.7",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
"devDependencies":
"#angular-devkit/architect": "~0.801.2",
"#angular-devkit/build-angular": "~0.801.2",
"#angular-devkit/core": "~8.1.2",
"#angular-devkit/schematics": "~8.1.2",
"#angular/cli": "~8.1.2",
"#angular/compiler": "~8.1.2",
"#angular/compiler-cli": "~8.1.2",
"#angular/language-service": "~8.1.2",
"#ionic-native/camera": "^5.19.0",
"#ionic/angular-toolkit": "^2.1.1",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^4.1.3",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
My angular.json build scripts looks like below:
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "www",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
],
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
}
],
"scripts": []
},
{
"name": "multilingual",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"start": "ionic-app-scripts serve",
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve --sourceMap source-map --iscordovaserve --wwwDir platforms/browser/www/ --buildDir platforms/browser/www/build"
},
"dependencies": {
"#angular/animations": "5.2.11",
"#angular/common": "5.2.11",
"#angular/compiler": "5.2.11",
"#angular/compiler-cli": "5.2.11",
"#angular/core": "^5.0.0",
"#angular/fire": "^6.0.2",
"#angular/forms": "5.2.11",
"#angular/http": "5.2.11",
"#angular/platform-browser": "5.2.11",
"#angular/platform-browser-dynamic": "5.2.11",
"#ionic-native/badge": "^4.20.0",
"#ionic-native/camera": "^4.20.0",
"#ionic-native/core": "~4.18.0",
"#ionic-native/file": "^4.20.0",
"#ionic-native/file-chooser": "^4.20.0",
"#ionic-native/file-transfer": "^4.20.0",
"#ionic-native/firebase": "^4.20.0",
"#ionic-native/geolocation": "^5.0.0",
"#ionic-native/local-notifications": "^4.20.0",
"#ionic-native/push": "^4.20.0",
"#ionic-native/sms": "^5.0.0",
"#ionic-native/splash-screen": "~4.18.0",
"#ionic-native/status-bar": "~4.18.0",
"#ionic-native/video-player": "^4.20.0",
"#ionic-native/youtube-video-player": "^4.20.0",
"#ionic/storage": "2.2.0",
"#ngx-translate/core": "^9.1.1",
"#ngx-translate/http-loader": "^4.0.0",
//here i feel something
"angularfire2": "^5.4.2",
"aws-sdk": "^2.734.0",
"bootstrap": "^4.2.1",
"chart.js": "^2.9.3",
"com.razorpay.cordova": "git+https://github.com/razorpay/razorpay-cordova.git",
"cordova-android": "^7.1.4",
"cordova-browser": "6.0.0",
"cordova-ios": "4.5.5",
"cordova-plugin-badge": "0.8.8",
"cordova-plugin-camera": "^4.0.3",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-file": "^6.0.1",
"cordova-plugin-file-transfer": "^1.7.1",
"cordova-plugin-filechooser": "^1.2.0",
"cordova-plugin-firebase": "^2.0.5",
"cordova-plugin-firebase-lib": "3.3.0",
"cordova-plugin-geolocation": "4.0.1",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^2.3.2",
"cordova-plugin-local-notification": "0.9.0-beta.2",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-plugin-youtube-video-player": "^2.4.0",
"cordova-sms-plugin": "1.0.0",
"cordova-support-google-services": "1.1.0",
"firebase": "^7.19.0",
"ionic-angular": "3.9.2",
"ionic-select-searchable": "^2.10.0",
"ionic3-star-rating": "^2.1.2",
"ionicons": "3.0.0",
"leaflet": "^1.6.0",
"leaflet-ant-path": "^1.3.0",
"mapmyindia-map-cordova-ionic-beta": "^0.1.6",
"moment": "^2.27.0",
"ng2-charts-x": "^2.0.6",
"npm-git-install": "^0.3.0",
"phonegap-plugin-multidex": "1.0.0",
"phonegap-plugin-push": "2.2.3",
"razorpay": "^2.0.3",
"rxjs": "^6.0.0",
"rxjs-compat": "^6.4.0",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.26"
},
"devDependencies": {
"#ionic/app-scripts": "3.2.2",
"#ionic/cli-plugin-cordova": "1.6.2",
"#ionic/cli-plugin-ionic-angular": "1.4.1",
"#ionic/lab": "1.0.18",
"#types/node": "^14.0.27",
"typescript": "^3.9.7"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {},
"com.razorpay.cordova": {},
"cordova-plugin-geolocation": {
"GEOLOCATION_USAGE_DESCRIPTION": "To locate you"
},
"cordova-sms-plugin": {},
"cordova-plugin-local-notification": {},
"phonegap-plugin-push": {
"SENDER_ID": "382684905628",
"ANDROID_SUPPORT_V13_VERSION": "27.+",
"FCM_VERSION": "11.6.2"
},
"cordova-plugin-badge": {},
"cordova-plugin-camera": {},
"cordova-plugin-filechooser": {},
"cordova-plugin-file-transfer": {},
"cordova-plugin-file": {},
"cordova-plugin-youtube-video-player": {},
"cordova-plugin-firebase": {}
},
"platforms": [
"android",
"browser",
"ios"
]
}
}
Angular 5.2.5 site. The site works fine on Chrome, Firefox, IE and Edge. In Safari the first time the site loads (or every time if I disable the cache) the content is there but it appears the color and background-color are the same. I removed the sites custome CSS and it gave the same behavior. If the user has cache enabled and they log out then log back in the content correctly shows in the right colors. In the screen shot below I used my mouse to highlight the text fields, just to show that the component correctly loaded in the route but everything is the background color. I also included my package.json.
package.json
{
"name": "mss",
"version": "1.0.0",
"private": true,
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"keywords": [],
"author": "JFI",
"licenses": [
{
"type": "MIT",
"url": "https://github.com/angular/angular.io/blob/master/LICENSE"
}
],
"dependencies": {
"#angular/animations": "5.2.5",
"#angular/cdk": "5.2.5",
"#angular/cli": "1.7.3",
"#angular/common": "5.2.5",
"#angular/compiler": "5.2.5",
"#angular/compiler-cli": "5.2.5",
"#angular/core": "5.2.5",
"#angular/flex-layout": "5.0.0-beta.13",
"#angular/forms": "5.2.5",
"#angular/http": "5.2.5",
"#angular/material": "5.2.5",
"#angular/platform-browser": "5.2.5",
"#angular/platform-browser-dynamic": "5.2.5",
"#angular/platform-server": "5.2.5",
"#angular/router": "5.2.5",
"#angular/upgrade": "5.2.5",
"animate.css": "3.6.1",
"bootstrap": "3.3.7",
"classlist.js": "1.1.20150312",
"core-js": "2.5.7",
"glob": "7.1.2",
"intl": "1.2.5",
"jquery": "3.3.1",
"rxjs": "5.5.6",
"systemjs": "0.20.17",
"typescript": "2.6.2",
"web-animations-js": "2.3.1",
"zone.js": "0.8.20"
},
"devDependencies": {
"#ng-bootstrap/ng-bootstrap": "1.1.1",
"#ng-idle/core": "2.0.0-beta.13",
"#ng-idle/keepalive": "2.0.0-beta.13",
"#swimlane/ngx-charts": "6.1.0",
"#types/angular-idle": "1.1.31",
"#types/core-js": "0.9.43",
"#types/jquery": "3.3.11",
"#types/metismenu": "2.7.1",
"#types/node": "8.0.24",
"#types/selenium-webdriver": "3.0.4",
"angular-calendar": "0.23.7",
"angular-draggable-droppable": "1.0.1",
"angular-resizable-element": "1.2.1",
"angular2-toaster": "4.0.0",
"calendar-utils": "0.1.1",
"css-loader": "0.28.5",
"d3": "4.10.0",
"date-fns": "1.29.0",
"font-awesome": "4.7.0",
"gulp": "3.9.1",
"gulp-clean": "0.3.2",
"gulp-typescript": "3.1.3",
"gulp-util": "3.0.7",
"hammerjs": "2.0.8",
"jquery-slimscroll": "1.3.8",
"less": "3.8.1",
"less-loader": "4.0.5",
"lodash": "4.16.4",
"lodash._reinterpolate": "3.0.0",
"lodash.template": "4.4.0",
"lodash.templatesettings": "4.1.0",
"metismenu": "2.7.4",
"ngx-bootstrap": "2.0.3",
"ngx-breadcrumbs": "0.0.3",
"ngx-cookie": "2.0.1",
"ngx-pagination": "3.0.3",
"positioning": "1.3.0",
"signature_pad": "2.3.2",
"slimscroll": "0.9.1",
"sweetalert2": "7.4.0",
"ts-node": "2.0.0",
"tslint": "4.5.0"
}
}
I could not reproduce this in plunker or stackblitz.
I did fix this. In the main.ts i changed
platformBrowserDynamic().bootstrapModule(AppModule)
to
window.onload = function () { platformBrowserDynamic().bootstrapModule(AppModule); }
It seems like Safari was starting the angular application before all the js files have been unpacked.