Error when importing it using webpack

[koblass]

Hi,

I use the "webpack.config.js" from your "angular2-bootstrap-starter" project, but when I try to import the dropdown in one of my component like this:

import {Dropdown} from "ng2-bootstrap/ng2-bootstrap";

I get the following error:

Error: Could not find file: 'c:/MyProject/node_modules/ng2-bootstrap/ng2-bootstrap.d.ts'.
    at getValidSourceFile (c:\MyProject\node_modules\typescript\lib\typescript.js:43586:23)
    at Object.getSyntacticDiagnostics (c:\MyProject\node_modules\typescript\lib\typescript.js:43756:52)
    at c:\MyProject\node_modules\ts-loader\index.js:317:42
    at Array.forEach (native)
    ...

Of course I triple checked and the file exists.

Have you already experienced something like this ? Any clue ?

Best Daniel

[valorkin]

node npm webpack ts versions?

[koblass]

Hi,

I must do something wrong with webpack, because if I use the complete path (../../node_modules/ng2-bootstrap/ng2-bootstrap" in my import statment it's working like a charm. But the ts-loader of webpack is complaining when I use the lib form "ng2-bootstrap/ng2-bootstrap"...

node: v4.2.2 npm: 2.14.7 webpack: 1.12.9 ts-loader: 0.7.2

Here is my webpack conf:

var webpack = require('webpack');
var path = require('path');

var CompressionPlugin = require('compression-webpack-plugin');

/*eslint no-process-env:0, camelcase:0*/
var isProduction = (process.env.NODE_ENV || 'development') === 'production';

var src = 'src/public';
var dest = '/build';
var absDest = path.join(__dirname, dest);

var config = {
    devtool: 'source-map',

    debug: true,
    cache: true,
    context: __dirname,

    resolve: {
        root: __dirname,
        extensions: ['', '.ts', '.js', '.json'],
        alias: {}
    },
    resolveLoader: {
        root: path.join(__dirname, 'node_modules'),
        modulesDirectories: ['node_modules'],
        fallback: path.join(__dirname, "node_modules")
    },

    entry: {
        vendor: [
            // Angular 2 Deps
            '@reactivex/rxjs',
            'zone.js',
            'reflect-metadata',
            'angular2/angular2',
            'angular2/core',
            'angular2/router',
            'angular2/http',
            'ng2-bootstrap/ng2-bootstrap'
        ],

        app: [
            './src/app/bootstrap'
        ]
    },

    output: {
        path: absDest,
        filename: '[name].js',
        sourceMapFilename: '[name].js.map',
        chunkFilename: '[id].chunk.js'
    },

    // our Development Server configs
    devServer: {
        inline: true,
        colors: true,
        historyApiFallback: true,
        contentBase: src,
        publicPath: dest
    },
    module: {
        loaders: [
            // Support for *.json files.
            {test: /\.json$/, loader: 'json'},

            // Support for CSS as raw text
            {test: /\.css$/, loader: 'raw'},

            // support for .html as raw text
            {test: /\.html$/, loader: 'raw'},

            // Support for .ts files
            {
                test: /\.ts$/,
                loader: 'ts',
                exclude: [
                    /\.min\.js$/,
                    /\.spec\.ts$/,
                    /\.e2e\.ts$/
                ]
            }

        ],
        noParse: [
            /rtts_assert\/src\/rtts_assert/
        ]
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: Infinity,
            chunks: ['app'],
            filename: 'vendor.js'
        }),
        new webpack.optimize.DedupePlugin({
            __isProduction: isProduction
        }),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.DedupePlugin()
    ],
    pushPlugins: function () {
        if (!isProduction) {
            return;
        }

        this.plugins.push.apply(this.plugins, [
            //production only
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false,
                    drop_debugger: false
                },
                output: {
                    comments: false
                },
                beautify: false
            }),
            new CompressionPlugin({
                asset: '{file}.gz',
                algorithm: 'gzip',
                regExp: /\.js$|\.html|\.css|.map$/,
                threshold: 10240,
                minRatio: 0.8
            })
        ]);
    },

    stats: {colors: true, reasons: true}
};

config.pushPlugins();

module.exports = config;

Best Daniel

[valorkin]

typescript is complaining, typescipt version? (global)

[koblass]

typescript 1.6.2, local