我刚刚更新了我的 Ionic 应用程序以使用 Angular 17 和最新版本的 Ionic Angular。我对使用任何 Ionic Standalone 组件或功能不感兴趣，因为我的应用程序非常大，并且需要时间才能完成该更新。但是，我确实想确保我正在运行最新的依赖项。
当我更新到 Angular 17 后启动应用程序时，似乎没有加载任何离子组件样式。组件本身会加载和渲染，但样式不会加载和渲染。
这就是我的 package.json 文件的样子。
"dependencies": {
"@angular/animations": "^17.1.0",
"@angular/common": "^17.1.0",
"@angular/core": "^17.1.0",
"@angular/forms": "^17.1.0",
"@angular/platform-browser": "^17.1.0",
"@angular/platform-browser-dynamic": "^17.1.0",
"@angular/router": "^17.1.0",
"@capacitor-community/apple-sign-in": "5.0.0",
"@capacitor-community/facebook-login": "^5.0.0",
"@capacitor-community/firebase-analytics": "^5.0.1",
"@capacitor/android": "^5.6.0",
"@capacitor/app": "^5.0.6",
"@capacitor/browser": "^5.0.6",
"@capacitor/camera": "^5.0.8",
"@capacitor/core": "^5.6.0",
"@capacitor/device": "^5.0.6",
"@capacitor/haptics": "^5.0.6",
"@capacitor/ios": "^5.6.0",
"@capacitor/keyboard": "^5.0.6",
"@capacitor/local-notifications": "^5.0.6",
"@capacitor/preferences": "^5.0.6",
"@capacitor/splash-screen": "^5.0.6",
"@capacitor/status-bar": "5.0.6",
"@capgo/camera-preview": "^6.0.6",
"@ionic/angular": "^7.6.2",
"@maskito/angular": "^1.7.0",
"@maskito/core": "^1.7.0",
"@maskito/kit": "^1.7.0",
"@types/jquery": "^3.5.16",
"badwords-list": "^1.0.0",
"capacitor-rate-app": "4.0.3",
"cordova-plugin-purchase": "^13.5.0",
"kc-capacitor-image-utils": "file:../kc-capacitor-image-utils",
"ngx-ui-tour-ionic": "^3.0.0",
"onesignal-cordova-plugin": "^3.3.0",
"rxjs": "^7.5.0",
"smoothscroll-polyfill": "^0.4.4",
"swiper": "^8.4.5",
"tslib": "^2.3.0",
"zone.js": "^0.14.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.0.0",
"@angular-eslint/builder": "^17.0.0",
"@angular-eslint/eslint-plugin": "^17.0.0",
"@angular-eslint/eslint-plugin-template": "^17.0.0",
"@angular-eslint/schematics": "^17.0.0",
"@angular-eslint/template-parser": "^17.0.0",
"@angular/cli": "^17.0.0",
"@angular/compiler-cli": "^17.0.2",
"@angular/language-service": "^17.0.2",
"@capacitor/cli": "5.6.0",
"@ionic/angular-toolkit": "^9.0.0",
"@types/jasmine": "~5.1.0",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"eslint": "^7.26.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~5.1.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"ts-node": "^8.3.0",
"typescript": "~5.2.2"
},
这就是我的 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": "www",
"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": "5kb",
"maximumError": "6kb"
}
],
"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": {
"buildTarget": "app:build:production"
},
"development": {
"buildTarget": "app:build:development"
},
"ci": {
"progress": false
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "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"
]
}
}
}
}
},
"cli": {
"schematicCollections": [
"@ionic/angular-toolkit"
]
},
"schematics": {
"@ionic/angular-toolkit:component": {
"styleext": "scss"
},
"@ionic/angular-toolkit:page": {
"styleext": "scss"
}
}
}
请注意，如果我运行 Angular 16，该项目可以完美运行。这些问题仅在我更新到 Angular 17 时才会出现。
此外，如果我运行
ng server --configurations "production"对于 IonIcons，现在需要将每个图标导入 ts 文件中并作为参数传递给 addIcons 方法。
import { chevronBack } from 'ionicons/icons'
import { addIcons } from 'ionicons'
constructor() {
addIcons({ chevronBack })
}
这种新方式有点糟糕，因为如果你有超过 10 个图标，你需要导入所有图标。所以我的处理方式是：
import { chevronBack, cameraOutline, imageOutline, closeOutline } from 'ionicons/icons'
import { addIcons } from 'ionicons'
const IonIcons = {
chevronBack,
cameraOutline,
imageOutline,
closeOutline,
...,
...,
}
constructor() {
addIcons(IonIcons)
}
同样的情况发生在我身上，只需确保两件事。
首先在
style中的
build配置参数内的样式数组中添加
angular.json 捆绑包
node_modules/@ionic/angular/css/ionic.bundle.css如果不是，这应该可以工作，然后尝试将
@ionic/angular@ionic/angular