无法加载浏览器依赖项 Webpack答案

【问题标题】：Can't Load Browser Dependencies Webpack无法加载浏览器依赖项 Webpack
【发布时间】：2019-03-07 03:34:57
【问题描述】：

我正在尝试手动构建 Angular 6 应用程序（即不使用 CLI）。在运行 webpack 时遇到以下错误之前，我做得很好：

ERROR in window is not defined

现在从谷歌搜索看来，我缺少一些 polyfill，因为 webpack 使用节点来生成它的输出。我已经查看了 Angular 网站上的示例并将 polyfills.ts 文件添加到我的应用程序中，但我仍然无法摆脱错误。

这是我的webpack.confg.js：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ScriptExtPlugin = require('script-ext-html-webpack-plugin');
const { AngularCompilerPlugin } = require('@ngtools/webpack');

module.exports = function() {
    return {
        entry: {
            index: "./src/client/client.ts",
            polyfills: "./src/client/polyfills.ts"
        },
        output: {
            path: __dirname + "/client-dist",
            filename: "[name].client.js"
        },
        resolve: {
            extensions: ['.ts', '.js']
        },
        module: {
            rules: [
                {
                    test: /\.ts$/,
                    loader: '@ngtools/webpack'
                },
                {
                    test: /\.html$/,
                    loader: 'html-loader',
                },
                {
                    test: /\.css$/,
                    loader: ["style-loader", "css-loader"]
                }
            ]
        },
        plugins: [ 
            new HtmlWebpackPlugin({
                template: __dirname + '/src/client/index.html',
                output: __dirname + '/client-dist',
                inject: 'head'
            }),
            new ScriptExtPlugin({
                defaultAttribute: 'defer'
            }),
            new AngularCompilerPlugin({
               tsConfigPath: './tsconfig.json',
               entryModule: './src/client/app/app.module#AppModule'
            })
        ]
    }
}

我的polyfills.ts 文件：

import 'core-js/es6';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';

还有我的client.ts 文件（我的应用程序的入口点）：

import './polyfills'

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

我确定我只是在做一些愚蠢的事情，但我们将不胜感激。谢谢！

编辑 1：

阅读@SureshKumarAriya 发布的文章后，我尝试在我的 webpack.config 中更改以下内容：

new AngularCompilerPlugin({
    tsConfigPath: './tsconfig.json',
    entryModule: './src/client/app/app.module#AppModule',
    skipCodeGeneration: true // This is new
})

我得到一个不同的错误：ERROR in Resolution of relative paths requires a containing file.

我猜这意味着它无法解析我在 client.ts 中引用的打字稿文件之一？我不确定这是否让我更接近但仍然很有趣。

一如既往地感谢您的帮助！

【问题讨论】：

参考此链接blog.angularindepth.com/…
@SureshKumarAriya 还有更具体的建议吗？阅读这篇文章我不确定我的根本问题是什么。是加载器、插件还是其他东西？

标签： node.js angular typescript webpack polyfills

【解决方案1】：

内部输出配置。请添加 globalObject：“this”。

output: {
  // ...
  globalObject: "this"
}

https://github.com/markdalgleish/static-site-generator-webpack-plugin/issues/130

【讨论】：

【解决方案2】：

似乎您的依赖项仍然依赖于window 对象。

验证

typeof window !== 'undefined'

请参考以下link。

【讨论】：

如果问题出在我的依赖项中，我应该把它放在哪里？