Webpack 2 not loading imports for Angular2 Typescript application

Question

I'm trying to implement webpack on a medium size angular2 project that uses typescript. But when I run webpack it only bundles the 2 files I specify in the config file. It never traverses through the import tree and loads the rest of the modules.

I've got a fairly simple configuration set up. I'd like to get it just bundling the typescript to start with. Then I'll move onto bundling more files.

When I change the import {} from "x" syntax to var {} = require("x"). webpack works, however, throws hundreds of errors as it cannot resolve anything imported from the @angular2 directory.

How do I get webpack to traverse through the 'import' statements and bundle more than just one file into the result?

My configuration is as follows.

webpack.config.js

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

module.exports = {
    context: path.join(__dirname, 'wwwroot/app'),
    entry: {
        'vendor': './vendor',
        'app': './main'
    },
    resolve: {
        extensions: ['', '.ts', '.js']
    },
    output: {
        path: path.join(__dirname, 'wwwroot/built'),
        filename: '[name].bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                loaders: ['ts', 'angular2-template-loader']
            }
        ]
    }
};

tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": false,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "system",
    "moduleResolution": "node"
  },
  "exclude": [
    "node_modules",
    "wwwroot/lib",
    "bin"
  ]
}

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import { disableDeprecatedForms, provideForms } from '@angular/forms';

import { AppComponent } from './app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';

bootstrap(AppComponent, [
    APP_ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    disableDeprecatedForms(),
    provideForms()
]).catch(err => console.error(err));

Console output on running webpack:

10% building modules 0/2 modules 2 active ...\src\wwwroot\app\main.tsts-loader: Using [email protected] and C:\BitBucket\src\tsconfig.json
8831ms building modules
1ms sealing
1ms optimizing
0ms basic module optimization
1ms module optimization
1ms advanced module optimization
0ms basic chunk optimization
0ms chunk optimization
1ms advanced chunk optimization
0ms module and chunk tree optimization
1ms module reviving
0ms module order optimization
1ms module id optimization
1ms chunk reviving
0ms chunk order optimization
1ms chunk id optimization
8ms hashing
0ms module assets processing
5ms chunk assets processing
4ms additional chunk assets processing
2ms recording
0ms additional asset processing
1ms chunk asset optimization
1648ms asset optimization
10ms emitting
Hash: 8a864382625d5d236939
Version: webpack 2.1.0-beta.21
Time: 10640ms
           Asset     Size  Chunks             Chunk Names
vendor.bundle.js  3.21 kB       0  [emitted]  vendor
   app.bundle.js  3.81 kB       1  [emitted]  app
    + 2 hidden modules

I noticed that the typescript module setting in the TSCONFIG is 'system'. Thought about using 'es6' instead? And have you considered using awesome-typescript-loader instead of ts-loader? — Sean Larkin
– Sean Larkin, Commented Aug 24, 2016 at 2:38

John Siu · Accepted Answer · 2016-08-24 02:47:37Z

1

Try change module from system to commonjs as follow:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs", // <--- from 'system' to 'commonjs'
    "moduleResolution": "node"
  },
  "exclude": [
    "node_modules",
    "wwwroot/lib",
    "bin"
  ]
}

answered Aug 24, 2016 at 2:47

John Siu

5,1042 gold badges29 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Webpack 2 not loading imports for Angular2 Typescript application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related