Astro — это относительно новый веб-фреймворк, ориентированный на то, чтобы помочь вам создавать более быстрые веб-сайты. У него также есть очень интересный пункт расширения, который заключается в том, что вы можете принести свой собственный фреймворк пользовательского интерфейса на выбор, включая React, Svelte, Vue и другие. Я даже переписал свой блог по Angular, чтобы использовать Astro в дни его альфа-релиза. Этот пост о том, как вернуть все на круги своя и использовать компоненты Angular в проекте Astro.
TL;DR
GitHub repo: https://github.com/brandonroberts/angular-astro-islands
Сайт-образец: https://angular-analog-astro-islands.netlify.app/
Изначально я хотел использовать компоненты Angular в Astro, но не смог из-за множества ограничений. С тех пор многое изменилось. Angular v14 включает автономные компоненты, которым больше не нужны NgModules. Astro продолжает развиваться, перешел от Snowpack к Vite для своего базового инструмента сборки и был выпущен в версии 1.0. Тем временем я работаю над Analog, мета-фреймворком для создания Angular-приложений и веб-сайтов на базе Vite.
Astro обеспечивает интеграцию, позволяющую дополнительным UI-фреймворкам визуализировать свои компоненты внутри проектов Astro. Собрав эти части вместе, мы теперь можем брать компоненты Angular, рендерить их в Astro и гидратировать их на клиенте.
Давайте погрузимся!
Создание нового проекта Astro
Сначала создайте новый проект Astro:
С помощью npm:
npm init astro
С помощью yarn:
yarn create astro
Следуйте подсказкам, выбрав для начала Just the basics. Далее необходимо добавить интеграцию @analogjs/astro-angular.
Добавление интеграции Angular
Интеграция @analogjs/astro-angular добавляет поддержку использования компонентов Angular в проекте Astro. Интеграция предоставляет Vite Plugin for Angular для компиляции и преобразования компонентов Angular, рендеринга компонентов Angular на сервере и гидратации компонентов по мере необходимости на клиенте.
Для установки интеграции используйте команду astro add:
astro add @analogjs/astro-angular
Эта команда:
- Устанавливает пакет
@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()]
});
Настройка конфигурации 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"]
}
Вы можете изменять настройки компилятора по мере необходимости.
Добавление компонента 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;
}
}
Это довольно простой компонент 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>
Это только рендеринг HTML из компонента Angular. Чтобы отрендерить компонент на клиенте, используйте одну из клиентских директив Astro:
<HelloComponent client:visible />
Более подробную информацию о клиентских директивах вы найдете в документации Astro.
Разработка веб-сайта
Чтобы просмотреть запущенный веб-сайт, запустите сервер dev с помощью Astro CLI:
yarn astro dev
Посетите веб-сайт по адресу http://localhost:3000, включая новый компонент Angular 😎.
Теперь ваша очередь внести некоторые изменения и поиграть 😀.
Для сборки для развертывания:
yarn astro build
Резюме
Эта интеграция открывает веб-разработчикам возможность создавать более быстрые веб-сайты, используя Astro с компонентами Angular. Проект Analog и интеграция Astro активно развиваются, поэтому если вы хотите внести свой вклад, присоединяйтесь к нам на GitHub и Discord.
Подробнее
- Посетите док-ты Analog
- Следите за проектом Analog в Twitter
- Присоединяйтесь ко мне на ViteConf, чтобы узнать больше о «Vite, мета-фреймворках и Angular».
А вы что думаете? Оставьте ❤️ на этот пост, а также оставьте комментарий и сообщите мне о своих мыслях.