没有使用 Angular 4 + AoT + Webpack 2 定义窗口

Question

我有一个使用 webpack 的 angular4 应用程序，并且与 JiT 配合得很好，但现在我正试图让它与 AoT 配合使用，但我遇到了问题。具体来说，我收到以下错误：

ERROR in window is not defined

ERROR in ./src/app/main/main.ts
Module not found: Error: Can't resolve './../../../aot-main/src/app/main/app.module.ngfactory' in 'W:\<Full Path to App>\src\app\main'
resolve './../../../aot-main/src/app/main/app.module.ngfactory' in 'W:\<Full Path to App>\src\app\main'
  using description file: W:\<Full Path to App>\package.json (relative path: ./src/app/main)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: W:\<Full Path to App>\package.json (relative path: ./src/app/main)
    using description file: W:\<Full Path to App>\package.json (relative path: ./aot-main/src/app/main/app.module.ngfactory)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        W:\<Full Path to App>\aot-main\src\app\main\app.module.ngfactory doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        W:\<Full Path to App>\aot-main\src\app\main\app.module.ngfactory.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        W:\<Full Path to App>\aot-main\src\app\main\app.module.ngfactory.js doesn't exist
      as directory
        W:\<Full Path to App>\aot-main\src\app\main\app.module.ngfactory doesn't exist
[W:\<Full Path to App>\aot-main\src\app\main\app.module.ngfactory]
[W:\<Full Path to App>\aot-main\src\app\main\app.module.ngfactory.ts]
[W:\<Full Path to App>\aot-main\src\app\main\app.module.ngfactory.js]
[W:\<Full Path to App>\aot-main\src\app\main\app.module.ngfactory]
 @ ./src/app/main/main.ts 3:0-91

假设第一行是由于使用了全局“窗口”变量，我将所有对它的引用替换为服务引用：

import { Injectable } from '@angular/core';

function getWindow(): any {
    return window;
}

@Injectable()
export class WindowRefService {
    get nativeWindow(): any {
        return getWindow();
    }
}

我很确定我得到了所有使用 window 变量的地方，但我无法克服错误，并且错误提供的信息似乎毫无用处，因为它没有告诉我它在哪里有问题。

这是我的 webpack 配置文件：

var webpack = require('webpack');
var ngToolsWebpack = require('@ngtools/webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var helpers = require('./helpers');
require('es6-promise').polyfill();

module.exports = {
    entry: {
        MyApp: './src/app/main/main.ts',
        polyfills: './src/app/main/polyfills.ts',
        vendor: './src/app/main/vendor.ts'
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    output: {
        path: helpers.root('app'),
        publicPath: 'https://localhost:8080/app/',
        filename: 'js/[name].js?[hash]',
        chunkFilename: 'js/MyApp-[id].chunk.js?[hash]'
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [{ loader: '@ngtools/webpack' }, { loader: 'angular-router-loader' }]
            },
            {   test: /\.html$/,
                use: [{ loader: 'html-loader' }]
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                use: [{ loader: 'file-loader?name=images/[name].[ext]' }]
            },
            {
                test: /\.scss$/,
                use: ['to-string-loader', 'style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap']
            }
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['MyApp', 'vendor', 'polyfills']
        }),
        new HtmlWebpackPlugin({
            template: 'src/app/main/index.html'
        }),
        new webpack.ContextReplacementPlugin(
            /angular(\\|\/)core(\\|\/)@angular/,
            helpers.root('doesnotexist')
        ),
        new ngToolsWebpack.AotPlugin({
            tsConfigPath: './tsconfig.main.aot.json',
            entryModule: './src/app/main/app.module#AppModule'
        })
    ]
};

有没有办法更好地识别实际导致它失败的原因？

2017 年 7 月 19 日更新： 我发现如果我将 webpack 配置中的 .scss 加载器更改为以下内容（并从 .ts 规则中删除 angular-router-loader），那么我可以编译它，但我的样式没有显示出来：

use: ['raw-loader', 'sass-loader?sourceMap']

只要我在错误返回中添加其他加载程序之一。知道如何显示我的 .scss 样式吗？

Answer 1

这可能有点晚了，但我最近遇到了同样的问题并找到了解决方案，我必须说......神圣的鳄梨酱是错误 ERROR in window is not defined 误导！

根本原因？ 样式加载器。看来样式加载器只能在客户端（或本地）构建。当您尝试进行 AOT 构建时，它就像服务器端构建一样，并且由于以下问题而失败：https://github.com/webpack-contrib/style-loader/issues/109

解决方案？ 将 style-loader 替换为 iso-morphic-style-loader：https://github.com/creeperyang/iso-morphic-style-loader

{
    test: /\.scss$/,
    use: ['to-string-loader', 'iso-morphic-style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap']
}