I am using Angular2 with Nodejs. I have a list of employees each contains employee name, address, rank etc. I want to show information when user hovers mouse on the employee name. For that I am trying using semantic-ui with angular2 but I can't find any example other than (below link) which isn't descriptive.
https://github.com/vladotesanovic/ngSemantic
Nodejs:
npm install ng-semantic --save
npm install jquery --save
Index.html
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css">
TestSemantic.ts
import {NgSemanticModule} from 'ng-semantic';
TestSemantic.html
<sm-button class="icon" sm-popup="Add users to your feed"><i class="add icon"></i></sm-button>
First it shows me 2 semantic errors which are:
node_modules/ng-semantic/ng-semantic/input/input.d.ts(2,29), error TS2307: Cannot find module '#angular/forms'.
node_modules/ng-semantic/ng-semantic/search/search.d.ts(2,29): error TS2307: Cannot find module '#angular/forms'.
Only button is showing on TestSemantic.html but there is no pop-up displays
Note sure if this is still relevant, but did you install angular's forms module? ngSemantic depends on it as it extends form controls.
So check in package.json and node_modules if you have #angular/forms.
Based on the code in ngSemantic it should install #angular/forms automatically but it's worth checking.
If you remove temporarily the ngSemantic import but instead use
import #angular/forms just to test that the import work at least for your code (apart for ngSemantic).
I note also that the error is in a d.ts file which is a typing definition file.
If you use webpack you should be able to recompile the bundled js from the dependencies inside node_modules
I am using ngSemantic with angular 2 with no problem.
Related
I've been doing a lot of React projects which use the same components. I came to know about npm link recently, and I thought I could use it for code sharing locally.
So, I isolated some React components (calling 'A') in a directory and made a link by 'npm link' command and also 'npm link {package name}' in my projects to use it. I wrote some dependencies which 'A' depends on like styled-components and React in peerDependencies.
Basically, what I thought was the packages which 'A' depends on
doesn't need to be installed in 'A', but installed in main project which actually uses the source code, so I put them in peerDependencies. However, when I build the main project with webpack, it gives errors like
Module not found: Error: Can't resolve 'react/jsx-runtime'
Module not found: Error: Can't resolve 'react
Module not found: Error: Can't resolve 'styled-components'
I installed those modules in 'A' to figure it out, and it built successfully, but also invoked another error something like another copy of react, so I got lost after that.
I want to know what I am doing wrong and how to fix this. A little bit of hint would be much appreciated.
I'm trying to use the 'gsap' node module, explicitly the tool 'Draggable' of that package together with Meteor (a plain Meteor React app).
The installation via meteor npm install gsap works as expected.
However if i want to use the module in my code as suggested in the docs, the client crashes with multiple consecutive errors; the first is:
Uncaught SyntaxError: Unexpected identifier modules.js:132661
The suggested way to import gsap tools is shown here. The error appears when i try to import a sub-module like so:
import Draggable from 'gsap/Draggable';
I don't quite understand the problem here. With other modules a simple npm install and import x from y just works. With gsap modules that does not seem to be the case.
I'd be grateful for any advice.
Update:
It seems the import of 'gsap' node module is now working!
Thanks for your answers!
I had some issues with Draggable import, as gsap wasn't defined inside of its constructor ("_toArray is not a function"). To make it work you have to register the plugin to gsap (added lines in main.jsx):
import { gsap } from "gsap";
import { Draggable } from 'gsap/Draggable';
gsap.registerPlugin(Draggable);.
The gsap package contains ES6 code. ES6 in the node_modules folder is not compiled by Meteor. Usually when publishing to npm, packages are transpiled into ES5. The editor of gsap should do it.
Two options for you to make this work inside Meteor:
• Option 1: clone the source from github directly somewhere in your Meteor app, like /imports/lib/gsap. Then import as following import Draggable from '/impots/lib/gsap/Draggable';
• Option 2: clone the source from github directly somewhere outside your Meteor app and use npm install /path/to/the/cloned/folder inside your meteor app (see here for reference). Option 2 seems less robust to me when working as a team in the same project or when you will need to deploy your app
I have deployed an app into IIS. It is node.js and angular app,deployed using iisnode. The deployed works as expected inside google chrome but not inside Internet explorer.
When I inspect using debug element I found the following issues. Do I need run angular PROd, specific to Internet explorer?
Here is the screenshot of the errors I get inside Internet explorer.
My current version of angular-cli is 7.3.9
By default, Angular is not supporting IE. In order to enable the support, you need to modify src\polyfills.ts file.
In this file look for /** IE9, IE10 and IE11 require all of the following polyfills. **/ and uncomment all the imports.
In addition to that, you need to enable import classlist.js
If classlist.js is not present then execute the command
npm install --save classlist.js
You need to modify the polyfill.ts to make Angular app supported in IE. Please open the polyfill.ts file and read the annotation, uncomment the import lines needed in IE. Then install some packages with npm:
npm install --save classlist.js
npm install --save web-animations-js
For further information, you could refer to this article.
If you have uncommented imports and it still doesn't work, you could try to add meta tag in the index.html: <meta http-equiv="X-UA-Compatible" content="IE=edge" />.
I have an existing project where we integrated Flow's type system into the react side. The project is electron-based so, by definition, a mono-repo. We ran in to all kinds of issues getting flow to recognize import statements.
node_modules imports would fail:
import _ from 'lodash'; // Flow: Cannot resolve module lodash
And more importantly, we wanted absolute pathing relative to our project:
import {MyComponent} from 'src/component/myComponent';
// Flow: Cannot resolve module src...
Finding a solution on this took a bit of digging, and the documentation is a little lacking in some areas, so I want to throw a compiled list of what actually worked out there.
TL;DR;
Get flow set up on webstorm so it is giving you module errors
Set up flow globally, and point webstorm's js settings to use Flow and point it at the global copy of flow-bin (not even the exe, just the dir)
add the following options to .flowconfig:
[options]
module.name_mapper='^src\/\(.*\)$' -> '<PROJECT_ROOT>/src/\1'
module.system=haste
Full version
A few basic steps have to be done to get flow to work in webstorm at all:
Install flow-bin globally
Several sources made the claim that flow-bin runs better globally
Install flow-bin globally
yarn global add flow-bin
or
npm i -g flow-bin
Double check that it gave you a current version of flow-bin, this
refused to work on 0.75.0 or earlier
Set up Webstorm's flow executable
On Webstorm: File > Settings > Languages & Frameworks > Javascript
Choose Flow as the JavaScript language version
Find where your package manager (yarn or npm) stores global files
On Windows+yarn this is C:/Users/[your username]/AppData/Local/Yarn/Cache/v1
On Windows+NPM this is C:/Users/fish/AppData/Roaming/npm/node_modules
That makes my flow path:
C:/Users/[your username]/AppData/Local/Yarn/Cache/v1/npm-flow-bin-[whatever]/
On Webstorm's JavaScript settings, Target the Flow package or executable to the global flow path we just found
Apply, ok
Setting up Flow's .flowconfig
.flowconfig setup side notes
I have a root git project with 2 parts, react, and electron. Flow does things based on where you put the .flowconfig file.
If it includes "all=true", remove that line and go add // #Flow to your files you want flow to check (otherwise it will start indexing all of node_modules
Reproducing my problem
Put .flowconfig in your react directory
Enjoy all the "Flow: Cannot import module" squiggly lines of doom
Solution to the module problem
This is my current .flowconfig
[ignore]
.*/build/.*
[include]
[libs]
[lints]
[options]
module.name_mapper='^src\/\(.*\)$' -> '<PROJECT_ROOT>/src/\1'
module.system=haste
[strict]
Why does this work?
Tells the name mapper to resolve modules that begin with src/ to the src/ directory so your absolute paths to your project's files work:
module.name_mapper='^src\/\(.*\)$' -> '<PROJECT_ROOT>/src/\1'
Tells flow to use the "haste" module system:
module.system=haste
The haste module system step is important because otherwise it doesn't know that by 'lodash' you mean './node_modules/lodash'. Telling it to use haste means it will properly find your import statements. More info on haste available here
I want a code highlighter for my ionic v2 (rc4) project. I tried prismjs .
As said in Ionic 2 Resources | Third Party Libraries , I did the following steps:
npm install prismjs --save
npm install #types/prismjs --save
then add import 'prismjs'; in my typescript file & In declarations.d.ts declare module '*'; already is there.
in html
<pre><code class="language-javascript">var data = 1;</code></pre>
but its not working. Am I missing something? Please help me.
As far as I know, the css will not get included that way.
Can you try to copy the css of the prismjs library into your assets folder and include it in your index.html?