在require.ensure typescript文件中,Webpack失败

时间:2017-07-14 14:31:55

标签: angularjs webpack angular-ui-router

在app中我定义了我的状态:

$stateProvider
.state('index', {
    url: '/',
    controller: 'indexController',
    resolve: {
        foo: ['$q', '$ocLazyLoad', function ($q, $ocLazyLoad) {
            let deferred = $q.defer();
            require.ensure([], function () {                                    
                let module = require('./index/test.ts')(angularRef);
                $ocLazyLoad.load({ name: 'myAppIndex' });               
                deferred.resolve(module);
            });         
            return deferred.promise;
        }]
   }
})

webpack定义如下所示:

...
    module: {
    loaders: [
        {
            test: /\.js$/,
            use: [
                { loader: 'babel-loader', query: { compact: true } },
            ]
        },             
        { test: /\.ts?$/, loader: "ts-loader" },

        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: [
                    { loader: 'css-loader', query: { modules: false, sourceMaps: false, minimize: true } }
                ]
            })
        }, {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: [
                    { loader: 'css-loader', query: { modules: false, sourceMaps: false, minimize: true } },
                    { loader: 'sass-loader', query: { sourceMaps: false } }
                ]
            })
        }, {
            test: /\.html$/,
            loader: 'raw-loader',
            exclude: /node_modules/
        }
    ]
....

不要忘记tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "lib": [ "es2015", "dom" ],
    "typeRoots": [
      "./node_modules/@types/"
    ],

    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

但每次我用webpack编译脚本 " webpack-dev-server --inline --watch --devtool eval --progress --colors --content-base views"

我收到了这个错误

  

main.bundle.js:1 TypeError: webpack_require (...)不是函数

' ./ index / test.ts'被调用,里面有一个" console.log"这被称为

所以最重要的问题是,我做错了什么?

1 个答案:

答案 0 :(得分:0)

添加require参数。 https://webpack.js.org/api/module-methods/#require-ensure

    require.ensure([], function (require) {                                    
        let module = require('./index/test.ts')(angularRef);
        $ocLazyLoad.load({ name: 'myAppIndex' });               
        deferred.resolve(module);
    });