Ionic Angular SSR报错:window未定义及constructor重定义问题咨询
Ionic + Angular SSR 适配window对象时的错误问题求助
我在Ionic项目中使用Angular SSR时,先遇到了**"window is not defined"错误。尝试通过domino库设置global['window'] = win模拟window环境后,又触发了"TypeError: Cannot redefine property: constructor at Function.defineProperty"**错误。
项目中依赖的第三方库需要window、document和localStorage对象,其中document和localStorage已经通过domino完成适配,但window适配时出现了上述构造器重定义的错误。
package.json 依赖配置
"dependencies": { "@angular/animations": "^15.1.2", "@angular/common": "^15.0.0", "@angular/core": "^15.0.0", "@angular/forms": "^15.0.0", "@angular/platform-browser": "^15.0.0", "@angular/platform-browser-dynamic": "^15.0.0", "@angular/platform-server": "^15.0.0", "@angular/router": "^15.0.0", "@capacitor/app": "4.1.1", "@capacitor/core": "4.6.2", "@capacitor/haptics": "4.1.0", "@capacitor/keyboard": "4.1.1", "@capacitor/status-bar": "4.1.1", "@ionic/angular": "^6.5.1", "@ionic/angular-server": "^6.5.1", "@ionic/core": "^6.0.0", "@nguniversal/express-engine": "^15.0.0", "domino": "^2.0.0", "express": "^4.15.2", "ionicons": "^6.0.3", "localstorage-polyfill": "^1.0.1", "mock-browser": "^0.92.14", "rxjs": "~7.5.0", "ssr-window": "^4.0.2", "tslib": "^2.3.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "^15.0.0", "@angular-eslint/builder": "^14.0.0", "@angular-eslint/eslint-plugin": "^14.0.0", "@angular-eslint/eslint-plugin-template": "^14.0.0", "@angular-eslint/template-parser": "^14.0.0", "@angular/cli": "^15.0.0", "@angular/compiler": "^15.0.0", "@angular/compiler-cli": "^15.0.0", "@angular/language-service": "^15.0.0", "@capacitor/cli": "4.6.2", "@ionic/angular-toolkit": "^6.0.0", "@nguniversal/builders": "^15.1.0", "@types/express": "^4.17.0", "@types/jasmine": "~4.0.0", "@types/node": "^12.11.1", "@typescript-eslint/eslint-plugin": "5.3.0", "@typescript-eslint/parser": "5.3.0", "eslint": "^7.6.0", "eslint-plugin-import": "2.22.1", "eslint-plugin-jsdoc": "30.7.6", "eslint-plugin-prefer-arrow": "1.2.2", "jasmine-core": "~4.3.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.2.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.0.0", "ts-node": "~8.3.0", "typescript": "~4.8.4" }
angular.json 配置
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "app": { "projectType": "application", "schematics": {}, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/app/browser", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [ { "glob": "**/*", "input": "src/assets", "output": "assets" }, { "glob": "**/*.svg", "input": "node_modules/ionicons/dist/ionicons/svg", "output": "./svg" } ], "styles": ["src/theme/variables.scss", "src/global.scss"], "scripts": [] }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" }, { "type": "anyComponentStyle", "maximumWarning": "2kb", "maximumError": "4kb" } ], "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "outputHashing": "all" }, "development": { "buildOptimizer": false, "optimization": false, "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true }, "ci": { "progress": false } }, "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { "browserTarget": "app:build:production" }, "development": { "browserTarget": "app:build:development" }, "ci": { "progress": false } }, "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "app:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", "inlineStyleLanguage": "scss", "assets": [ { "glob": "**/*", "input": "src/assets", "output": "assets" }, { "glob": "**/*.svg", "input": "node_modules/ionicons/dist/ionicons/svg", "output": "./svg" } ], "styles": ["src/theme/variables.scss", "src/global.scss"], "scripts": [] }, "configurations": { "ci": { "progress": false, "watch": false } } }, "lint": { "builder": "@angular-eslint/builder:lint", "options": { "lintFilePatterns": [ "src/**/*.ts", "src/**/*.html" ] } }, "server": { "builder": "@angular-devkit/build-angular:server", "options": { "outputPath": "dist/app/server", "main": "server.ts", "tsConfig": "tsconfig.server.json", "inlineStyleLanguage": "scss" }, "configurations": { "production": { "outputHashing": "media", "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ] }, "development": { "optimization": false, "sourceMap": true, "extractLicenses": false, "vendorChunk": true }, "ci": {} }, "defaultConfiguration": "production" }, "serve-ssr": { "builder": "@nguniversal/builders:ssr-dev-server", "configurations": { "development": { "browserTarget": "app:build:development", "serverTarget": "app:server:development" }, "production": { "browserTarget": "app:build:production", "serverTarget": "app:server:production" } }, "defaultConfiguration": "development" }, "prerender": { "builder": "@nguniversal/builders:prerender", "options": { "routes": [ "/" ] }, "configurations": { "production": { "browserTarget": "app:build:production", "serverTarget": "app:server:production" }, "development": { "browserTarget": "app:build:development", "serverTarget": "app:server:development" } }, "defaultConfiguration": "production" } } } }, "cli": { "schematicCollections": [ "@ionic/angular-toolkit" ] }, "schematics": { "@ionic/angular-toolkit:component": { "styleext": "scss" }, "@ionic/angular-toolkit:page": { "styleext": "scss" } } }
内容的提问来源于stack exchange,提问作者Ricardo Duque
相关产品推荐
相关产品推荐

