Develop Reference

Tsconfig `paths` equivalent for normal JS node

I have this on a TypeScript project, it's a nice config option on tsconfig.json that lets me create aliases for the folders
{
"compilerOptions": {
"paths": {
"#src/*": ["src/*"],
"#images/*": ["src/assets/images/*"],
"#styles/*": ["src/assets/styles/*"],
"#components": ["src/components"],
"#layout/*": ["src/layout/*"],
"#pages/*": ["src/pages/*"]
}
}
Is there a way to do the same on a project that does not use TypeScript, just regular Javascript in node with ES6 modules on?

I found that node already has something called Subpath imports, is not exactly the same but it works for me. For anyone looking for something similar, this just uses # instead of #:
on the package.json
"imports": {
"#src": "./src/*",
"#controllers/*": ["./src/controllers/*"],
"#routes/*": ["./src/routes/*"]
}
And then import on your app, – In this case I use ES modules:
import File from '#routes/file.js'

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.

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

module 'ng' has no exported member 'ui' when using ui-router type definition for typescript

I am trying to use this typescript definition file for ui-router:
https://github.com/borisyankov/DefinitelyTyped/blob/master/angular-ui/angular-ui-router.d.ts
Here is the code at the top of the definition file:
// Type definitions for Angular JS 1.1.5+ (ui.router module)
// Project: https://github.com/angular-ui/ui-router
// Definitions by: Michel Salib <https://github.com/michelsalib>
// Definitions: https://github.com/borisyankov/DefinitelyTyped
/// <reference path="../angularjs/angular.d.ts" />
declare module ng.ui {
interface IState {
...
Here is how I am using it:
module MyModule
{
export class MyStateConfig
{
constructor(
// -> error on the word ng.ui on next line
private $stateProvider: ng.ui.IStateProvider,
private $urlRouterProvider: ng.ui.IUrlRouterProvider
...)
{
this.$stateProvider.state(...
This was working in Visual Studio but now with WebStorm I get a message saying "
module 'ng' has no exported member 'ui'
Can someone give me advice on this. Is this something to do with a different module system with WebStorm?

Have you tried adding a reference comment in your module source file? Something like...
/// <reference path="path/to/angular-ui/angular-ui-router.d.ts" />
Visual Studio doesn't require this because its msbuild tasks automatically tell the compiler to reference any definition that are included in the project. I'm guessing WebStorm doesn't use msbuild project files.

Ensure the #types/angular-ui-bootstrap npm package is installed.
npm install #types/angular-ui-bootstrap
Check your tsConfig.json file, in compilerOptions, look for a types array. Try removing types or replacing with typeRoots. Something like this:
"compilerOptions": {
"target": "ES5",
"sourceMap": true,
....
....
"typeRoots": [
"node_modules/#types"
]
},