0

Angular 1.x の JavaScript プロジェクトを WebPack および TypeScript に変換しています ( ts-loaderを使用)。私はそれをほとんど機能させましたが、エクスポートが直接使用されていないときに、ts-loader がバンドルからスクリプトを最適化しているように見えると、問題が発生します。

この問題を示すサンプル プロジェクトを次に示します (npm インストール、webpack、次に index.html をロードしてコンソールを監視します)。

https://github.com/bbottema/webpack-typescript

ClassA からのログは表示されていますが、Angular は ClassB が見つからない (プロバイダー) と報告しています。bundle.js を見ると、ClassB が完全に欠落していることがわかります。違いは、ClassA はインポート直後に使用を開始し、ClassB はコンパイルのために型によってのみ参照されることです。

それはバグですか、それとも ClassB を強制的に含める方法はありますか? それとも私はそれについて間違っていますか？Angular 2 はおそらくこの問題を解決するでしょうが、それは現時点では大きすぎるステップです。

上記のプロジェクトの関連スクリプト:

パッケージ.json

{
    "devDependencies": {
        "typescript": "^1.7.5",
        "ts-loader": "^0.8.1"
    },
    "dependencies": {
        "angular": "1.4.9"
    }
}

webpack.config.js

var path = require('path');

module.exports = {
    entry: {
        app: './src/entry.ts'
    },
    output: {
        filename: './dist/bundle.js'
    },
    resolve: {
        root: [
            path.resolve('./src/my_modules'),
            path.resolve('node_modules')
        ],
        extensions: ['', '.ts', '.js']
    },
    module: {
        loaders: [{
            test: /\.tsx?$/,
            loader: 'ts-loader'
        }]
    }
};

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs"
  },
  "exclude": [
    "node_modules"
  ]
}

index.html

<!doctype html>
<html ng-app="myApp">
    <body>
        <script src="dist/bundle.js"></script>
    </body>
</html>

entry.js

declare var require: any;

'use strict';

import ClassA = require('ClassA');
import ClassB = require('ClassB');

var a:ClassA = new ClassA(); // direct use, this works

var angular = require('angular');

angular.module('myApp', []).
    // this compiles as it should, but in runtime the provider will not be packaged and angular will throw an error
    run(function(myProvider: ClassB) {
    }
);

ClassA.ts

// this line will be logged just fine
console.log('ClassA.ts: if you see this, then ClassA.ts was packaged properly');

class ClassA {
}

export = ClassA;

ClassB.ts

declare var require: any;

// this line is never logged
console.log('ClassB.ts: if you see this, then ClassB.ts was packaged properly');

class ClassB {
}

var angular = require(angular);

angular.module('myApp').service(new ClassB());

export = ClassB;
4

1 に答える 1