Importing modules in TypeScript - angularjs

I`m working with the tutorial http://www.codeproject.com/Tips/1026938/AngularJS-Getting-Started-with-Visual-Studio
and get the problem this line:
import {Component, View, bootstrap, NgFor} from "angular2/angular2";
and I got the problem in this line:
TS2307 Cannot find module 'angular2/angular2'
I have exactly same files and folders, as in tutorial.
I try "typings/angular2/angular2", but this also didn`t help.

See the step-4 in your-tutorial-link. These settings are required for visual studio to detect the module.

Related

Module not found. Can't resolve 'assets/styles/constants'

I've wanted to add Expo in my React Native project to start it in a web browser. After doing that, I try to import file 'assets/styles/constants.ts'. This is my tsconfig.json:
tsconfig.json
This is constants.ts:
constants.ts
And here I try to import this file:
DropdownAlertCustom.tsx
After that, I get this error:
error message
What am I doing wrong? And how I can fix it?
UPD
Small fix of tsconfig.json:
small fix
Now I get the error 'Cannot find a module or it's corresponding type declarations:
Cannot find module
UPD 2
I understood that my IDE and VSCode see files and folders fine by these paths. When I hover on them, I can see their's content. I get the error Module not found. Can't resolve 'assets/styles/constants' when I type expo start --web. It starts in a browser and I get this error.
Maybe the problem is in Expo? I've added it in Create React Native app.
If anyone has any suggestions, please, help.
Replace assets/styles/constants with ../../../assets/styles/constants
Explanation
If you import like this assets/styles/constants, webpack that compiles your project into common js file that thinks that assets is the package name and that's why it will find in node_mouldes folder and it cant resolve the folder.
so if you want to import something from your local files you can give a relative path to that folder and import it successfully like I specified ../../../assets/styles/constants.
EDIT 1
It's the only way that create-react-app provides you to import any file but, there is another way you can build it manually called absolute path.
Like you can tell webpack that make src folder as the root of my project and if I specify # in URL than means its absolute path and root is src
after that you can call it as
#/assets
#/pages
#/store
#/anything/any

Unable to import PrimeReact style files on Next.js project

I'm trying to use PrimeReact components on a Next.js project but I'm getting an error when I try to import the core css styles as shows in their documentation (https://www.primefaces.org/primereact/#/setup), I have used these components with a create-react-app project, but this time I'm having the following error:
Next js error
I'm using "#zeit/next-sass" and "node-sass" to work with SASS files, I read that is required to create a "webpack.config.js" to manually apply the right loaders but the problem persist (I'm not a webpack expert), I was wondering if someone can give me a hint of what I'm missing.
Thank you in advance.

Can someone help me convert an codepen into an react sandbox fiddle?

I created an codepen with react code and I'm importing its libraries trough CDN.
Now I want to implement this code (working) into my react project.
But first It could be handy to put all code into a react sandbox so I can make changes before deploying to my code.
I tried to copy paste all code into a sandbox and add all libraries (react, react-dnd, reactdndhtml5backend, react-dom), but it still gives me a lot of errors.
Also the files in my own project are .tsx and not .js.
My current codepen is found here: https://codepen.io/darkinfore/pen/daJxyP
This works, but just not when I implement this into a react sandbox.
I also tried to implement this into a react sandbox: https://codesandbox.io/s/w01l077w1w
But as you can see it gives me some strange errors.
Can someone help me with converting this codepen into a react sandbox without errors?
I looked over your codesandbox and then forked it here. Actually, the only error encountered had to do with ReactDnD not being defined (such that DropTarget could not be found). This was due to your import statement near the top of index.js:
import ReactDnD from "react-dnd";
Because of the way the react-dnd package is designed, this way of importing will not work for you. The package has multiple exports (for example, DragDropContext and DropTarget) rather than a single, default export. You need to take all of these exports and import them together into a single named import, called ReactDnD. So, what you need to do is:
import * as ReactDnD from "react-dnd";
I did this in the forked codesandbox, and this got you past the TypeError and then displayed your table.
Helpful information:
Different ways to use import
Exported modules from react-dnd package

Using React Leaflet Draw in project - EditControl issues

I'm trying to use React-Leaflet-Draw to add polygons to a mapping project I'm working on. Coming unstuck on the use of EditControls.
I imported Edit control as per the example
import { EditControl } from '../src';
With an index.js file in src folder with:
export EditControl from './EditControl';
I added some code to do some different things to the example but it still ran fine (in the example version).
When I tried to run this on another project, using the same code I get the error:
Syntax error: Unexpected token, expected {
From the index.js file, using the same export command. Has anyone else encountered this problem? Any thoughts on why it might be happening?
Thanks
You need to install 'leaflet-draw'
npm install 'leaflet-draw'

Typescript angularjs application

I am programming an angularjs application in visual studio using typescript. I want to include the ngImgCrop module link into my application but have not been successful at doing so. Here's how I tried to include the module in my component
import {ngImgCrop} from 'ng-img-crop-full-extended'
I already installed the package using
npm install ng-img-crop-full-extended
inside my angular application directory and included the required reference to
ng-img-crop.js and ng-img-crop.css
scripts in my index.html. The javascript version requires me just to include the module like this
angular.module('app', ['ngImgCrop'])
However, I have no idea on how to include it into my version of angularJs using typescript. Any help will be great thank you.
The problem is you are using a Javascript import which does not actually inject the ngImgCrop module into your AngularJS project.
You still have to include the module in your app's AngularJS module as you mentioned above using the following code:
angular.module('app', ['ngImgCrop']);
(This assumes you want to name your application's module app.)
The other javascript import you are doing, ie the import {ngImgCrop} from 'ng-img-crop-full-extended, can be used to import the Typescript classes so they can be used in the vscode intellisense, but it is not actually used by the AngularJS framework at all. If the ngImgComp code isn't a Typescript file then there is no need to import it using the javascript import at all.
If you want the intellisense for the ngImgCrop code, you can see if there is a Definitely Typed file for ngImgCrop and install that using
npm install #types/<ngImgCrop project name>
Then include the index.d.ts file from that installed project in the build.imports.d.ts file for your project by adding the following line, replacing ngImgCrop with the correct name.
/// <reference path="mode_modules/#types/<ngImgCrop project name>/index.d.ts />

Resources