问题描述
由于我的英文不好，可能难以理解，请谅解。
我们创建了一个新的 Angular 项目，并确认它在与 Safari 连接时可以正常工作。 但问题是我正在做的项目不起作用。
Chrome 的表现非常好，但如果你进入 safari，它只会出现在白屏上。
我目前使用的是 Angular-cli 9.0.7，而 Node 使用的是 10.16.0。
为解决这个问题已经进行了很多尝试，但都失败了 （更改 base_href、更改 polyfil、检查浏览器列表、更改构建选项等）。
如果进入safari，出现如下错误。
语法错误：意外的关键字“this”。期望一个';'在 return 语句之后。 [N] promiseReactionJob
ng serve 和 ng build 都遇到错误。 下面是我正在使用的 ng build 命令和 ng serve 命令。
ng build : 'ng build --output-path deploy/public --base-href / --configuration=alpha --aot=true --output-hashing=all'
ng serve : 'ng serve --configuration=local --aot=true --sourceMap=false' 或 'ng serve --configuration=local'
以下是我的项目的安装文件。
package.json
{
"name": "my-project","version": "0.0.0","scripts": {
"ng": "ng","start": "ng serve --configuration=local","startAlpha": "ng serve --configuration=alpha --aot=true --sourceMap=false","startProduction": "ng serve --configuration=production --aot=true --sourceMap=false","build": "ng build","test": "ng test","lint": "ng lint","e2e": "ng e2e"
},"private": true,"dependencies": {
"@angular/animations": "~9.0.1","@angular/cdk": "^12.0.5","@angular/common": "~9.0.1","@angular/compiler": "~9.0.1","@angular/core": "~9.0.1","@angular/forms": "~9.0.1","@angular/material": "^9.2.4","@angular/platform-browser": "~9.0.1","@angular/platform-browser-dynamic": "~9.0.1","@angular/router": "~9.0.1","@ngx-translate/core": "^13.0.0","@ngx-translate/http-loader": "^4.0.0","browserslist": "^4.16.6","hammerjs": "^2.0.8","ngx-cookie-service": "^12.0.0","ngx-smart-modal": "^7.4.1","normalize.css": "^8.0.1","rxjs": "~6.5.4","tslib": "^1.10.0","zone.js": "~0.10.2"
},"devDependencies": {
"@angular-devkit/build-angular": "~0.900.2","@angular/cli": "~9.0.2","@angular/compiler-cli": "~9.0.1","@angular/language-service": "~9.0.1","@types/jasmine": "~3.5.0","@types/jasminewd2": "~2.0.3","@types/node": "^12.11.1","codelyzer": "^5.1.2","protractor": "~5.4.3","ts-node": "~8.3.0","typescript": "~3.7.5"
}
}
浏览器列表
browserslist
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional @R_77_4045@ion regarding the format and rule options,please see:
# https://github.com/browserslist/browserslist#queries
# You can see what browsers were selected by your queries by running:
# npx browserslist
> 0.5%
last 2 versions
Firefox ESR
not dead
not IE <= 10
结果
and_chr 91
and_ff 89
and_qq 10.4
and_uc 12.12
android 91
baidu 7.12
chrome 92
chrome 91
chrome 90
edge 91
edge 90
firefox 90
firefox 89
firefox 78
ie 11
ios_saf 14.5-14.7
ios_saf 14.0-14.4
ios_saf 13.4-13.7
kaios 2.5
op_mini all
op_mob 62
opera 77
opera 76
safari 14.1
safari 14
samsung 14.0
samsung 13.0
polyfils.ts
import 'zone.js/dist/zone'; // Included with Angular CLI.
angular.json
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": {
"my-project": {
"projectType": "application","schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},"root": "","sourceRoot": "src","prefix": "app","architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser","options": {
"crossOrigin": "use-credentials","showCircularDependencies": false,"outputPath": "dist/my-project","index": "src/index.html","main": "src/main.ts","polyfills": "src/polyfills.ts","tsConfig": "tsconfig.app.json","aot": true,"assets": [
"src/favicon.ico","src/assets","src/assets/i18n/"
],"styles": [
"src/styles.scss"
],"scripts": []
},"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"
}
],"crossOrigin": "use-credentials","optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true,"budgets": [
{
"type": "initial","maximumWarning": "4mb","maximumError": "5mb"
},{
"type": "anyComponentStyle","maximumWarning": "6kb","maximumError": "20kb"
}
]
},"alpha": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts","with": "src/environments/environment.alpha.ts"
}
],"local": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts","with": "src/environments/environment.local.ts"
}
],"optimization": false,"outputHashing": "none","extractLicenses": false,"statsJson": false,"progress": false,"vendorChunk": true,"buildOptimizer": false,"maximumError": "20kb"
}
]
}
}
},"serve": {
"builder": "@angular-devkit/build-angular:dev-server","options": {
"browserTarget": "my-project:build"
},"configurations": {
"production": {
"browserTarget": "my-project:build:production"
},"alpha": {
"browserTarget": "my-project:build:alpha"
},"local": {
"browserTarget": "my-project:build:local"
}
}
},"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n","options": {
"browserTarget": "my-project:build"
}
},"e2e": {
"builder": "@angular-devkit/build-angular:protractor","options": {
"protractorConfig": "e2e/protractor.conf.js","devServerTarget": "my-project:serve"
},"configurations": {
"production": {
"devServerTarget": "my-project:serve:production"
}
}
}
}
}
},"defaultProject": "my-project","cli": {
"analytics": false
}
}
tsconfig.app.json
{
"extends": "./tsconfig.json","compilerOptions": {
"outDir": "./out-tsc/app","types": []
},"files": [
"src/main.ts","src/polyfills.ts"
],"include": [
"src/**/*.d.ts"
]
}
tsconfig.json
{
"compileOnSave": false,"compilerOptions": {
"baseUrl": "./","outDir": "./dist/out-tsc","sourceMap": true,"declaration": false,"downlevelIteration": true,"experimentalDecorators": true,"module": "esnext","moduleResolution": "node","importHelpers": true,"target": "es2015","typeRoots": [
"node_modules/@types"
],"lib": [
"es2018","dom"
]
},"angularCompilerOptions": {
"fullTemplateTypeCheck": true,"strictInjectionParameters": true
}
}
请救救我。 我一直在寻找那个错误几个小时。 但我没有合适的解决方案。
如果你认识任何人，请帮助我。
（更新） 我成功地将 'web-animations-js' 添加到 polyfils，但它没有用。 T.T
解决方法
我们找到了原因。 一一分析Git Commit，我们发现lookbehind regex不支持safari和Firefox。
如果其他人有上述错误，请检查您是否使用了lookbehind regex。