Error in importing MatTabChangeEvent - angular-material

I am trying to use the angular material library.
I have added the dependency for #angular/material in package.json as follows
"#angular/animations": "^5.0.0",
"#angular/cdk": "^6.0.0",
"#angular/material": "^5.2.5",
When I use
import { MatTabChangeEvent } from '#angular/material';
It throws the error while compilation
ERROR in [at-loader] ./node_modules/#angular/material/stepper/typings/stepper.d.ts:28:5
TS2416: Property '_stepHeader' in type 'MatStepper' is not assignable to the same property in base type 'CdkStepper'.
Type 'QueryList<ElementRef>' is not assignable to type 'QueryList<FocusableOption>'.
Type 'ElementRef' is not assignable to type 'FocusableOption'.
Property 'focus' is missing in type 'ElementRef'.
I haven't added any code related to angular material, except that import line.

in angular 9 the folder structure has changed
"#angular/material": "^9.2.0",
to get the type use
import { MatTabChangeEvent } from '#angular/material/tabs';

You need to ensure that you have the same versions of Angular CDK and Material, as well as have the Angular version for Angular Material and CDK.
In this case, upgrade all your dependencies to Angular 6:
npm install #angular/cdk #angular/material
Or:
npm update

Related

How to fix error TS2339: Property 'tz' does not exist on type 'Moment'?

In rails app, I created frontend app which uses angular. Here I am using moment and moment-timezone like
"moment": "^2.22.2",
"moment-timezone": "^0.5.23",
In timezone.service.ts importing and using like
import * as moment from 'moment-timezone';
import {Moment} from 'moment';
public parseDatetime(datetime:string, format?:string):Moment {
var d = moment.utc(datetime, format);
if (this.ConfigurationService.isTimezoneSet()) {
d.local();
d.tz(this.ConfigurationService.timezone());
}
return d;
}
While running bundle exec rake assets:precompile getting ERROR in src/app/components/datetime/timezone.service.ts(55,9): error TS2339: Property 'tz' does not exist on type 'Moment'. src/app/components/datetime/timezone.service.ts(80,23): error TS2339: Property 'tz' does not exist on type 'typeof moment'.
npm version is 6.4.1
node version is v8.12.0
ruby verson is ruby 2.6.1p33 (2019-01-30 revision 66950) [x86_64-linux]
Please help me to solve this issue.
I think you need to update your version of moment-timezone. There is a documented bug on 5.28, but since you're using a lower version in might exist there as well.
https://github.com/moment/moment-timezone/issues/906
this states that 5.33 and 5.31 are without error and in a rails app, using moment-timezone 5.40 I am able to us the tz function without error.
ds.tz("America/Chicago")
From my working package.json
"moment": "^2.29.4",
"moment-timezone": "^0.5.40",

knockout Typescript definition errors for TS > 2.2

I have new empty ASP MVC 5.0 project created in Visual Studio. I have added following nuget packages:
knockout.TypeScript.DefinitelyTyped 1.1.6
knockoutjs 3.4.2
my tsconfig.json file:
{
"compileOnSave": true,
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5"
},
"exclude": [
"node_modules",
"wwwroot"
]
}
When my project is set to use TypeScript 2.2 and I build the project then everything works but if I change to use any newer version for example 2.7 I am receiving around 34 errors in knockout.d.ts file like this:
Property 'push' of type '(...items: T[]) => void' is not assignable to string index type 'KnockoutBindingHandler'
Property 'remove' of type '{ (item: T): T[]; (removeFunction: (item: T) => boolean): T[]; }' is not assignable to string index type 'KnockoutBindingHandler'
To workaround this problem I have downloaded new knockout definition from https://www.npmjs.com/package/#types/knockout and replace the file added by nuget and now I have no errors.
My questions:
1. Are the typescript definitions nuget packages up to date?
2. how to configure Visual studio project to use npm
Are the typescript definitions nuget packages up to date?
No - The knockout.d.ts provided in the nuget package will not compile using newer versions of the TypeScript compiler, probably breaking around 2.4 or 2.5, so it is out of date. This answer has some info on that https://stackoverflow.com/a/45569371/678338
how to configure Visual studio project to use npm
I would uninstall the knockout.TypeScript.DefinitelyTyped nuget package and make sure that the ~\Scripts\typings\knockout\knockout.d.ts file is gone. Assuming you have node/npm installed on your machine do the following in the root of your webapp
npm init
npm install --save #types/knockout
then a .ts file like this will compile without errors (and you should get intellisense on the ko reference)
import * as ko from 'knockout'
class Test {
name = ko.observable();
}

React Native: SyntaxError: Strict mode does not allow function declarations in a lexically nested statement

I've started getting this error on iOS after upgrading from React Native 0.22.2 and upgrading a few plugins. I've tried downgrading and reinstalling everything but I can't get rid fix it. Anyone else encountered this:
SyntaxError: Strict mode does not allow function declarations in a lexically nested statement.
Update #1:
In addition to reverting the modules I've commented out any 'use strict';
One of the things I updated was npm and node. I'm running node v5.3.0 and npm v3.8.3. I don't remember what versions I had...
Update #2:
There are the modules I'm using in react native:
"dependencies": {
"deep-freeze": "github:substack/deep-freeze",
"react": "^0.14.7",
"react-native": "^0.22.2",
"react-native-activity-view": "^0.2.8",
"react-native-animated-progress-bar": "^1.0.0",
"react-native-audio": "^1.0.0",
"react-native-camera": "git+https://github.com/lwansbrough/react-native-camera.git",
"react-native-device-info": "^0.9.1",
"react-native-fs": "^1.2.0",
"react-native-html-to-pdf": "^0.1.2",
"react-native-in-app-utils": "^2.3.0",
"react-native-mail": "^0.2.4",
"react-native-passcode-auth": "^1.0.0",
"react-native-router-flux": "^2.3.13",
"react-native-save-asset-library": "^1.0.0",
"react-native-touch-id": "^1.2.4",
"react-native-transfer": "^1.0.2",
"react-native-utils": "^1.0.1",
"react-native-webkit-localstorage-reader": "^1.0.0",
"react-redux": "^3.1.2",
"redux": "^3.0.5",
"redux-thunk": "^2.0.1"
}
Update #3
With the thought that downgrading to React Native 0.21.0 would fix this problem I did the following:
Deleted the node_modules folder
Changed package.json's react-native version from 0.22.2 to 0.21.0 and removed the react entry (I think that's only a requirement for 0.22.2).
Ran npm install
Ran npm start --reset-cache
Opened xcode and ran the app on the simulator.
Unfortunately, I'm still getting the same error. Just to make sure it wasn't something external to my project I created a brand new react-native project and it ran fine (even with react native 0.22.2). So it's something to do with my project but I can't for the life of me figure out what I did to cause this. :(
This error happens because babel now adds 'use strict' to all modules. And it doesn't allow defining a function inside a lexical block like if
If the error comes from a library you could try to find which one cause it and add it to a .babelignore file.
You can also disable strict mode completely by using a .babelrc file with
{
"plugins": [
"syntax-async-functions",
"syntax-class-properties",
"syntax-trailing-function-commas",
"transform-class-properties",
"transform-es2015-arrow-functions",
"transform-es2015-block-scoping",
"transform-es2015-classes",
"transform-es2015-computed-properties",
"transform-es2015-constants",
"transform-es2015-destructuring",
["transform-es2015-modules-commonjs", { "strict": false, "allowTopLevelThis": true }],
"transform-es2015-parameters",
"transform-es2015-shorthand-properties",
"transform-es2015-spread",
"transform-es2015-template-literals",
"transform-flow-strip-types",
"transform-object-assign",
"transform-object-rest-spread",
"transform-react-display-name",
"transform-react-jsx",
"transform-regenerator",
["transform-es2015-for-of", { "loose": true }]
]
}
Note: make sure to clear the packager cache (npm start -- --reset-cache) to make sure all the transforms are run again.

Cannot install material design lite for dart

I cannot seem to install MDL for Dart. My files are very simple.
pubspec.yaml:
name: mdl_test
dependencies:
mdl: "^1.0.0"
browser: '^0.10.0'
di: "^3.3.4"
transformers:
- di
main.dart:
import 'package:mdl/mdl.dart' as mdl;
main() async {
mdl.registerMdl();
await mdl.componentFactory().run();
}
I am getting multiple errors. Example: Target of URI does not exist: package:logging/logging.dart - I checked, and logging is downloaded properly.
There are many "Target of URI does not exist" errors as well. It seems that packages in main.dart are imported fine, but packages installed with pub, that import other packages, are not working. Does anyone know why this is, or what the fix is? Thanks.

Unable to find suitable version for underscore

I get the following error:
Message:
Unable to find suitable version for underscore
Details:
code: ECONFLICT
picks: [object Object],[object Object],[object Object]
With the following bower file, this error I have never come across before. I cannot use the interactive shell, as this gets deployed to continuous integration. We also prefer to use Github repo links (don't ask me why) over bower packages.
{
"name": "Nightbird",
"version": "0.0.1",
"main": "src/css/style.scss",
"dependencies": {
"backbone": "git#github.com:jashkenas/backbone.git#1.1.2",
"underscore": "git#github.com:jashkenas/underscore.git#1.6.0",
"aisis-bootstrap-theme": "git#github.com:AdamKyle/Aisis-Bootstrap-Theme.git#0.5.0",
"selectize.js": "git#github.com:brianreavis/selectize.js.git#0.8",
"underscore.string": "git#github.com:epeli/underscore.string.git#v2.3.2",
"jquery-bootpag": "git#github.com:botmonster/jquery-bootpag.git#1.0.5",
"underscore.inflection": "git#github.com:jeremyruppel/underscore.inflection.git",
"moment": "git#github.com:moment/moment.git",
"bootstrap-markdown": "git#github.com:toopay/bootstrap-markdown.git#2.5.0",
"markdown-js": "git#github.com:evilstreak/markdown-js.git#v0.5.0",
"to-markdown": "git#github.com:domchristie/to-markdown.git#v0.0.2",
"font-awesome": "git#github.com:FortAwesome/Font-Awesome.git#4.2.0",
"react-bower": "git#github.com:reactjs/react-bower.git#0.11.1",
"showdown": "git#github.com:coreyti/showdown.git#0.3.1",
"pure": "git#github.com:yahoo/pure.git#0.5.0"
}
}
Any idea whats going on? Is this a bug? or just a developer being dumb?
You have a conflict between 3 different versions of underscore.
The reason for this is that underscore is required by 3 of your dependencies: Nightbird, backbone and underscore.inflection.
Using the latest version of Bower you can see the following information:
Unable to find a suitable version for underscore, please choose one:
1) underscore#1.6.0 which resolved to 1.6.0 and is required by Nightbird
2) underscore#>=1.5.0 which resolved to 1.6.0 and is required by backbone#1.1.2
3) underscore#~1.7.0 which resolved to 1.7.0 and is required by underscore.inflection#1.2.0
You can force bower to use a specific version in case of resolution by adding the following to your bower.json. In this example it will force using 1.6.0:
"resolutions": {
"underscore": "1.6.0"
}

Resources