Installed angular/cdk using npm install --save #angular/cdk than imported import {A11yModule} from '#angular/cdk/a11y'; to app.module file. Tried to use in simple div
<div cdkTrapFocus>
<button>1</button>
<button>2 </button>
<button>3 </button>
</div>
but it not work tried to find more information in internet, but as I see for examples people are using same cdkTrapFocus directive in div
I found why for me It doesn't worked I had several modules like app.module, shared.module, component.module and for some reason my import in shared module which I import later in to app.module was not working, so I tried to import that to component.module and then It started to work.
Related
The following import
import mockingoose from 'mockingoose';
gives an error Could not find a declaration file for module 'mockingoose'. with TypeScript.
According to this npm page,
mockingoose provides its own type definitions, so you don't need #types/mockingoose installed!
I'm not sure how to fix this.
I created a codesandbox with a minimal working implementation of MUI's Datepicker:
https://codesandbox.io/s/proud-pond-fb4rm?file=/src/App.js
*Edited to add my index.tsx:
import React from 'react';
import ReactDOM from 'react-dom';
import {DatePicker, LocalizationProvider} from "#mui/lab";
import {TextField} from "#mui/material";
import AdapterDateFns from "#mui/lab/AdapterDateFns";
ReactDOM.render(
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
renderInput={(props) => <TextField {...props} />}
value={null}
onChange={() => null}
/>
</LocalizationProvider>
, document.getElementById('root')
)
This implementation throws errors in my project (prevents rendering), although I have the same versions installed. I linked my package-lock file for good measure in case I'm wrong.
Clearly not a bug, and seemingly not a mismatch in package versions, what else could be causing this?
package-lock.json
As suspected, the clue was in my package-lock.json. Note to self: Always a good idea to have a look there when issue has been isolated and confirmed unique to a given project!
I had two different versions of #date-io/date-fns installed:
1.x.x (entry in package-json)
2.x.x (installed as dependency)
I was following a tutorial, and I originally tried typing
from specreduce.calibration_data import load_MAST_calspec, which gave the same error.
I'm not sure how to properly import specreduce, so if anyone could show me how to do that I would be very appreciative!
Installing astropy only installs the core astropy package. specreduce is apparently an affiliated package--a separate special-purpose package built on Astropy. It seems they have not published a release on PyPI so you should contact its authors to ask how best to install it. It seems for now you might be able to install directly from the repository with pip install git+https://github.com/astropy/specreduce.git.
I tried to add RTCPeerConnection from adapterJS, but my typescript wouldn't allow me to do that.
Always import from lib.es6 instead off adapterJS.
I installed adapterJS via this command npm install webrtc-adapter --save
And I tried to do sth like this:
import RTCPeerConnection from 'webrtc-adapter';
or
import adapter from 'webrtc-adapter';
But it always fails.
What I'm doing wrong guys?
That was totally misunderstanding!
Adapter is working out of the box, it's the layer between my component and the javascript interpreter in browser.
So adapter is working fine, I don'w have to import them.
All I have to do is import 'webrtc'; in typings.d.ts
I want to use the material-ui icons in the svg-icons folder I did with npm install, but the implementations of each icon on each js file have different import like the ones in the action or in the editor etc. I had to look through the js file to find how to import each icon. I want a documentation or site that specifically lets me to copy paste the import of each icon.
I was looking for **navigate next** icon from google design and found it in
import ImageNavigateNext from 'material-ui/svg-icons/image/navigate-next';
Pre v1
You can just look up the category and name on Icons.
Every SvgIcon will map to:
import MyIconName from 'material-ui/svg-icons/<category>/<name>';
For example if I want the account balance icon which is part of the action category I would import.
import BalanceIcon from 'material-ui/svg-icons/action/account-balance';
Notice that spaces will become dashes. So the list you want is on the link above.
v1
With the new version of material-ui the icons are in their own package material-ui-icons. Now you only have to lookup the name and PascalCase it to find the correct name. The category is no longer relevant. So:
import BalanceIcon from 'material-ui/svg-icons/action/account-balance';
Becomes:
import BalanceIcon from 'material-ui-icons/AccountBalance';
You can search for the icon names in your project subdirectory node_modules/#material-ui/icons.
ls node_modules/#material-ui/icons/*.js | grep -v 'Outlined' | grep -v 'Rounded' | grep -v 'Sharp' | grep -v 'TwoTone'
node_modules/#material-ui/icons/AccessAlarm.js
node_modules/#material-ui/icons/AccessAlarms.js
node_modules/#material-ui/icons/Accessibility.js
node_modules/#material-ui/icons/AccessibilityNew.js
node_modules/#material-ui/icons/AccessibleForward.js
node_modules/#material-ui/icons/Accessible.js
node_modules/#material-ui/icons/AccessTime.js
node_modules/#material-ui/icons/AccountBalance.js
node_modules/#material-ui/icons/AccountBalanceWallet.js
node_modules/#material-ui/icons/AccountBox.js
node_modules/#material-ui/icons/AccountCircle.js
node_modules/#material-ui/icons/AcUnit.js
material-ui #v1.0.0-beta.41 is deprecated and in material-ui #v1.0.0-beta.42 It does not having svg-icons module (material-ui/svg-icons)
So to use the module present in svg-icons in now we have t install material-ui-icons.
**I faced this error and after searching got to know. **
Module not found:Can't resolve 'material-ui/MenuItem'
Module not found: Can't resolve 'material-ui/svg-icons/file/file-download'
Module not found: Can't resolve 'material-ui/svg-icons/content/content-copy'
Module not found: Can't resolve 'material-ui/svg-icons/toggle/star-border'
Module not found: Can't resolve 'material-ui/svg-icons/action/delete'
Module not found: Can't resolve 'material-ui/svg-icons/image/remove-red-eye';
Example:
After installing material-ui #v1.0.0-beta.42 also install
material-ui-icons link:
material-ui-icons
npm install --save material-ui-icons
Few modules which are not present in material-ui #v1.0.0-beta.42 are
and that are present in 'material-ui-icons':
// import MenuItem from 'material-ui/MenuItem';//this was used in version material-ui #v1.0.0-beta.41
import { MenuItem } from 'material-ui/Menu';//Now in version material-ui #v1.0.0-beta.42, also need to install material-ui-icons
// import RemoveRedEye from 'material-ui/svg-icons/image/remove-red-eye';
import RemoveRedEye from 'material-ui-icons/RemoveRedEye';
import PersonAdd from 'material-ui-icons/PersonAdd';
// import ContentCopy from 'material-ui/svg-icons/content/content-copy';
import ContentCopy from 'material-ui-icons/ContentCopy';
// import Download from 'material-ui/svg-icons/file/file-download';
import FileDownload from 'material-ui-icons/FileDownload';
// import Delete from 'material-ui/svg-icons/action/delete';
import Delete from 'material-ui-icons/Delete';
// import StarBorder from 'material-ui/svg-icons/toggle/star-border';
import StarBorder from 'material-ui-icons/StarBorder';