Ошибка «Не удается найти модуль» при объединении проекта с веб-пакетом, когда node_modules в другом пакете

Question

В настоящее время я разрабатываю приложение, используя typescript@2.3.4 с angular 5 и webpack 2.2.1 для связывания. Я создавал его локально (с node_modules в корневом каталоге), и он работал отлично, но сейчас я пытаюсь развернуть его в среде, которая требует использования предварительно созданных node_modules, хранящихся в другом каталоге. Сначала я получал следующую ошибку:

ERROR in Entry module not found: Error: Can't resolve 'awesome-typescript-loader' in ‘/path/to/your/app’

Но я избавился от этого, добавив следующие строки в конфигурацию моего веб-пакета:

resolve:{
    modules:['absolute/path/to/node_modules',helpers.root('src')]
},
resolveLoader:{
    modules:['absolute/path/to/node_modules']
}

Предыдущая ошибка исчезла, но я получил новую, несмотря на добавление параметра разрешения:

ERROR in [at-loader] ./src/main.ts:1:40 
TS2307: Cannot find module '@angular/platform-browser-dynamic'.

ERROR in [at-loader] ./src/main.ts:2:32 
    TS2307: Cannot find module '@angular/core'.

ERROR in [at-loader] ./src/main.ts:6:5 
    TS2304: Cannot find name 'process'.

ERROR in [at-loader] ./src/polyfills.ts:3:1 
    TS2304: Cannot find name 'require'.

ERROR in [at-loader] ./src/polyfills.ts:5:5 
    TS2304: Cannot find name 'process'.

Это были не все ошибки, которые я получил, это было больше похоже на один импорт / запрос - одну ошибку.

Есть ли что-то еще, что я должен сделать, чтобы "сообщить" веб-пакету, что он должен искать модули в другом расположении node_modules? Прикрепление полной конфигурации веб-пакета для получения дополнительной информации:

общий файл

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const helpers = require('./helpers');

module.exports = {
    entry: {
        'polyfills': './src/polyfills.ts',
        'vendor':'./src/vendor.ts',
        'main': ['./src/main.ts','./src/styles.css']
    },
    node: {
        fs: "empty",
        net:"empty"
    },
    output: {
        path: `${__dirname}/../dist`,
        publicPath: '/',
        filename: '[name].js',
        sourceMapFilename: '[name].map'
    },

    resolve: {
        extensions: ['.ts', '.js']
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: [
                    {
                        loader: 'awesome-typescript-loader',
                        options: { configFileName: helpers.root('src', 'tsconfig.json') }
                    }, 'angular2-template-loader'
                ]
            },

            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=assets/[name].[hash].[ext]'
            },
           {
                test: /\.css$/,
                exclude: helpers.root('src', 'app'),
                loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
            },
            {
                test: /\.css$/,
                include: helpers.root('src', 'app'),
                loader: 'raw-loader'
            }
        ]
    },

    plugins: [
        new webpack.ContextReplacementPlugin(
            /angular(\\|\/)core(\\|\/)@angular/,
            helpers.root('./src'), 
            {} 
        ),
        new webpack.optimize.CommonsChunkPlugin({
            name: ['main','vendor','polyfills']
        }),
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ]
};

файл конфигурации prod

const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const commonConfig = require('./webpack.common.js');
const helpers = require('./helpers');

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

module.exports = webpackMerge(commonConfig, {
    devtool: 'source-map',

    output: {
        path: helpers.root('/../path/to/prod/dist'),
        publicPath: '/',
        filename: '[name].[hash].js',
        chunkFilename: '[id].[hash].chunk.js'
    },
    resolve:{
        modules:['/path/to/node_modules',helpers.root('src')]
    },
    resolveLoader:{
        modules:['/path/to/node_modules']
    },

    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            mangle: {
                keep_fnames: true
            }
        }),
        new ExtractTextPlugin('[name].[hash].css'),
        new webpack.DefinePlugin({
            'process.env': {
                'ENV': JSON.stringify(ENV)
            }
        }),
        new webpack.LoaderOptionsPlugin({
            htmlLoader: {
                minimize: false
            }
        })
    ]
});

Answer 1

Чтобы решить, просто вставьте в свой файл tsconfig.json:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "jsx": "react", // I use react 
    "module": "es6",
    "moduleResolution": "yourModulleResolutionHere",
    "sourceMap": true,
    "target": "es5",
    "lib": ["es2015", "dom"]
  },
  "exclude": [
    "node_modules"
  ]
}

Надеюсь, это поможет!