Import with alias

Hi,

I use this starter and I was just wondering how to put have alias.

Imagine I have a 'directive' folder at src/app and I want to be able to use one of them with this import syntaxe :
import { RouterActive } import 'directive/router-active'
I've try to add an alias to the resolve section on webpack.config but there is nothing working.

In small examples always have a relative path is nothing but when you start to have lot of folders it's start to be very ugly to have a lot of '../../../../' to your imports

Thanks

you can make it global at the platform level

const GLOBAL_DIRECTIVES = [
  RouterActive
];

bootstrap(App, [
  provide(PLATFORM_DIRECTIVES, {useValue: GLOBAL_DIRECTIVES, multi: true})
])

@gdi2290

How about referring components like how we are doing with angular2 components?

To import something from angular we are using
import { isString } from 'angular2/src/facade/lang';

Can we do the same for components in our application?
import { HomeComponent } from 'angular2-webpack-starter/components/home.component';

I tried adding *.d.ts in each folder, but couldn't achieve that.

@gdi2290, can you give us some directions to achieve the same?

you can alias `angular2-webpack-starter' as the root but you shouldn't. you can also resolve alias

alias: {
component: './src/app/components'
}

@gdi2290

@gdi2290 Thanks!

Thanks but the alias doesn't seem to work (for my tries).
For what I understand aliases came after the ts-loader and it's the typescript compilation that fail to recognize the import (it look for a module)

I updated main.ts to show this thanks for the issue

How should this alias work?

Add this under webpack.common.js :

resolve: {
      alias: {
        core: 'app/core',
        shared: 'app/shared'
      },
...
      modules: [helpers.root('src'), 'node_modules'],
    },

and import like this?

import { SelectItem } from 'shared/components/form/form-group-select';

@gdi2290

@gdi2290
Cannot get aliases working with the current version of webpack 2.2.0-rc3. With old webpack 2.1.0-beta.22 this was working perfectly.

In large projects with variable depth paths aliases are must have, and ../../../../../ imports are just next to impossible to read. In example / toy projects this doesn't matter.

https://webpack.js.org/configuration/resolve/#resolve-alias

This is a starter repo for Angular projects, head over to the Webpack stackoverflow, gitter for issues with configurations.

I'd personally start with the Webpack changelog between the version you are running and the current rc.4 release version.

This may be applicable depending on exactly what it is you are trying to do. - webpack/webpack#1256

@d3viant0ne

Thanks, I tried also with path.resolve, but it simply refuses to work with 2.2.0-rc3 for me.

My alias definition in webpack.common.js / resolve:

alias: {
  app: path.resolve(__dirname, 'src/app/'),
}

Previously I was using following, and it did work with 2.1.0-beta.22, but not with 2.2.0-rc3:

alias: {
  app: helpers.root('src/app'),
}

With the latter, I get only following errors

[at-loader] path\to.ts:12:34
    Cannot find name 'Foo'.

With the former, I get the above error, and the classic TypeScript compiler error for module not found.

I'm just wondering if AOT or DLL has something to do with this.

AOT is just compiled output on a production build, wouldn't be related. DLL wouldn't be effecting this either.

This is either going to be a Webpack configuration issue or a bug. I'll play around with it in a bit using the example above and see what the deal is.

@d3viant0ne

I know that AOT itself changes only the compiled output, but I thought that to make AOT working someone had to write a shiny new webpack loader or something that could maybe somehow affect the situation.

I have never seen before those "[at-loader]" warnings and errors. Our last "full sync" with angular2-webpack-starter was back in 9.9.2016, so probably quite a few things have changed after that.

Ps. I did try to add following paths also to tsconfig.json and tsconfig.webpack.json, but did not work:

    "paths": {
      "app/*": [
        "app/*"
      ]
    },

@rvalimaki

@rvalimaki

If it happens in dev mode AOT has nothing to do with it.
If you are aliasing packages that are in DLLs (even though it makes no sense) make sure to include it in the DLL webpack config

I assume it's none of the abode...

Aliasing is a simple feature in webpack, it get's complex when you have 2 or more processes that requires context. The more process the more things to do...

Webpack in dev + TS = 2 processes
Webpack in prod + AOT + TS = 3 processes!

The alias in webpack gives context for resolving modules within webpack, it will not pass those aliases to TypeScript since it runs on a different context.

You need to explicitly set these paths for TypeScript.

Setting it in the paths in tsconfig is only good for AOT compilation using the angular compiler... since webpack isn't involved for TS module resolution.

You also need to set it in Webpack via a plugin, telling the TS loader to apply the paths.

Usually this simple setup will do:

const TsConfigPathsPlugin = require('awesome-typescript-loader').TsConfigPathsPlugin;

This is part of webpack config
...
  plugins: [
      new TsConfigPathsPlugin(),
     ...
  ]
...

Just put it in common, make sure the paths in the tsconfig file are correct.
You can pretty much apply all types of aliasing, I did crazy stuff...

The reason you need a plugin is for the loader to be able to map files between Webpack and TS.
You can also send a custom configuration to the plugin, see the awesome loader site.

@shlomiassaf

@shlomiassaf

Thanks, TsConfigPathsPlugin fixes the issue with aliases / paths.

(Now I'm facing a different issue with at-loader not accepting my dual definitions for enums like "export enum foo {} export namespace foo { /* helper functions for foo-enum */ }, but asking about them elsewhere.)

@shlomiassaf

Hey guys,

Well I'm trying to figure it out for days and still got nothing.

Today I follow @shlomiassaf steps, but still the same:

webpack: bundle is now VALID.

[at-loader] Checking finished with 4 errors
[at-loader] src\app\app.module.ts:43:10
    Cannot find name 'InternalStateType'.

[at-loader] src\app\app.module.ts:75:22
    Cannot find name 'AppState'.

[at-loader] src\app\home\home.component.ts:29:22
    Cannot find name 'AppState'.

[at-loader] src\app\home\home.component.ts:30:19
    Cannot find name 'Title'.

resolve: {

      extensions: ['.ts', '.js', '.json'],

      // An array of directory names to be resolved to the current directory
      modules: [helpers.root('src'), helpers.root('node_modules')],

      alias: {
        'src': helpers.root('src/'),
        'app': helpers.root('src/app/'),
        'home': helpers.root('src/app/home/')
      }

    },

"paths": {
      "src/*": ["src/*"],
      "app/*": ["src/app/*"],
      "home/*": ["src/app/home/*"]
    },

Does anyone have any idea?

@rochapablo

@rochapablo

So you have already this:
const TsConfigPathsPlugin = require('awesome-typescript-loader').TsConfigPathsPlugin;

...and that (in "plugins"):
new TsConfigPathsPlugin(),

... in webpack.common.js?

Not really sure, but I do not have trailing backslashes on alias configuration, so I do use helpers.root('src/app') instead of 'src/app/'

Did you remember to set tsconfig paths to both tsconfig.json and tsconfig.webpack.json?

Also I do set the "baseUrl" in tsconfig, though maybe it doesn't affect the situation you have:
"baseUrl": "./src", "paths": { "app/*": [ "app/*" ] },

@rvalimaki

@rvalimaki, that's right!

"baseUrl": "./src",
    "paths": {
      "app/*": ["app/*"],
      "home/*": ["app/home/*"]
    },

const TsConfigPathsPlugin = require('awesome-typescript-loader').TsConfigPathsPlugin;

resolve: {
      extensions: ['.ts', '.js', '.json'],
      modules: [helpers.root('src'), helpers.root('node_modules')],
      alias: {
        'app': helpers.root('src/app'),
        'home': helpers.root('src/app/home')
      }
    },
plugins: [ new TsConfigPathsPlugin(), ]

import { InternalStateType } from 'app/app.service';

But, still same error.

@matb

As @matb said here

Changing

'awesome-typescript-loader?{configFileName: "tsconfig.webpack.json"}'

to

'awesome-typescript-loader?{tsconfig: "tsconfig.webpack.json"}'

Worked.

If TsConfigPathsPlugin is not working for somebody, that's maybe because you have * in your path like "myAlias": ["src/app/myAlias/*"] in tsconfig.webpack.json. Remove *, helped for me.

Navigation Menu

Repository navigation

Import with alias #382

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Import with alias #382

Description

Activity

PatrickJS commented on Mar 3, 2016

sasidhar commented on Mar 8, 2016

PatrickJS commented on Mar 8, 2016

sasidhar commented on Mar 8, 2016

ggaulard commented on Mar 8, 2016

PatrickJS commented on Mar 13, 2016

koenmetsu commented on Oct 31, 2016

rvalimaki commented on Jan 12, 2017

joshwiens commented on Jan 12, 2017

rvalimaki commented on Jan 12, 2017

joshwiens commented on Jan 12, 2017

rvalimaki commented on Jan 13, 2017

shlomiassaf commented on Jan 13, 2017

rvalimaki commented on Jan 16, 2017

rochapablo commented on Jan 17, 2017

rvalimaki commented on Jan 17, 2017

rochapablo commented on Jan 17, 2017

rochapablo commented on Jan 18, 2017

bobrosoft commented on Oct 6, 2017

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions