Calling file from different folder / source in my project - javascript

I have 2 sources in my project. How can I import a file from MyProject in nest-project-payment?
This is the file structure of my project:
Tried using the following import statement:
import { User } from "MyProject/src/entity/User";


import { User } from "../../../MyProject/src/entity/User";
With ../ you move one folder up.


If you want to use an import like in your example, make the following change to your tsconfig.json file:
"baseUrl": "./",
"paths": {
"#nest-project-payment/*": ["nest-project-payment/*"],
"src/*": ["src/*"]
}

Related

Intellisense doesn't work when I import the module from a cdn. vscode

I was importing three js this way:
import { WebGLRenderer } from 'three';
and the auto complete works fine (image 1).
But when I import from a cdn:
import { WebGLRenderer } from 'https://cdn.skypack.dev/three';
The auto complete doesnt works (image 2)
image 1:
image 2:

For this you'll need to install #types/three.
Then you can use jsconfig.json to alias https://cdn.skypack.dev/* to #types/*, because this way vscode / typescript knows how to interpret these urls.
jsconfig.json:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"https://cdn.skypack.dev/*": ["./node_modules/#types/*"]
}
}
}
More about this: https://www.typescriptlang.org/tsconfig#paths

How to use absolute/dynamic paths in NodeJs

Would like to use imports by using absolute/dynamic paths, like
import { GlobalVars } from "utils/GlobalVars.js";
but not like
import { GlobalVars } from "../../utils/GlobalVars.js";
With the help of below code snippet able to follow absolute/dynamic path facility in react
jsconfig.json (Which is created at root level of the project)
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
with the same code snippet unable to use absolute paths in NodeJs.
Do we have any other approach to use absolute paths in NodeJs or am i doing any mistake

NextJS where defines tilde '~' symbol in import path?

I read code in an app with NextJS. It imports component like import Head from '~/components/layout/head'
The project structure:
-app
---components
---pages
---public
I wonder where defines ~ as root dir in nextJS.
Where can I find the config of this?
Tried uncover the webpack config inside next package, but didn't find.

With Typescript's paths feature you can specify a module mapping.
// tsconfig.json
{
"compilerOptions": {
...
"baseUrl": "./src",
"paths": {
"#anything/utils/*": ["app/utils/*"],
"#anything/pipes/*": ["app/pipes/*"]
}
...
}
}
This will allow you to import using
import x from '#anything/utils/dateToNum';
that will be mapped to app/utils/dateToNum.
If your are using webpack, you will need to use tsconfig-paths-webpack-plugin.

According to the doc.
You can set the module mapping without extra libs.
In your file structure, try this example.
// tsconfig.json
{
"compilerOptions": {
...
"baseUrl": ".",
"paths": {
"~*": ["./*]
}
}
}
Then go to your files:
import { xxx } from '~/components';
// or
import xxx from '~/components/xxx';

I find this is because the babel plugin babel-plugin-root-import, since the project uses this plugin in babel config.
More about this plugin can check here.

Use absolute path in React components

How I can use absolute path from root and change root, for import components?
import Modal from project/app/src/Components/Modal
import Main from ../../../../Constants
and I want, change root directory to I can import from src
import Modal from Components/Modal
import Main from Constants
I try change workspaces in package.json
"workspaces": [
"project/app/src/*"
]
or use
"scripts": {
"start": "NODE_PATH=project/app/src/ webpack-dev-server"
}
but it's not working.

.env file with NODE_PATH=src is deprecating.
use jsconfig.json in root dir instead
{
"compilerOptions": {
"baseUrl": "./src"
}
}

To implement absolute imports in create-react-app First you need to Create a ‘.env’ file at the root level (same level as package.json) then Set an environment variable, ‘NODE_PATH’ to ‘src/’
NODE_PATH=src

How can I organize my Angular app folders like a Java package?

How to organize Angular 2 app folder structure like Java packages?
Consider the following project layout:
app
|_model
|_component
|_service
I would like to import foo.service.ts from service to bar.component.ts in component. But as far as I know, Angular 2 import supports only relative paths like /../service/, which seems very clunky solution.
Is there a way to refer folders with absolute bath from root folder, like with Java packages?

UPDATE 2016-06-01
using npm install typescript#next you can already use this function
I assume that your tree looks like this:
node_modules
|_#angular
|_rxjs
app
|_model
|_component
|_service
package.json
tsconfig.json
You should add in your tsconfig.json the following lines:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": [
"app/*",
"node_modules/*"
]
}
}
}
then you can reference your modules like you do with regular #angular/rxjs modules
import { MyService } from 'service/MyService';
import { Component } from '#angular/core';
import { Observable } from 'rxjs';
Note: webpack needs also the following lines in webpack.config.js
resolve: {
modulesDirectories: [
'node_modules',
'app'
]
}

Not yet, it should be present soon with Typescript 2.0
Look here
https://github.com/Microsoft/TypeScript/issues/5039

Categories

Resources