Error while generating angular 4 Webpack build from scratch

Question

I am using following version of Webpack and cli and I am trying to build a simple component app.

"webpack": "^4.6.0",
"webpack-cli": "^2.0.14",

And my webpack.config.json is,

    const path = require('path');
    module.exports = {
    entry: './app/main.ts',
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
            },
        ],
    },
    resolve: {
        extensions: [
            '.ts',
        ],
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './build'),
    },
};

In src I just have an app component code from which a bundle file is to be generated.I have tried many possible ways but unable to produce bundle. If I exclude node_modules folder it generated build successfully but then without dependency I am unable to run application. If I include node_modules in dependency I get below errors:

ERROR in ./node_modules/querystring-es3/index.js
Module not found: Error: Can't resolve './decode' in '/Users/test/manualAngular/node_modules/querystring-es3'
 @ ./node_modules/querystring-es3/index.js 3:33-52
 @ ./node_modules/url/url.js
 @ (webpack)-dev-server/client?http://localhost:8080
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

ERROR in ./node_modules/querystring-es3/index.js
Module not found: Error: Can't resolve './encode' in '/Users/test/manualAngular/node_modules/querystring-es3'
 @ ./node_modules/querystring-es3/index.js 4:37-56
 @ ./node_modules/url/url.js
 @ (webpack)-dev-server/client?http://localhost:8080
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

ERROR in (webpack)-dev-server/client?http://localhost:8080
Module not found: Error: Can't resolve './overlay' in '/Users/test/manualAngular/node_modules/webpack-dev-server/client'
 @ (webpack)-dev-server/client?http://localhost:8080 10:14-34
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

ERROR in (webpack)-dev-server/client?http://localhost:8080
Module not found: Error: Can't resolve './socket' in '/Users/test/manualAngular/node_modules/webpack-dev-server/client'
 @ (webpack)-dev-server/client?http://localhost:8080 9:13-32
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

ERROR in ./node_modules/url/url.js
Module not found: Error: Can't resolve './util' in '/Users/test/manualAngular/node_modules/url'
 @ ./node_modules/url/url.js 25:11-28
 @ (webpack)-dev-server/client?http://localhost:8080
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

ERROR in (webpack)-dev-server/client?http://localhost:8080
Module not found: Error: Can't resolve 'loglevel' in '/Users/test/manualAngular/node_modules/webpack-dev-server/client'
 @ (webpack)-dev-server/client?http://localhost:8080 8:10-29
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

ERROR in ./node_modules/@angular/core/esm5/core.js
Module not found: Error: Can't resolve 'rxjs/Observable' in '/Users/test/manualAngular/node_modules/@angular/core/esm5'
 @ ./node_modules/@angular/core/esm5/core.js 7:0-45 5752:53-63 5760:44-54
 @ ./app/main.ts
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

ERROR in ./node_modules/@angular/core/esm5/core.js
Module not found: Error: Can't resolve 'rxjs/Subject' in '/Users/test/manualAngular/node_modules/@angular/core/esm5'
 @ ./node_modules/@angular/core/esm5/core.js 10:0-39 4371:2-9
 @ ./app/main.ts
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

ERROR in ./node_modules/@angular/core/esm5/core.js
Module not found: Error: Can't resolve 'rxjs/Subscription' in '/Users/test/manualAngular/node_modules/@angular/core/esm5'
 @ ./node_modules/@angular/core/esm5/core.js 11:0-49 4365:39-51
 @ ./app/main.ts
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

ERROR in ./node_modules/@angular/core/esm5/core.js
Module not found: Error: Can't resolve 'rxjs/observable/merge' in '/Users/test/manualAngular/node_modules/@angular/core/esm5'
 @ ./node_modules/@angular/core/esm5/core.js 8:0-46 5791:12-17
 @ ./app/main.ts
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

ERROR in ./node_modules/@angular/core/esm5/core.js
Module not found: Error: Can't resolve 'rxjs/operator/share' in '/Users/test/manualAngular/node_modules/@angular/core/esm5'
 @ ./node_modules/@angular/core/esm5/core.js 9:0-44 5791:37-42
 @ ./app/main.ts
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

ERROR in (webpack)-dev-server/client?http://localhost:8080
Module not found: Error: Can't resolve 'strip-ansi' in '/Users/test/manualAngular/node_modules/webpack-dev-server/client'
 @ (webpack)-dev-server/client?http://localhost:8080 7:16-37
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

ERROR in (webpack)-dev-server/client?http://localhost:8080
Module not found: Error: Can't resolve 'webpack/hot/emitter' in '/Users/test/manualAngular/node_modules/webpack-dev-server/client'
 @ (webpack)-dev-server/client?http://localhost:8080 225:21-51
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.ts

This might help

Vikas
– Vikas

2018-04-20 13:06:27 +00:00
Commented Apr 20, 2018 at 13:06 — Vikas
– Vikas, Commented Apr 20, 2018 at 13:06

Yanis-git · Accepted Answer · 2018-04-20 13:05:01Z

hello your config should looks like :

const { TsConfigPathsPlugin } = require('awesome-typescript-loader');

var config = {
    entry: options.entry,
    resolve: {
        alias: options.alias,
        extensions: ['.ts','.tsx','.js','.scss','.css','.html'],
        modules: ['node_modules'], // Here to specify from where webpack have to looking for vendor.
        plugins:[
            // This is to provide tsconfig file
            new TsConfigPathsPlugin({
                configFileName:ROOT+'/tsconfig.json'
            })
        ]
    }
};

// [...]

/**
 * Loaders
 * Reference: https://webpack.js.org/concepts/loaders/
 * List: https://webpack.js.org/loaders/
 * This handles most of the magic responsible for converting modules
 */
config.module = {
    rules: [
        /**
         * Compiles TypeScript files.
         */
        {
            test: /\.tsx?$/,
            use: [
                {
                    loader: 'babel-loader'
                },
                {
                    loader: '@angularclass/hmr-loader'
                },
                {
                    loader: 'awesome-typescript-loader',
                    options: {
                        configFileName: ROOT+'/tsconfig.json'
                    }
                },
                {
                    loader: 'angular2-template-loader'
                }
            ],
            // exclude: [/[node_modules|vendor]\/(?!(ng2-.+|ngx-.+))/]
        }
    ]
};

Don't forget to add all needed loaders to your package.json :

"@angularclass/hmr-loader": "^3.0.4",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"awesome-typescript-loader": "^3.4.1",
"angular2-template-loader": "^0.6.2",

Collectives™ on Stack Overflow

Error while generating angular 4 Webpack build from scratch

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related