importing is cumbersome for deeply nested components, how do I set up a map to the app root?

[NullVoxPopuli]

$ ng --version
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
angular-cli: 1.0.0-beta.2-mobile.3
node: 5.10.1
os: linux x64

how do I set up a mapping for my app root to import?
I'm trying to avoid doing:

import { stuff } from '../../../../../../../components/some/path-to/what/iwant

and would like to do:

import { stuff } from 'myAppName/components/some/path-to/what/iwant

it is more intuitive, to specify an app-relative path, especially when refactoring (so you don't need to open the file tree, and count how many ../ you have...

I've tried adding mappings in my system-config.ts, but I haven't found anything to work.

const map: any = {
  '@app': 'src'
};

doesn't work -- as in:

import { stuff } from '@app/components/mystuff' 

errors on build.

[cdarken]

I see that in system-config.ts we have '@angular': 'vendor/@angular'. This seems to be relative to the dist/ directory. Maybe you can try using directly app/components/stuff.
Just a wild guess, as I'm new at this, still trying to figure things out.

[NullVoxPopuli]

I had also tried adding '@app': 'app', and it can't find any files using that. :-\

Also, I deleted the dist folder, so it appears that however this needs to be configured, it is pre-build (because the error occurs before the dist folder is even created)

[serhiisol]

you should use map + packages in system-config.js

/** Map relative paths to URLs. */
const map:any = {
  '@web-app': './app/'
};

/** User packages configuration. */
const packages:any = {
  '@web-app': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'index'
  }
};

Also tsconfig.json in compilerOptions section

"paths": {
      "@web-app": ["./app/index.ts"],
      "@web-app/*": [
        "./app/*"
      ]
    }

and then you can use something like that:

import {environment} from '@web-app';

Note: it works without -prod option, with -prod it toggles error:

$ ng build -prod
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
⠹ Building"{{content-for}}" has been deprecated and will be removed before RC.
Build failed.
The Broccoli Plugin: [BundlePlugin] failed with:
Error tracing app/+login/login.component.js at file:///Users/serhiysolonko/Development/Projects/web-app/tmp/bundle_plugin-input_base_path-kOVkldZW.tmp/0/app/+login/login.component.js
    Loading app/+login/index.js
    Loading app/web-app.component.js
    Loading app/index.js
    Loading main.js
    Error: Unable to calculate canonical name to bundle file:///Users/serhiysolonko/Development/Projects/web-app/app//index.js. Ensure that this module sits within the baseURL or a wildcard path config.
    at getCanonicalNamePlain (/Users/serhiysolonko/Development/Projects/web-app/node_modules/systemjs-builder/lib/utils.js:220:13)
    at getCanonicalName (/Users/serhiysolonko/Development/Projects/web-app/node_modules/systemjs-builder/lib/utils.js:145:19)
    at /Users/serhiysolonko/Development/Projects/web-app/node_modules/systemjs-builder/lib/trace.js:471:36

The broccoli plugin was instantiated at:
    at BundlePlugin.Plugin (/Users/serhiysolonko/Development/Projects/web-app/node_modules/broccoli-plugin/index.js:10:31)
    at BundlePlugin.CachingWriter [as constructor] (/Users/serhiysolonko/Development/Projects/web-app/node_modules/broccoli-caching-writer/index.js:21:10)
    at BundlePlugin (/Users/serhiysolonko/Development/Projects/web-app/node_modules/angular-cli/lib/broccoli/angular-broccoli-bundle.js:10:36)
    at Angular2App._getBundleTree (/Users/serhiysolonko/Development/Projects/web-app/node_modules/angular-cli/lib/broccoli/angular2-app.js:421:22)
    at Angular2App._buildTree (/Users/serhiysolonko/Development/Projects/web-app/node_modules/angular-cli/lib/broccoli/angular2-app.js:159:21)
    at new Angular2App (/Users/serhiysolonko/Development/Projects/web-app/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
    at module.exports (/Users/serhiysolonko/Development/Projects/web-app/angular-cli-build.js:6:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/serhiysolonko/Development/Projects/web-app/node_modules/angular-cli/lib/models/builder.js:55:19)
    at Class.module.exports.Task.extend.init (/Users/serhiysolonko/Development/Projects/web-app/node_modules/angular-cli/lib/models/builder.js:89:10)
    at new Class (/Users/serhiysolonko/Development/Projects/web-app/node_modules/core-object/core-object.js:18:12)
    at Class.module.exports.Task.extend.run (/Users/serhiysolonko/Development/Projects/web-app/node_modules/angular-cli/lib/tasks/build.js:15:19)
    at /Users/serhiysolonko/Development/Projects/web-app/node_modules/angular-cli/lib/commands/build.js:32:24
    at lib$rsvp$$internal$$tryCatch (/Users/serhiysolonko/Development/Projects/web-app/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/serhiysolonko/Development/Projects/web-app/node_modules/rsvp/dist/rsvp.js:1048:17)
    at /Users/serhiysolonko/Development/Projects/web-app/node_modules/rsvp/dist/rsvp.js:331:11
    at lib$rsvp$asap$$flush (/Users/serhiysolonko/Development/Projects/web-app/node_modules/rsvp/dist/rsvp.js:1198:9)

[NullVoxPopuli]

@SergeySolonko can you explain a bit what each option does, and how it affects the various parts of the build process?

I tried copy-pasting what you had, and I still get the error "Cannot find module '@web-app/anything'"

[serhiisol]

@NullVoxPopuli
so tsconfig.json option responsible for compilation, system-config.js responsible for js loading.

this config works for standard folder configuration, at least first part. It should be something like this:

with system-config you're creating kind-a symlink to get access to specific module, with tsconfig.json you're saying which file you're expecting to get and that it should be compiled

now @web-app basically it's a link to src/app/index.ts module

@web-app/* it's a link to rest of the files, e.g. @web-app/shared/index

I hope I've explained it clearly :)

[hansl]

  '@web-app/*': {
    format: 'cjs',
    defaultExtension: 'js'
  }

does nothing. The * is not understood in SystemJS packages.

[hansl]

The path mapping is only used by TypeScript compiler to know which import corresponds to which modules. SystemJs operates on another level.

[serhiisol]

yes correct that was redundant, but still when you're trying to compile with _prod mode - it fails

[tydanielson]

I was able to get the system-config.js file to work correctly, but I added paths to the compilerOptions section of tsconfig.json and am unable to import, the compiler throws this error: Cannot find module '@app' . I also looked at the schema for tsconfig.json and can't find anything about paths ...
https://www.typescriptlang.org/docs/handbook/compiler-options.html

Am I missing something? Here is my tsconfig.json...

{
  "compileOnSave": false,
  "compilerOptions": {
      "paths": {
        "@app" : ["//test.externalhost.com/app/index.ts"],
        "@app/*": [
            "//test.externalhost.com/app/*"
        ]
      },
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "mapRoot": "@app",
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../dist/",
    "rootDir": ".",
    "sourceMap": true,
    "target": "es5",
    "inlineSources": true
  },

  "files": [
    "main.ts",
    "typings.d.ts"
  ]
}

[colltoaction]

I'm just starting with ng2, and it seemed very intuitive to me to try to use a full path. Why do people tend to use relative paths instead?

[NullVoxPopuli]

@tinchou, how do you use a full path? how do you ref your app root?

[aciccarello]

@tinchou Using relative paths can be easier when referencing a file in the same folder or a folder above. If you move a folder you don't have to fix all of the imports within that folder. But when the files are deeply nested and you are referencing something that is in the root of your source directory, I agree that full path tends to be simpler.

Also, the import system is related to ES2015 modules/TypeScript/System JS more than Angular 2 itself.

[colltoaction]

@NullVoxPopuli I haven't set it up, I'm just saying it didn't work by default.

@aciccarello true, but maybe having an alias to the root in the default template would help.

[serhiisol]

@tinchou that's what we are trying to get - to have a reference to very top folder (app folder). It works well for non-production build, for production - it fails. #865 (comment)

[colltoaction]

@SergeySolonko this is my +1 to having an alias to the app root by default with ng new (that works in production too, of course 😛)