在 Angular 17 独立应用程序中看不到离子样式

Question

我有一个 Angular 17 独立应用程序，我添加了 ionic 来使用某些组件，例如 IonSearchbar（这在我的情况下是必需的）。离子成分工作正常，但没有花柱。

我的 angular.json 添加了自动样式 qehen 我添加了离子：

"styles": [
  "src/styles.scss",
  {
    "input": "node_modules/@ionic/angular/css/core.css"
  },
  {
    "input": "node_modules/@ionic/angular/css/normalize.css"
  },
  {
    "input": "node_modules/@ionic/angular/css/structure.css"
  },
  {
    "input": "node_modules/@ionic/angular/css/typography.css"
  },
  {
    "input": "node_modules/@ionic/angular/css/display.css"
  },
  {
    "input": "node_modules/@ionic/angular/css/padding.css"
  },
  {
    "input": "node_modules/@ionic/angular/css/float-elements.css"
  },
  {
    "input": "node_modules/@ionic/angular/css/text-alignment.css"
  },
  {
    "input": "node_modules/@ionic/angular/css/text-transformation.css"
  },
  {
    "input": "node_modules/@ionic/angular/css/flex-utils.css"
  },
  {
    "input": "src/theme/variables.css"
  }
],

我尝试将其添加到index.html，但没有结果：

<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="node_modules/@ionic/angular/css/ionic.bundle.css" rel="stylesheet">

<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

这是我的独立组件示例：

import { CUSTOM_ELEMENTS_SCHEMA, Component, OnInit } from '@angular/core';
import { RouterModule } from '@angular/router';
import { IonSearchbar } from '@ionic/angular/standalone';
import { TranslateModule } from '@ngx-translate/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  standalone: true,
  imports: [RouterModule, TranslateModule, IonSearchbar],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class HeaderComponent implements OnInit {
  constructor() {}

  ngOnInit() {}

  onSearchChange(event: any) {
    console.log(event.detail.value);
  }
}

模板是这样的：

<ion-searchbar (ionChange)="onSearchChange($event)"></ion-searchbar>

所以搜索正常，但我看不到样式有效，知道吗？

Answer 1

好吧，我终于明白了。问题在于index.html 中的导入必须是这样的：

<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
  <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />