Angular Material Design - not getting tabs - angular-material

I want implement MD tabs. Here is my very simple test code:
<mat-tab-group>
<mat-tab label="system" routerLink="syspref"> Default Preferences </mat-tab>
<mat-tab label="user" routerLink="userpref"> User Preferences </mat-tab>
</mat-tab-group>
And here is my project configuration:
Package Version
-----------------------------------------------------------
#angular-devkit/architect 0.801.0
#angular-devkit/build-angular 0.801.0
#angular-devkit/build-optimizer 0.801.0
#angular-devkit/build-webpack 0.801.0
#angular-devkit/core 8.1.0
#angular-devkit/schematics 8.1.0
#angular/cdk 8.2.3
#angular/flex-layout 7.0.0-beta.24
#angular/material 8.2.3
#ngtools/webpack 8.1.0
#schematics/angular 8.1.0
#schematics/update 0.801.0
rxjs 6.5.2
typescript 3.4.5
webpack 4.35.2
AS I understand Angular MD is installed.
But all get when I run the app is this:
Am I missing styles or something?
Thanks

Related

Sentry on React Native: Building for iOS breaks with "property 'options' not found on object of type 'PrivateSentrySDKOnly'"

I am using CircleCI to build for iOS (and Android) and recently, the iOS build fails with these error messages:
Compiling RNSentry.m
❌ /Users/distiller/project/node_modules/#sentry/react-native/ios/RNSentry.m:107:79: property 'options' not found on object of type 'PrivateSentrySDKOnly'
if (appIsActive && !sentHybridSdkDidBecomeActive && (PrivateSentrySDKOnly.options.enableAutoSessionTracking || PrivateSentrySDKOnly.options.enableOutOfMemoryTracking)) {
^
❌ /Users/distiller/project/node_modules/#sentry/react-native/ios/RNSentry.m:107:137: property 'options' not found on object of type 'PrivateSentrySDKOnly'
if (appIsActive && !sentHybridSdkDidBecomeActive && (PrivateSentrySDKOnly.options.enableAutoSessionTracking || PrivateSentrySDKOnly.options.enableOutOfMemoryTracking)) {
^
❌ /Users/distiller/project/node_modules/#sentry/react-native/ios/RNSentry.m:155:39: property 'getSdkName' not found on object of type 'PrivateSentrySDKOnly'
#"name": PrivateSentrySDKOnly.getSdkName,
^
❌ /Users/distiller/project/node_modules/#sentry/react-native/ios/RNSentry.m:195:34: property 'options' not found on object of type 'PrivateSentrySDKOnly'
if (PrivateSentrySDKOnly.options.debug
It has once worked to build for iOS, and I think this has something to do with the version of Sentry; I think I tried to update the Sentry version to 4.9.0, only to find that 4.9.0 has some serious issues (I think). I am not smart enough to dechiffer exactly what the conclusions here are, but I think it relates:
https://github.com/getsentry/sentry-cocoa/issues/1665
https://github.com/getsentry/sentry-react-native/issues/2530
(I was looking for another URL that related, but cant find now)
Android works to build with the configs and whatnot, but iOS fails. I am not sure what do to do resolve this, and I would like some input =)
the package.json has Sentry 4.8.0:
"dependencies": {
"#react-native-async-storage/async-storage": "^1.17.4",
"#react-native-community/cli-platform-android": "^6.3.0",
"#sentry/react-native": "4.8.0",
"#turf/distance": "^6.0.1",
"axios": "^1.1.1",
"dotenv": "^16.0.0",
"eventing-bus": "^2.0.1",
"jetifier": "^2.0.0",
"lodash": "^4.17.15",
"moment": "^2.29.3",
"moment-timezone": "^0.5.34",
"patch-package": "^6.4.7",
"react": "17.0.2",
"react-native": "0.67.4",
Here is the rest of my config/setup:
PS C:\Github\alfaonlinev3> npx react-native doctor
Common
✓ Node.js
✓ yarn
Android
✓ JDK
✖ Android Studio - Required for building and installing your app on Android
✓ Android SDK - Required for building and installing your app on Android
✓ ANDROID_HOME
Errors: 1
Warnings: 0
Note: I have Android Studio installed, and it is working for Android native project. No idea why doctor complains or how to resolve it, other than downloading another copy of Android studio?
envinfo:
Visual Studio code: 1.73.1
System:
OS: Windows 10 10.0.19044
CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
Memory: 5.01 GB / 31.95 GB
Binaries:
Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
Managers:
pip2: 19.2.3 - C:\Python27\Scripts\pip2.EXE
pip3: 21.1.1 - C:\Python39\Scripts\pip3.EXE
Utilities:
Git: 2.34.1.
SDKs:
Android SDK:
API Levels: 28, 29, 30, 31, 33
Build Tools: 28.0.3, 29.0.0, 29.0.2, 29.0.3, 30.0.2, 30.0.3, 31.0.0
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
IDEs:
VSCode: 1.73.1 - C:\Program Files\Microsoft VS Code\bin\code.CMD
Visual Studio: 17.3.32519.111 (Visual Studio Community 2022), 16.11.32106.194 (Visual Studio Community 2019)
Languages:
Java: 19.0.1
Python: 3.9.5
Databases:
SQLite: 3.32.2 - C:\Users\wagge\AppData\Local\Android\Sdk\platform-tools\sqlite3.EXE
Browsers:
Chrome: 107.0.5304.121
Edge: Spartan (44.19041.1266.0), Chromium (107.0.1418.56)
Internet Explorer: 11.0.19041.1566
IDEs:
Android Studio: Not Found
Visual Studio: 17.3.32519.111 (Visual Studio Community 2022), 16.11.32106.194 (Visual Studio Community 2019)
Languages:
Java: 19.0.1
npmPackages:
#react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.67.4 => 0.67.4
react-native-windows: Not Found
npmGlobalPackages:
*react-native*: Not Found
UPDATE
I ran npm-update, it suggested updating sentry to 4.10.1. After that was done, I see this change in package.json:
also yarn.lock
but still, the builds fails with the same error.
UPDATE 2
I check podfile.* and I see stuff like:
podfile.lock:
- RNSentry (3.4.2):
- React-Core
- Sentry (= 7.11.0)
- RNSnackbar (2.4.0):
- React-Core
- RNSVG (9.13.6):
- React
- Sentry (7.11.0):
- Sentry/Core (= 7.11.0)
- Sentry/Core (7.11.0)
The file podfile does not contain "sentry" at all.
Looks like it is your problem:
https://github.com/getsentry/sentry-react-native/pull/2599/files
Try to upgrade react native sentry to 4.10.1
From your podfile.lock it looks like you have an old version of the RNSentry pod installed.
- RNSentry (3.4.2):
Try to run the following:
cd ios
pod update RNSentry
The RNSentry must be the same version as #sentry/react-native. So in your case it should've been 4.10.1.

Two language angular builds, one ok one with error

I have two almost identical lines in the script section of my package.json:
"build-i18n:de": "ng build --output-path=../m_access/dist/de --aot --prod --base-href /de/ --i18n-file=src/locale/messages.de.xlf --i18n-format=xlf --i18n-locale=de",
"build-i18n:en": "ng build --output-path=../m_access/dist/en --aot --prod --base-href /en/ --i18n-file=src/locale/messages.en.xlf --i18n-format=xlf --i18n-locale=en",
The npm run build-i18n succeeds, the german one npm run build-i18n:de fails with an error message ERROR in Cannot read property 'start' of null.
How to find such an error, which is ok in one language, but not in another?
EDIT-1
angular-version:
Angular CLI: 7.1.3
Node: 8.11.3
OS: win32 x64
Angular: 7.1.3
... cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
-----------------------------------------------------------
#angular-devkit/architect 0.11.3
#angular-devkit/build-angular 0.11.3
#angular-devkit/build-optimizer 0.11.3
#angular-devkit/build-webpack 0.11.3
#angular-devkit/core 7.1.3
#angular-devkit/schematics 7.1.3
#angular/animations 7.1.4
#angular/cdk 7.2.0
#angular/material 7.2.0
#ngtools/webpack 7.1.3
#schematics/angular 7.1.3
#schematics/update 0.11.3
rxjs 6.3.3
typescript 3.1.6
webpack 4.23.1
$ npm --version
6.5.0
$ node --version
v8.11.3
I found the root cause of this issue, it was a missing / in the closing part of target:
<target>Password<target>
has to be
<target>Password</target>
Hopefully this can help others with similar issue.

Is AngularDart 4 compatible with Dart 2 & build_runner 0.8?

Currently on
Dart VM version: 2.0.0-dev.49.0
angular ^4.0.0
Linux
Dartium
One of the upgrade requirement for Dart 2 upgrade # https://webdev-dartlang-org-dev.firebaseapp.com/dart-2 is to use build_runner 0.8 which from the error code is not compatible with Angular4.
My pubspec.yaml looks like
name: JRapha
description: A web app that uses AngularDart Components
version: 0.0.1
environment:
sdk: '>=2.0.0-dev.49.0 <2.0.0'
dependencies:
angular: ^4.0.0
dev_dependencies:
angular_test: ^1.0.0
test: ^0.12.30
build_runner: ^0.8.2
build_test: ^0.10.1
build_web_compilers: ^0.3.6
web:
compiler:
debug: dartdevc
The Error when running pub get
Because angular_compiler >=0.2.1 <0.3.0+1 depends on build ^0.10.0 and no versions of angular_compiler match >0.3.0+1 <0.4.0, angular_compiler >=0.2.1 <0.3.0+1 or >0.3.0+1 <0.4.0 requires build ^0.10.0.
And because angular >=4.0.0-beta <5.0.0-alpha depends on angular_compiler ^0.3.0, angular >=4.0.0-beta <5.0.0-alpha requires build ^0.10.0 or angular_compiler 0.3.0+1. And because angular_compiler 0.3.0+1 depends on build >=0.10.0 <0.12.0 and build_web_compilers >=0.2.1 depends on build ^0.12.0, angular >=4.0.0-beta <5.0.0-alpha is incompatible with
build_web_compilers >=0.2.1.
So, because JRapha depends on both angular ^4.0.0 and build_web_compilers ^0.3.6, version solving
failed.
Is there a solution to running AngularDart4 with Dart v2?
No, it is not compatible.
Only AngularDart v5 is compatible with Dart2 and build_runner.

ion-select component of Ionic 3 not working in IOS 9

We have developed one application using Ionic 3. We have used ion-select component at multiple places. In android & IOS version > 10, everything is working fine as expected.
But In IOS 9, ion-select component breaks. It shows blank options when tapping on ion-select.
<ion-item>
<ion-label>Gender</ion-label>
<ion-select>
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
</ion-item>
Result:
Environment Details:
Specific IOS version in which issue is reproducible: 9.3.5
global packages:
#ionic/cli-utils : 1.5.0
Cordova CLI : 6.5.0
Ionic CLI : 3.5.0
local packages:
#ionic/app-scripts : 1.3.7
#ionic/cli-plugin-cordova : 1.4.1
#ionic/cli-plugin-ionic-angular : 1.3.2
Cordova Platforms : android 6.1.2 ios 4.2.1
Ionic Framework : ionic-angular 3.7.1-201710060319
System:
Node : v7.8.0
OS : OS X El Capitan
Xcode : Xcode 8.2.1 Build version 8C1002
ios-deploy : 1.9.1
ios-sim : 5.0.13
npm : 4.2.0
I was able to resolve the issue by downgrading the app-scripts version to 2.1.4 from 3.0.1.
I also had to add dev dependency tsc-wrapped to resolve some ts lint issues.
"devDependencies": {
"#angular/tsc-wrapped": "^4.4.6",
"#ionic/app-scripts": "2.1.4",
"typescript": "2.3.4"
},
After changing my configuration to above, the webpack process duration came down to 3-4 minutes from 35 minutes.

Ionic build ios is stuck

I have trouble making a build in IOS, when I do a build in android not show any problema.No shows no mistake is only hung with the following message:
ionic build ios
Running command: /Users/kaos/Documents/Proyectos/Ionic/voxMonitor/hooks/after_prepare/010_add_platform_class.js /Users/kaos/Documents/Proyectos/Ionic/voxMonitor
add to body class: platform-ios
Building project: /Users/kaos/Documents/Proyectos/Ionic/voxMonitor/platforms/ios/voxMonitor.xcodeproj
Configuration: Debug
Platform: emulator
2016-09-14 00:57:11.666 xcodebuild[81377:2780361] [MT] PluginLoading: Required plug-in compatibility UUID 8A66E736-A720-4B3C-92F1-33D9962C69DF for plug-in at path '~/Library/Application Support/Developer/Shared/Xcode/Plug-ins/XcodeColors.xcplugin' not present in DVTPlugInCompatibilityUUIDs
2016-09-14 00:57:11.668 xcodebuild[81377:2780361] [MT] PluginLoading: Required plug-in compatibility UUID 8A66E736-A720-4B3C-92F1-33D9962C69DF for plug-in at path '~/Library/Application Support/Developer/Shared/Xcode/Plug-ins/OMQuickHelp.xcplugin' not present in DVTPlugInCompatibilityUUIDs
2016-09-14 00:57:11.669 xcodebuild[81377:2780361] [MT] PluginLoading: Required plug-in compatibility UUID 8A66E736-A720-4B3C-92F1-33D9962C69DF for plug-in at path '~/Library/Application Support/Developer/Shared/Xcode/Plug-ins/Alcatraz.xcplugin' not present in DVTPlugInCompatibilityUUIDs
Build settings from command line:
CONFIGURATION_BUILD_DIR = /Users/kaos/Documents/Proyectos/Ionic/voxMonitor/platforms/ios/build/emulator
SDKROOT = iphonesimulator10.0
SHARED_PRECOMPS_DIR = /Users/kaos/Documents/Proyectos/Ionic/voxMonitor/platforms/ios/build/sharedpch
Build settings from configuration file '/Users/kaos/Documents/Proyectos/Ionic/voxMonitor/platforms/ios/cordova/build-debug.xcconfig':
CLANG_ALLOW_NON_MODULAR_INCLUDES_IN_FRAMEWORK_MODULES = YES
CODE_SIGN_IDENTITY = iPhone Developer
ENABLE_BITCODE = NO
GCC_PREPROCESSOR_DEFINITIONS = DEBUG=1
HEADER_SEARCH_PATHS = "$(TARGET_BUILD_DIR)/usr/local/lib/include" "$(OBJROOT)/UninstalledProducts/include" "$(OBJROOT)/UninstalledProducts/$(PLATFORM_NAME)/include" "$(BUILT_PRODUCTS_DIR)"
IPHONEOS_DEPLOYMENT_TARGET = 8.0
OTHER_LDFLAGS = -ObjC
SWIFT_OBJC_BRIDGING_HEADER = $(PROJECT_DIR)/$(PROJECT_NAME)/Bridging-Header.h
TARGETED_DEVICE_FAMILY = 1,2
when I try to open the file xcodeproj, xcode does not start and waits indefinitely until the force exit.
My ionic info :
Your system information:
Cordova CLI: 6.3.1
Ionic Framework Version: 1.3.1
Ionic CLI Version: 2.0.0-beta.37
Ionic App Lib Version: 2.0.0-beta.20
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v6.5.0
Xcode version: Xcode 8.0 Build version 8A218a
worth mentioning that I am currently using MacOS Sierra GM and Xcode 8 gm.
Edit : when creating a new project and replace the www directory with the version in my project, I can build ios, but once you modify any file no longer compile I can, being hung on the screen above.
The origin of the problem is the project folder is inside the Documents directory which in turn is synchronized to iCloud, so when you move the project to another directory that is not Documents or Desktop, you can build without problems. In this thread on github shows other users who managed to fix it this way.
https://github.com/driftyco/ionic-cli/issues/1401#issuecomment-254989260
Follow these steps(And Before following these steps make sure you have installed IOS SDK on your system)
Remove Hooks with command $ionic hooks remove
Remove Platform with command $ionic platform remove ios
Now Add Hooks with command $ionic hooks add
Now add platform with command $ionic platform ios
Now create build with command $ionic build ios
Now Run your application with command $ionic run ios
My case was the build would hang/stuck when running $ ionic cordova build ios. OS is MacOS Mojave.
My solution was to update ionic and cordova environment. Worth doing ionic cordova build ios --verbose to see what is happening during the build process.
$ brew link --overwrite ios-deploy
$ npm update -g native-run
$ npm install -g cordova ionic
$ npm install -g ionic-angular#latest
Config before update:
Ionic:
Ionic CLI : 5.2.1 (/usr/local/lib/node_modules/ionic)
Ionic Framework : #ionic/angular 4.6.0
#angular-devkit/build-angular : 0.13.9
#angular-devkit/schematics : 7.2.4
#angular/cli : 7.2.4
#ionic/angular-toolkit : 1.3.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : android 8.1.0, ios 5.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 23 other plugins)
Utility:
cordova-res : 0.9.0
native-run : 0.2.7 (update available: 0.3.0)
System:
Android SDK Tools : 26.1.1 (/Users/haule/Library/Android/sdk)
ios-deploy : 1.10.0
ios-sim : 8.0.2
NodeJS : v10.19.0 (/usr/local/Cellar/node#10/10.19.0/bin/node)
npm : 6.13.4
OS : macOS Mojave
Xcode : Xcode 11.3.1 Build version 11C504
Config after update:
Ionic:
Ionic CLI : 5.4.16 (/usr/local/lib/node_modules/ionic)
Ionic Framework : #ionic/angular 4.6.0
#angular-devkit/build-angular : 0.13.9
#angular-devkit/schematics : 7.2.4
#angular/cli : 7.2.4
#ionic/angular-toolkit : 1.3.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : android 8.1.0, ios 5.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 23 other plugins)
Utility:
cordova-res : 0.9.0
native-run : 0.3.0
System:
Android SDK Tools : 26.1.1 (/Users/haule/Library/Android/sdk)
ios-deploy : 1.10.0
ios-sim : 8.0.2
NodeJS : v10.19.0 (/usr/local/Cellar/node#10/10.19.0/bin/node)
npm : 6.13.4
OS : macOS Mojave
Xcode : Xcode 11.3.1 Build version 11C504

Resources