2016-11-21 3 views
0

Я пытаюсь реализовать absolute path в angular 2 с использованием webpack 2.Угловые 2 модуля импорта с использованием абсолютного пути с webpack

Я посмотрел на этот article, который показывает, как использовать абсолютный путь.

У меня есть структура папок, как:

|-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 {} 

ш ebpack.common.js состоит из конфигурации Resolve

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; 

Когда я пытаюсь использовать модули/CORE/Активы/Машинопись/core.module в приложении. module.ts я получаю:

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

Как я мог реализовать absolute path in the custom directory ?. Добавление каталога модулей внутри node_modules дает мне правильный путь к каталогу для импорта, но это не то, что мы все хотим сделать.

+0

Существует соответствующее обсуждение, в котором освещаются некоторые проблемы с конфигурацией TypeScript после изменения конфигурации WebPack - https://github.com/AngularClass/angular-starter/issues/1439 –

ответ

0

Я нашел решение, но это не самый лучший способ сделать импорт.

Добавить корневой каталог для распознавателя модулей в webpack.config.js

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

В 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 {} 

Главное, добавить только root directory откуда вы хотите использовать этот путь, и он будет работать.

Смежные вопросы