Logo

菜单

发布于 2026-01-06 0 阅读
0

将 Angular 组件引入 Astro Islands 🏝

将 Angular 组件引入 Astro Islands 🏝

Astro是一个相对较新的 Web 框架，专注于帮助你构建更快的网站。它还有一个非常有趣的扩展点，那就是你可以引入自己选择的 UI 框架，包括 React、Svelte、Vue 等等。我甚至在 Astro 的 alpha 版本发布初期就重写了我的 Angular 博客。这篇文章将带你完整地体验 Astro 项目，并学习如何在 Astro 项目中使用 Angular 组件。

简而言之，
GitHub 代码库：https://github.com/brandonroberts/angular-astro-islands
示例网站：https://angular-analog-astro-islands.netlify.app/
合作机会：https://analogjs.org/docs/sponsoring

我最初想在 Astro 中使用 Angular 组件，但由于诸多限制而无法实现。此后情况发生了很大变化。Angular v14 包含了不再需要 NgModules 的独立组件。Astro 也一直在持续开发，其底层构建工具从 Snowpack 切换到了 Vite，并发布了 1.0 版本。与此同时，我一直在开发Analog，这是一个用于构建基于 Vite 的 Angular 应用和网站的元框架。

Astro 提供集成功能，允许其他 UI 框架在 Astro 项目中渲染其组件。有了这些功能，我们现在可以将 Angular 组件导入 Astro 进行渲染，并在客户端进行数据填充。

让我们开始吧！

创建一个新的天文项目

首先，创建一个新的 Astro 项目：

使用 npm：

npm init astro
Enter fullscreen mode Exit fullscreen mode

用毛线：

yarn create astro
Enter fullscreen mode Exit fullscreen mode

按照提示操作，并选择“仅基本功能”作为初始设置。接下来，添加@analogjs/astro-angular集成。

添加 Angular 集成

该@analogjs/astro-angular集成为 Astro 项目添加了对 Angular 组件的支持。它提供了 Vite 插件，用于编译和转换 Angular 组件，在服务器端渲染 Angular 组件，并在客户端根据需要对组件进行加载。

使用以下astro add命令安装集成：

astro add @analogjs/astro-angular
Enter fullscreen mode Exit fullscreen mode

这条命令：

  • 安装@analogjs/astro-angular软件包。
  • 将集成添加@analogjs/astro-angular到astro.config.mjs文件中。
  • 安装必要的 Angular 依赖项，以便在服务器上渲染 Angular 组件，并在客户端上对其进行水合，以及常见的 Angular 依赖项，例如@angular/common和@angular/forms。

安装完成后，界面astro.config.mjs如下所示：

import { defineConfig } from 'astro/config';

import analogjsAngular from "@analogjs/astro-angular";

// https://astro.build/config
export default defineConfig({
  integrations: [analogjsAngular()]
});
Enter fullscreen mode Exit fullscreen mode

设置 TypeScript 配置

Angular 集成需要tsconfig.app.json在项目根目录下进行编译。

tsconfig.app.json在项目根目录下创建一个文件。

{
  "extends": "./tsconfig.json",
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "noEmit": false,
    "target": "es2020",
    "module": "es2020",
    "lib": ["es2020", "dom"]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  },
  "files": [],
  "include": ["src/**/*.ts"]
}
Enter fullscreen mode Exit fullscreen mode

您可以根据需要调整编译器设置。

添加 Angular 组件

Angular 集成目前仅支持渲染独立组件。不过，排除这一限制后，使用独立功能定义 Angular 组件就相对简单了。

在components文件夹中定义一个组件。下面的示例使用了src/components/hello.component.ts.

import { NgIf } from '@angular/common';
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  standalone: true,
  imports: [NgIf],
  template: `
    <p>Hello from Angular!!</p>

    <button (click)="toggle()">Toggle</button>

    <p *ngIf="show">Toggled</p>
  `,
})
export class HelloComponent {
  show = true;

  toggle() {
    this.show = !this.show;
  }
}
Enter fullscreen mode Exit fullscreen mode

这是一个非常简单的 Angular 组件，用于切换一些文本以显示变更检测功能正常。

接下来，将 Angular 组件添加到 Astro 组件模板中。在生成的 Astro 项目中，将 HelloComponent 添加到src/pages/index.astro页面中。

---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
import { HelloComponent } from '../components/hello.component.ts';
---

<Layout title="Welcome to Astro.">
    <main>
        <h1>Welcome to <span class="text-gradient">Astro</span></h1>

        <!-- Angular Component -->
        <HelloComponent />

        <!-- HTML 😉 -->

        </main>
</Layout>
Enter fullscreen mode Exit fullscreen mode

这只会渲染 Angular 组件中的 HTML。要在客户端加载组件，请使用 Astro 的客户端指令之一：

<HelloComponent client:visible />
Enter fullscreen mode Exit fullscreen mode

有关客户端指令的更多信息，请参阅Astro 文档。

网站开发

要查看正在运行的网站，请使用 Astro CLI 启动开发服务器：

yarn astro dev
Enter fullscreen mode Exit fullscreen mode

访问网站http://localhost:3000，其中包括新的 Angular 组件 😎。

天文+角度

现在轮到你来做一些调整和尝试了😀。

构建部署版本：

yarn astro build
Enter fullscreen mode Exit fullscreen mode

概括

此次集成让 Web 开发人员能够使用 Astro 和 Angular 组件构建速度更快的网站。Analog 项目和 Astro 集成正在积极开发中，如果您想贡献力量，欢迎加入我们的GitHub和Discord社区。

了解更多

你觉得怎么样？请在帖子下点个赞❤️，并留言告诉我你的想法。

文章来源：https://dev.to/brandontroberts/bringing-angular-components-to-astro-islands-52jp
如何在 Power Automat...
函数式编程入门