窗口未使用Angular4 AoT Webpack2定义

前端之家收集整理的这篇文章主要介绍了窗口未使用Angular4 AoT Webpack2定义前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个使用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']

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

解决方法

这可能有点晚了,但我最近碰到了这个完全相同的问题并找到了解决方案,我必须说…圣洁鳄梨酱是错误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']
}

猜你在找的Angularjs相关文章