0
Webpack 및 Yarn과 함께 패키지 관리자로 각도 4를 사용하고 있습니다. JIT를 사용하여 프로젝트를 시작했고 ngtools/webpack을 사용하여 AOT로 이동하려고했습니다. 사용하여 내 프로젝트를 빌드 할 때 는 : 오류가 내 프로젝트에서 발생하지 않도록하기 위해 나는 내 프로젝트에서 모든 창 참조를 제거한AOT를 사용하여 webpack 3을 컴파일 할 때 창 정의
ERROR in window is not defined
:
yarn build
나는 오류를 얻을 수 . 내 결론은 내가로드하는 외부 모듈에서 발생한다는 것입니다. 어떤 오류 메시지가 깨진 것 같기 때문에 말할 수 없습니다. 다른 방법으로 모든 종류의 질문을 포함하여 시도해 보았습니다. 질문 : Expose jQuery to real Window object with Webpack, 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 - 실제 윈도우 객체를 미리 알 필요는 없습니다). 각도 4와 웹팩이있는 AOT가 아직 성숙하지 않았습니까? 웹에 대한 정보가별로 없기 때문입니다.
이 주제와 관련이있는 것 같습니다. window is not defined using Angular4 + AoT + Webpack2 그러나 답변을 얻지 못했습니다.
package.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
}
}
감사합니다.
하지만 분명히 사용하는 구성 요소에 없습니다 ... 내 생각 엔 윈도우를 처리하는 외부 라이브러리를 사용하고 있지만 정의되지 않았습니다. – UserED