小编Mic*_*ler的帖子

我在将 angularJs 应用程序升级到 Webpack4 时遇到问题。

这是我的设置：

vendor.ts

import "angular";
import "angular-i18n/de-de";
import "angular-route";

和

main.ts
import {MyAppModule} from "./my-app.app";

angular.element(document).ready(() => {
    angular.bootstrap(document.body, [MyAppModule.name], { strictDi: true });
});

使用 webpack 3。我有一个 commonsChunkPlugin 并且一切正常。

使用 webpack 4，我使用 splitChunks 选项不导入 angularjs 5 次：

webpack.config.ts
...
optimization: {
    splitChunks: {
        cacheGroups: {
            commons: {
                name: "commons",
                chunks: "initial",
                minChunks: 2
            }
        }
    }
}
...

这是正常工作。我只在我的common.js文件中加载了 angularjs 代码。但不幸的是代码被实例化了两次，所以应用程序总是记录警告：

警告：尝试多次加载 AngularJS。

这些块是通过HtmlWebpackPluginhtml加载的。

知道如何删除警告吗？

我在延迟加载和webpack时遇到问题。

肖恩·拉金（Sean Larkin）的视频展示了使用webpack 4创建延迟加载的包有多么容易（Here）。但是，当我尝试使用打字稿进行操作时，遇到了一些问题。

index.ts

export const someThing = something => import("./lazy/lazy");

和

lazy/lazy.ts
export default "I am lazy";

当我在没有任何webpack配置的情况下运行它并将文件命名为“ .js”时，我得到了一个主要块和一个小的块，用于延迟加载的模块。

但是，当我使用简单的Webpack配置将其作为“ .ts”文件运行时，我只会得到“ main.js”文件，而没有多余的块。

webpack.config.js
let config = {
    resolve: {
        extensions: [".ts", ".js"]
    },
    module: {
        rules: [
            { test: /\.ts$/, use: ["ts-loader"], exclude: /node_modules/ },
        ]
    },
}

module.exports = config;

和

tsconfig.json
{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": true,
        "lib": [ "es6", "dom" ],
        "removeComments": true
    }
}

有什么要配置的任务吗？将“ js”文件导入到“ ts”文件之间到底有什么区别？