I'm working on a simple angular project where I am trying to import Material Design into my project but some of the components aren't working properly and a console warning says:
Could not find HammerJS. Certain Angular Material components may not work correctly.
I have hammerjs installed and also #angular/material. How do I resolve this issue?
Sidenote
It may be worth noting that if you have hammerjs installed and your components are still not rendering correctly to make sure you are using angular material components and not html elements with materialize-css classes.
If you are using materialize-css instead of angular material, you will need to add it to your project separately.
In your package.json file add this to dependencies
"hammerjs": "^2.0.8",
Or if you want an alternative automatic way just you can type npm i hammerjs --save (or npm i hammerjs#2.0.8 --save if you want, since 2.0.8 is the latest version nowdays) in your root project folder and test then, if the problem still occurring try to delete the node_modules folder and reinstall it in the root project folder also by running npm install which will check the dependencies (where hammerjs resides), devDependencies ..., in package.json file and install them.
Also in your polyfills.ts (recommended to have a one if you have not)
import 'hammerjs/hammer';
Thus, it would be found while your angular app is executed since polyfills.ts itself is called by import (in a normal case, else you can check it) in main.ts which is the angular apps' entry point.
Install hammerjs
with npm
npm install --save hammerjs
(or) with yarn
yarn add hammerjs
Then import hammerjs on your app's entry point (e.g. src/main.ts).
import 'hammerjs';
In your systemjs.config.js file you also need to add the following entry:
'hammerjs': 'npm:hammerjs/hammer.js',
along with of course:
'#angular/material': 'npm:#angular/material/bundles/material.umd.js',
The other thing that's missing from your code (at least based on what you have in the GH repo) is the inclusion of the Material Design CSS, add this to your index.html file:
<link href="https://rawgit.com/angular/material2-builds/master/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
I hope this helps.
this worked for me (and this is with ionic4 as well)
I could make hammer.js work - and also ionic with material.angular.io (in the bottom)
Hammer + ionic (hammer + angular as well):
npm install --save hammerjs
npm install --save #types/hammerjs
then
package.json
make sure in dependencies there is this line
"hammerjs": "^2.0.8",
then
tsconfig.json - added types as seen below
"compilerOptions": {
...
...
"types": [
"hammerjs"
]
}
then
in app.component.ts (only there)
import 'hammerjs';
then
in html file (I just took out the first and last < > signs)
div id="myElement"></div
in .ts file
Sample code from hammerjs site works
let element2 = document.getElementById('myElement');
let hamming = new Hammer(element2);
hamming.on("panleft panright tap press pressup", function(ev) {
element2.textContent = ev.type +" gesture detected.";
console.log(ev.type +" gesture detected.");
});
Hammer+ionic+material:
to make material hammer work with ionic
in app.module
import { HAMMER_GESTURE_CONFIG } from '#angular/platform-browser';
import { GestureConfig } from '#angular/material';
providers: [
{ provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig },
]
and voila, your material slider works.
Open your command line or powershell, type the directory of your angular2 project: cd your-project's-root, hit enter and paste:
npm install hammerjs --save
Npm will automatically add all dependencies into your package.json file.
npm install hammerjs --save
npm install #types/hammerjs --save-dev
add this to typescript.config under compiler options
"types": [
"hammerjs"
]
add this to app.components.ts:
Install with
npm install --save hammerjs
or
yarn add hammerjs
After installing, import it on your app's entry point (e.g. src/main.ts).
import 'hammerjs';
Angular Material Getting Started Guide
Starting from Angular 9 you need to add HammerModule to imports array of your AppModule. Please, find the example below:
...
import {
BrowserModule,
TransferState,
BrowserTransferStateModule,
HammerModule, // <-- Hammer Module
} from '#angular/platform-browser';
...
#NgModule({
declarations: [
AppComponent,
],
imports: [
HttpClientModule,
AppRoutingModule,
HammerModule, // <-- Hammer Module
],
bootstrap: [AppComponent],
})
export class AppModule { }
Don't forget to do npm install or yarn add for adding hammerjs to your project. For a more convenient way, it will be better to install #types/hammerjs
Other than importing hammerJS separately,we can provide this gesture recognition feature to yes while installing angular material(version 8) library with the following command.
npm add #angular/material
Set up HammerJS for gesture recognition?-Yes
Verify the 'hammerjs' is imported into main.ts file
Related
Is it possible to import one React app(built using create-react-app) into another completely different React app. We all have imported components in our SPA, but is it possible to import a different app entirely? If so how?
Furthermore, both these react apps MIGHT share a few similar dependencies/files/libraries.. such as bootstrap/css/Redux stores/etc. Also, with a possibility of a few common reducers. These common reducers, might need to interact/listen to actions in-between these two react app.
Lets say we have:
ReactDOM.render(<Provider store={store}><MainApp /></Provider>, document.getElementById('root'));
Could i add another app like this(that was NOT built in this), and target another nod in the dom???
ReactDOM.render(<Provider store={store}><ExternalAPP /></Provider>, document.getElementById('root22'));
Has this ever been done before? React compresses all our components into "chunks" which are basically js files.
Thank you, for any tips/suggestions/hints
You can use npm pack command.
It creates a tarball (.tgz) file from your current app. Then move this file your other app folder then run:
npm install app1 (assuming app1 is your first app name).
After it is installed, you can see your app1 files inside the node_modules/App1/. Now your can import the files or components you want and use it in other apps.
Hope this helps.
Also Checkout this: https://docs.npmjs.com/cli-commands/pack.html
One way that worked for me is to bring the CRA to Github and npm install it as a dependency. I highly encourage you to check out this resource which explains in detail how to prepare a React component for this process. Follow the steps in the linked tutorial up to #3, then bring everything (including the /dist folder) to Github. Then, do npm install org_name/repo_nameand install it as a dependency in your second React app. Then, to import a specific component, you can do something like import { Button } from 'repo_name/dist/index' or reference whatever file you used to export your components.
In case the link doesn't work, here are the steps in the article:
Create a folder called lib that stores all the components you want to bring to the other react app. Also define a file called index.js in this folder that exports these components.
Create a repo for the components on Github
Install Babel and build the dist folder.(npm install --save-dev #babel/core #babel/cli #babel/preset-env and npm install -save #babel/polyfill)
Add the following config file to the top-level folder of your project:
{
"presets": [
[
"#babel/env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
"useBuiltIns": "usage",
"corejs": "3.6.5"
}
],
"#babel/preset-react"
]
}
In package.json, replace the build script with the following: "build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files";
Run the command npm run build
I'm trying to do a library of components for React and publish on npm using webpack and babel to compile to Es5.
Almost everything worked, but for some reason, the project that consumes this lib cant auto import their components
I have a project on github with the setup I used:
https://github.com/dattebayorob/react-loading
//webpack.config.js
https://github.com/dattebayorob/react-loading/blob/master/webpack.config.js
//.babelrc
https://github.com/dattebayorob/react-loading/blob/master/.babelrc
//package.json
https://github.com/dattebayorob/react-loading/blob/master/package.json
I'm expecting to import components from my lib with 'CTRL+space' when typing then
Now, I can import from my lib manualy with import { Component } from 'my-react-lib'
Sometimes, when using Typescript in VSCode, you have to run the Typescript: Restart TS Server command in your command palette for auto import to work after creating new files. It's a bug.
On dattebayorob/react-loading/index.d.ts try:
export * from './src/components'
In package.json, you have "main": "./index.d.ts", but that's not a valid JS file, as it does not contain actual code, only type definitions.
In a library, usually you need to have an src/index.js file that imports / exports all components and in package.json you add the build artifact as main: "main": "dist/index.js".
Also, don't forget to explicitly specify the files: ["dist"] attribute in package.json so the src folder is not downloaded when your package is installed.
I have followed many tutorials, but as of yet, I did not manage to make PrimeNG's Editor module to show up! (Other modules like Toast or buttons are working fine, it's only Editor that is not working).
So here is what I did:
Import module in app.module.ts
import { EditorModule } from 'primeng/editor';
Installed packages
npm install quill --save
npm install #types/quill --save
Updated angular-cli.json
"styles": [ "../node_modules/quill/dist/quill.core.css", "../node_modules/quill/dist/quill.snow.css", ]
"scripts": [ "../node_modules/quill/dist/quill.js" ]
Inserted in HTML in 2 different ways
<p-editor [(ngModel)]="text" [style]="{'height':'320px'} ngDefaultControl"></p-editor>
<form style="text-align: center; margin: 0 auto; width: auto" [formGroup]="avisoForm" (ngSubmit)="atualizarCargo()">
...
<p-editor formControlName="msgAviso" [style]="{'height':'320px'}" ngDefaultControl></p-editor>
</form>
Reference them in TS file
this.avisoForm = new FormGroup({
msgAviso: new FormControl,
titAviso: new FormControl
})
text: string;
Yet it does not show anything to the end-user, even though the p-editor tag is shown there:
End-User Screen
I think it could be a CSS problem, but I have checked on the CSS files, but I could barely retrieve a tag because it does not show anything in the page. (I have searched the one from PrimeNG original website, it does a tag but it's not in the CSS either).
I have searched on many sources, yet I haven't found any answer to solve that problem, can someone help me out? Thanks!
Sources:
https://github.com/primefaces/primeng/issues/807
PrimeNg Error: Quill is not defined
http://embed.plnkr.co/8vzhESEWbUseFcSqttH5/
Just now I created a project for PrimeNg Editor
Created new angular project with latest Version 6
npm install primeng --save latest > 6.0.0
npm install quill --save
Edit angular.json. Update it carefully If Your angular.json and node_module are at same level of tree. The Edit like below I edited like this :
"styles": [
"src/styles.scss",
"node_modules/quill/dist/quill.core.css",
"node_modules/quill/dist/quill.snow.css"
],
"scripts": [
"node_modules/quill/dist/quill.js"
]
Import it in your module: import {EditorModule} from 'primeng/editor';
imports: [
HttpModule,
FormsModule,
BrowserModule,
ButtonModule,
TableModule,
EditorModule
],
Add html in any of the template <p-editor [(ngModel)]="text1" [style]="{'height':'320px'}"></p-editor>
<p>Value: {{text1||'empty'}}</p>
And in component file give some value to text1: string
text2: string;
Github repo for reference Git
Resources of quill needs to be added to your application. Example setup with CLI is as follows;
npm install quill --save
Add Quill to scripts in angular.json
"scripts": [... "node_modules/quill/dist/quill.js"],
Add Quill css to styles in angular.json
"styles": [ ... "node_modules/quill/dist/quill.core.css",
"node_modules/quill/dist/quill.snow.css"],
I have checked this solution multiple times with new angular 7 and existing projects, it works like charm :)
If you followed the steps and you failed to display PrimeNG's Editor as it should, verify that quill.core.css and quill.snow.css exist in the folder "node_modules/quill/dist/"
If it is, try to import those files in your style.scss file like this :
#import url(../node_modules//quill/dist/quill.snow.css);
#import url(../node_modules//quill/dist/quill.core.css);
I'm sure it will work,
I've been working on creating a small library of React components for use in several other projects. I am publishing the package internally (using a private GitHub repository) and then including in another project. However, when I go to import from a subdirectory of the package I am not able to do so as the paths don't match.
The projects using the package all utilize webpack to bundle/transpile code as I am trying to avoid doing any building in the component library if possible.
Directory Structure
- package.json
- src/
- index.js
- Button/
- index.js
- Button.jsx
- ButtonGroup.jsx
- Header/
- index.js
- Header.jsx (default export)
package.json
...
"main": "./src/index.js",
"scripts": "",
...
src/Button/index.js
import Button from './Button';
import ButtonGroup from './ButtonGroup';
export default Button;
export { Button, ButtonGroup};
src/index.js
Is this file actually necessary if only importing from subdirectories?
import Button from './Button';
import ButtonGroup from './Button/ButtonGroup';
import Header from './Header';
export { Button, ButtonGroup, Header };
Other Project
// This project is responsible for building/transpiling after importing
import { Button, ButtonGroup } from 'components-library/Button';
Example
Material-UI is a library of React components that is used by requiring in the following fashion: import { RadioButtonGroup } from 'material-ui/RadioButton. I've tried to figure out how this works for them but to no avail yet.
Similar Questions
How would I import a module within an npm package subfolder with webpack?
This is very nearly the correct approach I require, except that the import path used there involved the src/ directory, which I am trying to avoid (should be component-library/item, not component-library/src/item (which does work currently though))
Publishing Flat NPM Packages
This is exactly what I want except that I was hoping to not have a "build" phase in the package (rely on importing locations to build/transpile)
Questions
Can I skip the src/ directory somehow in the import path?
Can I skip any type of build phase in the package (so developers don't have to build before committing)?
How does a package similar to material-ui handle this?
Can I skip the src/ directory somehow in the import path?
Yes. Using the package.json "exports" field, which should be supported by Webpack in a near future (see this issue), but has already been supported by Node since Node 12 LTS following the Bare Module Specifier Resolution proposal:
package.json
...
"main": "./src/index.js",
"type": "module",
...
"exports": {
"./Button": "./src/Button/index.js",
"./Header": "./src/Header/index.js"
},
...
Now, the following code:
// This project is responsible for building/transpiling after importing
import { Button, ButtonGroup } from 'components-library/Button';
should be translated to:
import { Button, ButtonGroup } from 'components-library/src/Button/index.js';
which should correctly import the requested modules.
Caveat
Now, it would certainly be tempting to try a simpler version like:
...
"exports": {
"./Button": "./src/Button/",
"./Header": "./src/Header/"
},
...
so as the usual import statement
import { ... } from 'components-library/Button';
gets translated to
import { ... } from 'components-library/src/Button';
This looks nice, but it will not work in this case, because your submodules don't have each their own package.json file but rely on their index.js file to be found.
/!\ Unlike in CommonJS, there is no automatic searching for index.js or index.mjs or for file extensions.
src/index.js - Is this file actually necessary if only importing from subdirectories?
I don't think so, but you can keep it if you want.
Can I skip any type of build phase in the package?
Using the "exports" field does not require you to transpile your code.
The answer may depend on how you installed your components library. If you did it via either npm install <git-host>:<git-user>/<repo-name> or npm install <git repo url>,
You should be able to import {Button} from 'component-library/Button' as is, according to your first linked question. Similar to Node's require() resolution, Webpack should resolve subdirectories within component-library relative to component-library's entry point. You can find the docs on customizing the resolution behavior via the webpack.config.resolve property. material-ui seems to rely on resolving subdirectory imports from the module entry directory.
To distribute an ES module library, there's no need for building before distribution. However, projects such as create-react-app may need a pre-transpiled version.
Alternately, you can write import {Button} from 'components-library'.
Webpack will trace the dependencies back through each index without a fuss.
you have to install babel-plugin-module-resolver package
Specify the package relative path in your .babelrc file alias like this
{
"plugins": [
["module-resolver", {
"alias": {
"components-library": "./node_module/components-library"
}
}]
]
}
then you can import subdir of npm package like this
import { Button, ButtonGroup } from 'components-library/Button';
One of the possible solutions there is webpack aliasing system.
You can create another project, call it for example 'app-aliases', so your aliases will be reusable.
This project will has one js file with all of your packages paths:
const path = require('path');
module.exports = {
'#components': path.resolve(__dirname, 'node_modules/components-library/src'),
'#another': path.resolve(__dirname, 'node_modules/any/path/you/want'),
}
And then add it to the webpack configuration in any project which will be responsible for building/transpiling:
webpack.config.js
const appAliases = require('app-aliases');
const config = {
...
resolve: {
alias: {
...appAlises
}
}
}
In the runtime code you will be able to use it like this:
import {Button} from '#components/Button';
import {Something} from '#another'
If you are using typescript you will need to add the same aliases to the paths tsconfig property.
So answers to your questions are:
Yes, you can use any path in aliases
Yes, it is not necessary to build all of your projects
I see that now mui uses imports from directi packages (core for example), see https://material-ui.com/components/radio-buttons/ there is import Radio from '#material-ui/core/Radio';. But I hope they using re-export that I described below.
Also about node.js resolution mechanism.
When you import some library it tries to find node_modules/some-library/package.json and then main property inside it. This property should lead to your main entry point. Usually it is src/index.js (you should set it in package.json if it is no there yet). In this file you can re-export anything you want from internals file structure and will be able to use it without the full path.
Please see this repo for some examples.
I'am an angular developer never used react but what I could tell that material-ui are using monorepo where same concept exists in angular where we create one workspace and this workspace hold multiple project/packages as named in react. for more info Workspaces with Yarn
Material-ui using fake paths in tsconfig to make it appears like src folder doesn't exists this from the git you provided: tsconfig.json
This is possible but requires publishing a curated dist folder rather then the root of your project.
The whole thing is rather simple if you understand how module resolution works, and you just need a small script to prepare your distribution.
Lest I repeat all the details here, please see my answer for Importing from subfolders for a javascript package.
I am building a React Native application.
I have tried using the following as an npm package in my application: https://github.com/MagicTheGathering/mtg-sdk-javascript/
I try to import the package into one of my files using: import { card } from 'mtgsdk'; and many other variations of import statements but none have worked.
I get the error:
TransformError: /myproject/node_modules/mtgsdk/lib/index.js: Couldn't find preset "es2015" relative to directory /myproject/node_modules_mtgsdk
What is the right way to import this package into my project? What knowledge is it that I lack about imports in javascript?
Your babel doesn't know what exactly plugins you're going to use.
So you should add .babelrc file to the root of your project with next configuration:
{
presets: ["es2015"]
}
Oh, and dont forget about
npm install babel-preset-es2015 --save-dev
I hope it'll help