Error: [$compile:multidir] Multiple directives

表題の通り実行時にエラーが出たので原因と解決方法のメモです。

Webpack + AngularJS + TypeScript構成です。

最終的にエラーになる理由はディレクティブを複数定義したからです。 Webpackが生成するbundle.jsが同じのを吐いているんですよね。

// 呼び出し元
import './app/app';
import './header/header';

// 変換後
    __webpack_require__(8);
    __webpack_require__(9);

/***/ },
/* 8 */
/***/ function(module, exports) {

        // 省略
    angular.module('app')
        .component('myApp', new MyAppComponent());

/***/ },
/* 9 */
/***/ function(module, exports) {

        // 省略
    angular.module('app')
        .component('myApp', new MyAppComponent());
/***/ },

Step 1

いろいろためしてみたところtsconfig.jsonをリネームして読まないようにして実行したところすんなり通る。。

ちなみにこんなんです。

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "outDir": ".",
        "out": "dummy.js",
        "rootDir": ".",
        "sourceMap": false
    },
    "files": [
        "./src/ts/app.ts"
    ]
}

Step 2

1つずつ消していったところ

"out": "dummy.js",を消した時にエラーが消えました。

いやーよくわからない（自分がわかってないだけ）ですね。

tsconfingがTypeScriptコンパイラのオプションてのはわかるんですがそこにts-loader経由でWebpackに入れるとなんでこういう動きになるのか。。。

もともとWebpackを使わずにコンパイルしてたのでoutとかが残っちゃってたのですが一旦tsconfigを消しても不都合はなさそうなのでその作戦でいきます。

webpackとts-loaderとが何をしているかちゃんとみないとあかんですね、黒魔術すぎて詰まるとさっぱりわからない。。。