ts-loader: When using typescript 1.9.0, "exculde" in tsconfig.json is ignored only on Windows

I am trying to transpile small sample with @angular/router 3.0.0-alpha.3 with webpack 2.1.0-beta.13 I tried to describe as simple, but I’m sorry for setting becomes slightly longer.

$ node -v
v4.4.5

Here is webpack.config

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

function root(p) {
    return path.resolve(__dirname, p);
}

module.exports = function(env) {
    const config = {
        context: root('app'),
        entry: {
            app: [
                './main.ts'
            ],
            vendor: [
                'reflect-metadata', 'zone.js',
                '@angular/common', '@angular/core', '@angular/http',
                '@angular/platform-browser-dynamic',
                '@angular/router'
            ]
        },
        output: {
            path: root('dist'),
            publicPath: '/dist',
            filename: 'bundle.js'
        },
        resolve: {
            modules: [
                root('app'),
                'node_modules'
            ],
            extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'],
        },
        module: {
            loaders: [{
                test: /\.ts$/,
                loader: 'babel-loader!ts-loader'
            }, {
                test: /\.json$/,
                loader: 'json-loader'
            }],
        },
        devServer: {
            historyApiFallback: true,
            hot: true,
            progress: true,
        },
        debug: true,
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor',
                minChunks: Infinity,
                filename: 'vendor.bundle.js'
            }),
            new webpack.LoaderOptionsPlugin({
                minimize: true,
                debug: false
            })
        ]
    };

    if (env && env.production) {
        config.devtool = 'hidden-source-map';
        config.plugins.push.apply([
            new webpack.optimize.UglifyJsPlugin({
                beautify: false,
                mangle: false,
                comments: true
            })
        ]);
        return config;
    }

    config.devtool = 'eval-source-map';
    return config;
}

.babelrc

{
    "presets": ["es2015-native-modules"]
}

package.json

{
    "name": "work",
    "version": "1.0.0",
    "description": "",
    "main": "index.html",
    "directories": {
        "test": "test"
    },
    "scripts": {
        "postinstall": "npm run typings -- install",
        "typings": "typings",
        "build": "webpack",
        "start": "webpack-dev-server --hot --inline"
    },
    "license": "ISC",
    "devDependencies": {
        "babel-loader": "^6.2.4",
        "babel-preset-es2015-native-modules": "^6.6.0",
        "json-loader": "^0.5.4",
        "ts-loader": "^0.8.2",
        "typescript": "^1.9.0-dev.20160613-1.0",
        "typings": "^1.0.5",
        "webpack": "^2.1.0-beta.13",
        "webpack-dev-server": "^2.1.0-beta.0"
    },
    "dependencies": {
        "@angular/common": "^2.0.0-rc.1",
        "@angular/compiler": "^2.0.0-rc.1",
        "@angular/core": "^2.0.0-rc.1",
        "@angular/http": "^2.0.0-rc.1",
        "@angular/platform-browser": "^2.0.0-rc.1",
        "@angular/platform-browser-dynamic": "^2.0.0-rc.1",
        "@angular/router": "^3.0.0-alpha.3",
        "reflect-metadata": "^0.1.3",
        "rxjs": "^5.0.0-beta.6",
        "zone.js": "^0.6.12"
    }
}

I will show ts and html for sure.

app/main.ts

// main entry point
import { Component } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { ROUTER_DIRECTIVES, provideRouter, RouterConfig } from '@angular/router';

const routes: RouterConfig = [
  {
    path: '/', component: AppComponent
  }
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes),
];

@Component({
  selector: 'my-app',
  template: `Hello`,
  directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }

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

index.html

<!DOCTYPE html>
    <html>
    <head>
        <!-- Set the base href -->
        <base href="." />
        <title>Router Sample</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <my-app>loading...</my-app>
        <script src="dist/vendor.bundle.js"></script>
        <script src="dist/bundle.js"></script>
    </body>
    </html>

As I exclude node_modules and typings in tsconfig.json

{
    "compilerOptions": {
        "target": "ES6",
        "module": "ES6",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "declaration": false
    },
    "compileOnSave": false,
    "buildOnSave": false,
    "exclude": [
        "node_modules",
        "typings"
    ]
}

So

$ node_modules/.bin/tsc -p .

generates no error here. So far looks OK.

But when I try to transpile it

$ npm run build
> work@1.0.0 build C:\work\test
> webpack

ts-loader: Using typescript@1.9.0-dev.20160613-1.0 and C:\work\test\tsconfig.json
Hash: fd3c3c14f7c8cd7c0794
Version: webpack 2.1.0-beta.13
Time: 20014ms
           Asset     Size  Chunks             Chunk Names
vendor.bundle.js  6.94 MB       0  [emitted]  vendor
       bundle.js  5.91 kB       1  [emitted]  app
 [490] multi app 28 bytes {1} [built]
 [491] multi vendor 100 bytes {0} [built]
    + 490 hidden modules

Seem still OK, but then following errors are on console.

ERROR in C:\work\test\node_modules\zone.js\dist\zone.js.d.ts
(122,11): error TS2451: Cannot redeclare block-scoped variable 'Zone'.

ERROR in C:\work\test\node_modules\zone.js\dist\zone.js.d.ts
(354,14): error TS2300: Duplicate identifier 'HasTaskState'.

[skip many errors]

ERROR in C:\work\test\node_modules\rxjs\src\observable\BoundCallbackObservable.ts
(130,9): error TS2341: Property 'callbackFunc' is private and only accessible within class 'BoundCallbackObservable<T>'.

ERROR in C:\work\test\node_modules\rxjs\src\Subject.ts
(127,14): error TS2415: Class 'AnonymousSubject<T>' incorrectly extends base class 'Subject<T>'.
  Property 'source' is optional in type 'AnonymousSubject<T>' but required in type 'Subject<T>'.

(Same error occurs when I invoke webpack-dev-server --hot --inline.)

It seems all errors are from typescript and all related .ts files are in node_modules, so I guess some process (that is not the first transpilation step) does not see exclude setting in tsconfig.json. Despite of this error, bundle.js files are generated and application seems to work. (Indeed, I tried little more complex one.) But as this is recognized as error, Hot Module Replacement won’t be active, that’s the problem.

And oddly, this happens only on Windows, both in command prompt, cygwin, mingw. I tried exact the same one on Mac and Linux, and everything is fine on both environment.

Only workaround I found is use files property instead of exculde in tsconfig.json. However there is no support for wildcard or regexp for files, I have to write all .ts file.

So I’d appreciate if someone confirm this is a bug (in loader or webpack itself) or kindly tell me what I am missing.

Thanks in advance.

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 15 (5 by maintainers)

Most upvoted comments

Even if I just specify test: /src\/.*\.ts(x?)$/, it still looks inside node_modules! So it appears to always include everything that is not explicitly excluded in tsconfig