0

我正在使用 angular 4 以及 Webpack 和 Yarn 作为包管理器。使用 JIT 开始我的项目并尝试使用 ngtools/webpack 迁移到 AOT。尝试使用以下方式构建我的项目时:

yarn build

我得到错误:

ERROR in window is not defined

我已经从我的项目中删除了所有窗口引用,以确保我的项目中不会发生错误。我的结论是它发生在我正在加载的外部模块中。不知道是哪个,因为错误消息似乎被破坏了。尝试以各种不同的方式包括它,主要是这些问题: 使用 Webpack 将 jQuery 暴露给真正的 Window 对象https: //stackoverflow.com/a/28989476/2823310但目前对我没有任何作用。

我认为这段代码:

var globalWindow = {};
globalWindow.$ = globalWindow.jQuery = require("jquery");

new webpack.DefinePlugin({
      window: globalWindow
    })

是解决问题的方法,但它会产生更多相同的问题:

ERROR in document is not defined

如何在窗口对象实际存在之前对窗口对象进行全局引用(AOT - 提前不应该真正知道真正的窗口对象)。Angular 4 和 webpack 的 AOT 是否还不够成熟?因为网络上没有太多关于它的信息。

似乎真的与这个话题有关: window is not defined using Angular4 + AoT + Webpack2 但没有得到回答。

包.json:

  {
  "name": "app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "clean": "rimraf node_modules doc dist && npm cache clean",
    "clean-install": "npm run clean && npm install",
    "clean-start": "npm run clean-install && npm start",
    "watch": "webpack --watch --progress --profile",
    "build": "rimraf dist && webpack --progress --profile --bail",
    "server": "webpack-dev-server --inline --progress --port 8080",
    "webdriver-update": "webdriver-manager update",
    "webdriver-start": "webdriver-manager start",
    "lint": "tslint --force \"src/**/*.ts\"",
    "e2e": "protractor",
    "e2e-live": "protractor --elementExplorer",
    "pretest": "npm run lint",
    "test": "karma start",
    "posttest": "remap-istanbul -i coverage/json/coverage-final.json -o coverage/html -t html",
    "test-watch": "karma start --no-single-run --auto-watch",
    "ci": "npm run e2e && npm run test",
    "docs": "typedoc --options typedoc.json src/app/app.component.ts",
    "start": "npm run server",
    "start:hmr": "npm run server -- --hot",
    "postinstall": "npm run webdriver-update"
  },
  "dependencies": {
    "@angular/animations": "4.2.2",
    "@angular/common": "4.2.2",
    "@angular/compiler": "4.2.2",
    "@angular/compiler-cli": "^4.4.0-RC.0",
    "@angular/core": "4.2.2",
    "@angular/forms": "4.2.2",
    "@angular/http": "4.2.2",
    "@angular/platform-browser": "4.2.2",
    "@angular/platform-browser-dynamic": "4.2.2",
    "@angular/platform-server": "^4.4.0-RC.0",
    "@angular/router": "4.2.2",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^2.0.3",
    "@ngrx/store": "^2.2.2",
    "@ngtools/webpack": "^1.6.2",
    "@ngx-translate/core": "^7.0.0",
    "@ngx-translate/http-loader": "0.0.3",
    "@types/lodash": "^4.14.65",
    "angular2-ui-switch": "git+https://github.com/daominhsangvn/angular2-ui-switch",
    "bootstrap": "3.3.7",
    "core-js": "^2.4.1",
    "expose-loader": "^0.7.3",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "karma-phantomjs-launcher": "^1.0.4",
    "ng-select": "^1.0.0-beta.6",
    "ng2-toastr": "^4.1.0",
    "ngx-bootstrap": "^1.7.1",
    "ngx-clipboard": "^8.0.4",
    "ngx-color-picker": "^4.0.3",
    "opensans-npm-webfont": "^0.0.2",
    "reflect-metadata": "^0.1.3",
    "rxjs": "^5.0.1",
    "script-loader": "^0.7.0",
    "zone.js": "^0.8.5"
  },
  "devDependencies": {
    "@angularclass/hmr": "^1.0.1",
    "@angularclass/hmr-loader": "^3.0.2",
    "@types/jasmine": "^2.5.41",
    "@types/node": "^6.0.38",
    "@types/selenium-webdriver": "2.53.39",
    "angular-router-loader": "^0.6.0",
    "angular2-template-loader": "^0.6.0",
    "autoprefixer": "^6.3.2",
    "awesome-typescript-loader": "^3.1.3",
    "codelyzer": "2.0.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.2",
    "html-loader": "^0.4.0",
    "html-webpack-plugin": "^2.28.0",
    "istanbul-instrumenter-loader": "^2.0.0",
    "jasmine-core": "^2.3.4",
    "jasmine-spec-reporter": "^3.2.0",
    "json-loader": "^0.5.4",
    "karma": "1.4.1",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-mocha-reporter": "^2.0.3",
    "karma-remap-istanbul": "0.2.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "2.0.2",
    "node-sass": "^4.5.0",
    "null-loader": "^0.1.1",
    "postcss-loader": "^1.1.0",
    "protractor": "^4.0.10",
    "raw-loader": "^0.5.1",
    "remap-istanbul": "^0.6.4",
    "resolve-url-loader": "^2.1.0",
    "rimraf": "^2.5.1",
    "sass-loader": "^6.0.6",
    "shelljs": "^0.7.0",
    "style-loader": "^0.18.2",
    "ts-helpers": "^1.1.1",
    "tslint": "^4.3.1",
    "tslint-loader": "^3.5.3",
    "typedoc": "^0.5.1",
    "typescript": "2.3.4",
    "url-loader": "^0.5.9",
    "webpack": "^3.3.0",
    "webpack-dev-server": "^2.5.0"
  }
}

tsconfig-aot.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
    "allowUnusedLabels": true,
    "typeRoots": [
      "./node_modules/@types/"
    ]
  },

  "files": [
    "src/app/app.module.ts",
    "src/main.ts"
  ],
  "exclude": [
    "node_modules/*",
    "aot",
    "app/main.ts"
  ],

  "angularCompilerOptions": {
    "genDir": "aot",
    "skipMetadataEmit" : true
  }
}

谢谢。

4

2 回答 2

0

在 Angular 应用程序中,您需要注入窗口,因为它在您的组件中是不可理解的。你可以将它注入你的构造函数中@Inject(WINDOW) private window: any

整个构造函数

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor(
    private router: Router,
    @Inject(WINDOW) private window: any
  ) {

  }

}
于 2017-09-08T18:34:32.923 回答
0

你可以在你的组件上方输入

declare var window: any;

您没有打字支持,但您可以将窗口对象用作普通窗口。

于 2017-09-08T18:36:38.180 回答