Angular 2 import modules using absolute path with webpack

Question

I am trying to implement the absolute path in angular 2 using webpack 2 .

I had a look on this article which is showing how to use the absolute path.

I have the folder structure as:

|-resources
   |-assets
      |-Typescript
         |-main.ts
         |-App
            |-app.module.ts
|-Modules
   |-Core
      |-Assets
         |-Typescript
            |-core.module.ts
   |-Cart
      |-Assets
         |-Typescript
            |-cart.module.ts

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './App/AppModule';
if (process.env.ENV === 'production') {
    enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CoreModule } from '../../../../Modules/Core/Assets/Typescript/core.module';
import { CartModule } from '../../../../Modules/Cart/Assets/Typescript/cart.module';
import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        CoreModule,
        CartModule
    ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})

export class AppModule {}

webpack.common.js consists of the resolve configuration

resolve: {
            extensions: ['.ts', '.js'],
            modules: [helpers.root('./resources/assets/Typescript'), helpers.root('./Modules'),'node_modules'],
        },

helpers.js

var path = require('path');
var _root = path.resolve(__dirname, '..');

function root(args) {
    args = Array.prototype.slice.call(arguments, 0);
    return path.join.apply(path, [_root].concat(args));
}

exports.root = root;

When i try to use Modules/Core/Assets/Typescript/core.module in app.module.ts I get:

ERROR in [default] C:\xampp\htdocs\project\resources\assets\Typescript\App\AppModule.ts:3:27
Cannot find module 'Modules/Core/Assets/Typescript/core.module'.

How could i implement the absolute path in the custom directory ?. Adding the Modules directory inside the node_modules gives me the correct directory path for the imports but it is not the thing that we all wants to do.

Answer 1

I found the solution but it is not the good way to do the imports.

Add the root directory to the modules resolver in webpack.config.js

resolve: {
            extensions: ['.ts', '.js'],
            modules: [helpers.root('./resources/assets/Typescript'), helpers.root('./Modules'),'node_modules'],
        },

In app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './Components/AppComponent';

@NgModule({
    imports: [
        BrowserModule,
        require('Core/Assets/Typescript/Core/CoreModule').CoreModule,
        require('Category/Assets/Typescript/Category/CategoryModule').CategoryModule
    ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})

export class AdminModule {}

The main thing is add only the root directory from where you want to use the path and it will work.