我有一个使用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
假设第一行是由于使用了全局“window”变量,我经历了并用服务引用替换了它的每个引用:
import { Injectable } from '@angular/core'; function getWindow(): any { return window; } @Injectable() export class WindowRefService { get nativeWindow(): any { return getWindow(); } }
我很确定我得到了所有我正在使用窗口变量的地方,但我无法通过错误,错误提供的信息似乎有点无用,因为它没有告诉我它在哪里有问题.
这是我的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' }) ] };
有没有办法更好地确定实际导致其失败的原因?
更新7/19/2017:我发现如果我将webpack配置中的.scss加载程序更改为以下内容(并从.ts规则中删除angular-router-loader),那么我可以将其编译,但我的样式不应该出现:
use: ['raw-loader','sass-loader?sourceMap']
解决方法
这可能有点晚了,但我最近碰到了这个完全相同的问题并找到了解决方案,我必须说…圣洁鳄梨酱是错误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$/,'iso-morphic-style-loader','sass-loader?sourceMap'] }