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

假设第一行是由于使用全局＆＃34;窗口＆＃34;变量我经历了并用服务引用替换了它的每个引用：

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

function getWindow(): any {
    return window;
}

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

我很确定我得到了所有我使用窗口变量的地方，但我无法解决错误，错误提供的信息似乎有点无用，因为它没有＆＃39;告诉我它遇到了什么问题。

这是我的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'
        })
    ]
};

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

UPDATE 7/19/2017：我发现如果我将webpack配置中的.scss加载程序更改为以下内容（并从.ts规则中删除angular-router-loader），那么我得到它编译，但我的风格不会出现：

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

一旦我在错误返回中添加其他一个加载器。知道如何让我的.scss样式显示出来吗？

Answer 1

这可能有点晚了，但我最近碰到了这个完全相同的问题并找到了解决方案而且我必须说...圣洁的鳄梨酱是错误ERROR在窗口中没有定义误导！

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

解决方案？ 将样式加载器替换为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']
}

窗口未使用Angular4 + AoT + Webpack2定义

1 个答案: