PaladiN PaladiN - 11 days ago 5
AngularJS Question

Angular 2 import modules using absolute path with webpack

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

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.

Comments