未使用Angular4 + AoT + Webpack2定义窗口 [英] window is not defined using Angular4 + AoT + Webpack2
问题描述
我有一个使用webpack的angular4应用程序，并且在JiT上运行良好，但是现在我试图使其在AoT上运行，但遇到了问题.具体来说，我遇到了以下错误:
I have an angular4 app that uses webpack and has been working great with JiT but now I'm trying to get it working with AoT and I'm having issues. Specifically I'm getting the following error:
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
假设第一行是由于使用了全局窗口"变量，我遍历并将对它的所有引用替换为服务引用:
Assuming that the first line was due to the use of the global "window" variable I went through and replaced every reference to it with a service reference:
import { Injectable } from '@angular/core';
function getWindow(): any {
return window;
}
@Injectable()
export class WindowRefService {
get nativeWindow(): any {
return getWindow();
}
}
我敢肯定我在所有使用window变量的地方都可以使用，但是我无法越过错误，并且错误所提供的信息似乎毫无用处，因为它不能告诉我它在哪里有问题.
I'm pretty sure I got all of the places where I'm using the window variable but I can't get past the error and the information provided with the error seems marginally useless as it doesn't tell me where it's having the issue.
这是我的webpack配置文件:
Here's my webpack config file:
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'
})
]
};
有没有一种方法可以更好地识别出实际上导致它失败的原因?
Is there a way to better identify what is actually causing it to fail?
更新7/19/2017::我发现，如果将webpack配置中的.scss加载程序更改为以下内容(并从.ts规则中删除angular-router-loader)，则我可以编译它，但是我的样式无法显示:
UPDATE 7/19/2017: I found that if I change the .scss loader in the webpack config to the following (and remove the angular-router-loader from the .ts rule) then I get it to compile but my styles don't show up:
use: ['raw-loader', 'sass-loader?sourceMap']
我在错误返回中添加了其他装载程序之一.知道如何显示我的.scss样式吗?
As soon as I add one of the other loaders in the error returns. Any idea how to get my .scss styles to show up?
推荐答案
这可能有点晚了，但是我最近遇到了这个完全相同的问题，并找到了解决方案，我必须说...圣鳄梨酱是错误
This may be a little late but I recently ran across this exact same issue and found the solution and I must say...holy guacamole is the error ERROR in window is not defined misleading!
根本原因? 样式加载器.看来，样式加载器只能在客户端(或本地)构建.当您尝试进行AOT构建时，它的作用类似于服务器端构建，并且由于以下问题而失败: https://github.com/webpack-contrib/style-loader/issues/109
The root cause? Style-loader. It appears that style-loader can only be built client-side (or locally). When you try to do AOT builds, it acts like a server-side build and it fails due to this issue: https://github.com/webpack-contrib/style-loader/issues/109
解决方案? 用iso-morphic-style-loader替换样式加载器: https://github.com/creeperyang/iso-morphic-style-loader
The solution? Replace style-loader with 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定义窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
