Créer un site minimal en angulaire avec Oracle Content Management sans tête

Introduction

Angular est une plate-forme permettant de créer des applications Web mobiles et de bureau.

Pour utiliser notre contenu Oracle Content Management dans une application Angular, nous pouvons utiliser l'échantillon minimal Angular disponible en tant que référentiel open source sur GitHub.

Dans ce tutoriel, nous allons créer un site minimal simple en Angular, grâce à Oracle Content Management en tant que CMS sans tête et à son kit de développement logiciel (SDK) pour la diffusion de contenu dans JavaScript. Cet échantillon Angular est disponible sur GitHub.

Le didacticiel comporte trois étapes :

Préparer Oracle Content Management
Créer le site minimal à Angular
Préparer votre application pour le déploiement

Prérequis

Avant de poursuivre ce tutoriel, nous vous recommandons de lire les informations suivantes en premier :

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

abonnement à Oracle Content Management
un compte Oracle Content Management doté du rôle Administrateur de contenu
un ordinateur Windows ou Mac avec Node version 10 ou supérieure

Ce que nous construisons

Avec Angular minimal, vous pouvez facilement extraire des images et d'autres contenus de votre référentiel Oracle Content Management.

Pour regarder ce que nous construisons, voici l'état de fin de notre tutoriel, un site Angular minimal de base qui utilise le contenu d'Oracle Content Management :

https://headless.mycontentdemo.com/samples/oce-angular-minimal-sample

Voici à quoi ressemblera la page d'accueil à la fin de ce tutoriel :

Cette image présente une page de destination pour un site Angular minimal.

Voici à quoi ressemblera la page Nous contacter à la fin de ce tutoriel :

Cette image présente la page Nous contacter pour un site Angular minimal.

Pour continuer, vous devez disposer d'un abonnement actif à Oracle Content Management et être connecté avec le rôle Administrateur de contenu.

Tâche 1 : Préparer Oracle Content Management

Si vous ne disposez pas encore d'une instance Oracle Content Management, reportez-vous à Démarrage rapide pour savoir comment vous inscrire à Oracle Cloud, provisionner une instance Oracle Content Management et configurer Oracle Content Management en tant que CMS sans tête.

Pour ce tutoriel, vous devez créer un modèle de contenu. Un pack de ressources téléchargeables est disponible pour remplir le référentiel vide avec les types de contenu et le contenu associé.

Pour préparer Oracle Content Management :

Créez un référentiel de canaux et de ressources.
Créez un modèle de contenu à l'aide de l'une des deux méthodes suivantes :
- Méthode 1 : Importer le pack de ressources d'échantillons Oracle Content Management
- Méthode 2 : Créer votre propre modèle de contenu

Créer un référentiel de canaux et de ressources

Vous devez d'abord créer un canal et un référentiel de ressources dans Oracle Content Management afin de pouvoir publier du contenu.

Pour créer un canal et un référentiel de ressources dans Oracle Content Management, procédez comme suit :

Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.
Choisissez Contenu dans le menu de navigation de gauche, puis choisissez Canaux de publication dans la liste de sélection de l'en-tête de page.
Dans l'angle supérieur droit, cliquez sur Créer pour créer un canal. Nommez le canal 'OCEMinimalChannel' dans le cadre de ce tutoriel, puis conservez l'accès public. Cliquez sur Enregistrer pour créer le canal.
Choisissez Contenu dans le menu de navigation de gauche, puis choisissez Référentiels dans la liste de sélection de l'en-tête de page.
Dans l'angle supérieur droit, cliquez sur Créer pour créer un référentiel de ressources. Nommez le référentiel de ressources 'OCEMinimalRepository' dans le cadre de ce tutoriel.
Dans le champ Canaux de publication, sélectionnez le canal OCEMinimalChannel pour indiquer à Oracle Content Management que le contenu du référentiel OCEMinimalRepository peut être publié sur le canal OCEMinimalChannel. Cliquez sur Enregistrer une fois que vous avez terminé.

Créer un modèle de contenu

L'étape suivante consiste à créer un modèle de contenu. Vous pouvez utiliser l'une des deux méthodes suivantes :

Méthode 1 : Importer le pack de ressources d'échantillons Oracle Content Management
Méthode 2 : Créer votre propre modèle de contenu

Importer le pack de ressources d'échantillons Oracle Content Management

Vous pouvez télécharger un pack de ressources Oracle Content Management préconfiguré contenant tous les types de contenu et toutes les ressources requis pour ce tutoriel. Si vous préférez, vous pouvez également créer votre propre modèle de contenu au lieu de télécharger le pack de ressources échantillon.

Vous pouvez télécharger une copie du contenu que nous utilisons dans ce tutoriel à partir du pack de ressources d'échantillons Oracle Content Management. Vous pourrez ainsi expérimenter les types de contenu et modifier le contenu. Si vous voulez importer le pack de ressources d'échantillons Oracle Content Management, vous pouvez télécharger l'archive de pack de ressources, OCESamplesAssetPack.zip, et l'extraire dans le répertoire de votre choix :

Téléchargez le pack de ressources d'échantillons Oracle Content Management (OCESamplesAssetPack.zip) à partir de la page Téléchargements d'Oracle Content Management. Extrayez le fichier ZIP téléchargé vers un emplacement sur votre ordinateur. Après l'extraction, cet emplacement inclut un fichier nommé OCEMinimal_data.zip.
Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.
Choisissez Contenu dans le menu de navigation de gauche, puis choisissez Référentiels dans la liste de sélection de l'en-tête de page. Sélectionnez maintenant OCEMinimalRepository et cliquez sur le bouton Importer le contenu dans la barre d'actions supérieure.
Téléchargez OCEMinimal_data.zip à partir de votre ordinateur local vers le dossier Documents.
Une fois téléchargé, sélectionnez OCEMinimal_data.zip et cliquez sur OK pour importer le contenu dans votre référentiel de ressources.
Une fois le contenu importé, accédez à la page Ressources et ouvrez le référentiel OCEMinimalRepository. Vous verrez que toutes les images et tous les éléments de contenu associés ont été ajoutés au référentiel de ressources.
Cliquez sur Tout sélectionner en haut à gauche, puis sur Publier pour ajouter toutes les ressources importées au canal de publication que vous avez créé précédemment, OCEGettingStartedChannel.
Avant la publication, vous devez valider toutes les ressources. Ajoutez d'abord OCEMinimalChannel en tant que canal sélectionné, puis cliquez sur le bouton Valider.
Une fois les ressources validées, vous pouvez publier toutes les ressources sur le canal sélectionné en cliquant sur le bouton Publier dans l'angle supérieur droit.

Une fois cette opération terminée, vous pouvez voir sur la page Immobilisations que toutes les immobilisations ont été publiées. (Vous pouvez utiliser l'icône située au-dessus du nom de la ressource.)

Cette image présente la page Equipements, avec tous les équipements publiés.

Après avoir importé le pack de ressources d'échantillons Oracle Content Management, vous pouvez commencer à créer le site minimal dans Réagir.

Créer votre propre modèle de contenu

Au lieu d'importer le pack de ressources d'échantillons Oracle Content Management, vous pouvez également créer votre propre modèle de contenu.

Pour ce tutoriel, nous utilisons un type de contenu appelé 'MinimalMain' comme type de contenu principal pour cet exemple. Ce type de contenu se compose de logos d'en-tête et de pied de page, ainsi que d'une liste de pages à inclure dans la navigation.

Cette image présente la page d'accueil de l'exemple Minimal.

Pour créer des types de contenu pour le modèle de contenu :

Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.
Choisissez Contenu dans le menu de navigation de gauche, puis choisissez Types d'immobilisation dans la liste de sélection de l'en-tête de page.
Cliquez sur Créer dans l'angle supérieur droit.
Choisissez de créer un type de contenu (et non un type de ressource numérique). Répétez cette opération pour tous les types de contenu requis.

Cette image présente la boîte de dialogue Créer un type de ressource dans l'interface Web d'Oracle Content Management.

Nous allons créer trois types de contenu, chacun comportant son propre ensemble de champs :

MinimalMain
MinimalPage
MinimalSection

Le premier type de contenu, MinimalMain, doit comporter les champs suivants :

Nom d'affichage	Type de champ	Nom de l'ordinateur
headerLogo	Champ de média à valeur unique	headerLogo
footerLogo	Champ de média à valeur unique	footerLogo
pages	Champ de référence à valeurs multiples	pages

Voici à quoi votre définition de type de contenu MinimalMain doit ressembler :

Cette image présente la définition du type de contenu 'MinimalMain'. Elle inclut les champs de données suivants : headerLogo, footerLogo, pages.

Le deuxième type de contenu, MinimalPage, doit contenir le champ suivant :

Nom d'affichage	Type de champ	Obligatoire	Nom de l'ordinateur
sections	Champ de référence à valeurs multiples		sections

Voici à quoi votre type de contenu MinimalPage doit ressembler :

Cette image présente la définition du type de contenu 'MinimalPage'. Elle comprend les sections suivantes :

Le troisième et le dernier type de contenu, MinimalSection, doivent comporter les champs suivants :

Nom d'affichage	Type de champ	Obligatoire	Nom de l'ordinateur
type	Champ de texte à valeur unique	X	type
en-tête	Champ de texte à valeur unique		en-tête
body	Champ de texte long à valeur unique		body
image	Champ d'image à valeur unique		image
actions	Champ de contenu intégré à valeur unique		actions

Voici à quoi votre type de contenu MinimalSection doit ressembler :

Cette image présente la définition du type de contenu 'MinimalSection'. Elle inclut les champs de données suivants : type, en-tête, corps, image, actions.

Une fois les types de contenu créés, vous pouvez les ajouter au référentiel créé précédemment, OCEMinimalRepository :

Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.
Accédez à OCEMinimalRepository.
Modifiez le référentiel et, sous Types de ressource, indiquez les trois nouveaux types de contenu. Cliquez sur le bouton Save (Enregistrer) pour enregistrer vos modifications.

Cette image présente la page Modifier le référentiel dans Oracle Content Management, avec les trois nouveaux types de contenu associés au référentiel OCEMinimalRepository.

Après avoir ajouté les types de contenu au référentiel, vous pouvez ouvrir le référentiel OCEMinimalRepository sur la page Ressources et commencer à créer vos éléments de contenu pour tous les types de contenu.

Cette image présente les éléments de contenu sur la page Ressources de l'interface Web d'Oracle Content Management, avec des options sur la gauche pour les collections, les canaux, les langues, les types, la sélection des éléments de contenu et le statut.

Tâche 2 : Création du site minimal en Angular

Pour utiliser notre contenu Oracle Content Management dans une application Angular rendue côté serveur, nous pouvons utiliser l'exemple de site Angular minimal, disponible en tant que référentiel open source sur GitHub.

Remarque : N'oubliez pas que l'utilisation de l'exemple Angular est facultative et que nous l'utilisons dans ce tutoriel pour vous lancer rapidement. Vous pouvez également créer votre propre application Angular.

Pour construire le site minimal à Angular :

Cloner le référentiel échantillon et installer les dépendances
Configurer l'application Angular
Utiliser le kit SDK Oracle Content Management Content
Utiliser le kit SDK Content pour extraire du contenu

Cloner le référentiel échantillon et installer les dépendances

L'exemple de site Angular minimal est disponible en tant que référentiel open source sur GitHub.

Vous devez d'abord cloner l'exemple de GitHub vers votre ordinateur local et remplacer votre répertoire par la racine du référentiel :

git clone https://github.com/oracle/oce-angular-minimal-sample.git
    cd oce-angular-minimal-sample

Maintenant que vous disposez de votre base de code, vous devez télécharger les dépendances pour l'application. Exécutez la commande suivante à partir du répertoire racine :

npm install

Configurer l'application Angular

Dans cet exemple de site Angular minimal, vous devez configurer quelques informations afin que votre kit SDK Oracle Content Management Content (et toutes autres demandes) puisse cibler l'URL d'instance et la version d'API correctes avec le jeton de canal correct. Ces valeurs sont utilisées dans src/scripts/server-config-utils.js pour instancier un nouveau client de distribution.

Cette application utilise un fichier .env lu par Webpack lorsqu'elle regroupe les applications client et serveur. En utilisant webpack.DefinePlugin, toutes les valeurs lues à partir du fichier .env peuvent être mises à disposition partout dans l'application.

Ouvrez le fichier .env dans un éditeur de texte. Vous verrez ce qui suit :

# The connection details for the Oracle Content Management server to be used for this application
    SERVER_URL=https://samples.mycontentdemo.com
    API_VERSION=v1.1
    CHANNEL_TOKEN=ba0efff9c021422cb134c2fd5daf6015

Modifiez chaque paire clé-valeur afin qu'elle reflète l'URL de l'instance, la version d'API à cibler et le jeton de canal associé au canal de publication. Le canal de ce tutoriel est OCEMinimalChannel.

Utiliser le kit SDK Oracle Content Management Content

Oracle Content Management offre un SDK qui aide à repérer et à utiliser du contenu dans vos applications. Le kit SDK est publié en tant que module NPM et le projet est hébergé sur GitHub.

Pour en savoir plus sur le SDK, cliquez ici.

Le kit SDK a été enregistré en tant que dépendance d'exécution de ce projet dans le fichier package.json.

Utiliser le kit SDK Content pour extraire du contenu

Nous pouvons désormais utiliser Content SDK pour extraire du contenu afin de le rendre dans notre application Angular.

Le kit SDK Content utilise un objet DeliveryClient pour indiquer l'adresse. Vous pouvez effectuer toutes les demandes à l'aide de cet objet client.

Le dossier src/scripts contient le code permettant d'obtenir des données à partir d'Oracle Content Management à l'aide de Content SDK.

Le fichier src/scripts/server-config-utils.js importe le SDK Content, puis crée un client de distribution à l'aide de la configuration spécifiée dans .env.

La commande suivante importe le kit SDK :

import { createDeliveryClient, createPreviewClient } from '@oracle/content-management-sdk';

La commande suivante crée le client de distribution :

return createDeliveryClient(serverconfig);

Le fichier src/scripts/services.js contient des fonctions permettant d'obtenir les données de cette application minimale React.

La méthode fetchOceMinimalMain() extrait le type de contenu MinimalMain avec un slug de minimalmain.

export async function fetchOceMinimalMain() {
      const data = await getItem('minimalmain', 'fields.headerlogo,fields.footerlogo,fields.pages');
      if (!data.hasError) {
        const { fields } = data;
        const { headerlogo, footerlogo } = fields;
        // Extract the sourceset for the headerImage and footerImage and put it back in the data
        data.headerRenditionURLs = getSourceSet(headerlogo);
        data.footerRenditionURLs = getSourceSet(footerlogo);
      }
      return data;
    }

Pour le rendu des images, services.js fournit une méthode d'aide permettant d'extraire l'ensemble de sources d'une ressource construite à partir des rendus de la ressource.

function getSourceSet(asset) {
      const urls = {};
      urls.srcset = '';
      urls.jpgSrcset = '';
      if (asset.fields && asset.fields.renditions) {
        asset.fields.renditions.forEach((rendition) => {
          addRendition(urls, rendition, 'jpg');
          addRendition(urls, rendition, 'webp');
        });
      }
      // add the native rendition to the srcset as well
      urls.srcset += `${asset.fields.native.links[0].href} ${asset.fields.metadata.width}w`;
      urls.native = asset.fields.native.links[0].href;
      urls.width = asset.fields.metadata.width;
      urls.height = asset.fields.metadata.height;
      return urls;
    }

La méthode fetchPage() extrait le type de contenu MinimalPage à l'aide de la valeur slug de la page obtenue à partir de la requête précédente.

export async function fetchPage(pageslug) {
      // Get the page details
      const page = await getItem(pageslug, 'fields.sections');
      return page;
    }

La méthode getRenditionURLs() extrait les URL de rendu pour toute image pouvant être définie dans une section à l'aide de l'ID de cette image. Cet appel est effectué côté client.

export function getRenditionURLs(identifier) {
      const client = getClient();
      return client.getItem({
        id: identifier,
        expand: 'fields.renditions',
      }).then((asset) => getSourceSet(asset))
        .catch((error) => logError('Fetching Rendition URLs failed', error));
    }

Maintenant que nous disposons de notre requête de données, nous pouvons afficher les réponses dans nos composants angulaires.

Affichage côté client ou côté serveur

Avec le rendu côté client (CSR), le client est responsable de la création et de l'affichage du contenu d'une page Web à l'aide de JavaScript. Avec le rendu côté serveur (SSR), l'ensemble de la page est construit sur le serveur et une page Web complète est renvoyée au client.

Lorsque la page Web est demandée au serveur dans l'affichage côté client, le document HTML renvoyé contient du squelette HTML et aucun contenu réel. Il contient une référence à un groupe JavaScript que le client demande ensuite du serveur. A la réception de ce bundle, le client exécute le JavaScript et renseigne la page Web. Tant que le client n'a pas terminé l'exécution du code JavaScript, tout l'utilisateur voit une page Web vide. Un inconvénient des applications rendues côté client est que lorsque certains analyseurs de liens Web indexent le site, il n'y a pas de contenu réel à indexer.

Avec le rendu côté serveur (SSR), l'ensemble de la page est construit sur le serveur et une page Web complète est renvoyée au client. L'avantage est que les analyseurs de liens (crawlers) Web peuvent indexer l'intégralité du contenu sur la page Web.

Affichage côté serveur angulaire

Le flux de l'application de galerie d'images angulaires est le suivant :

Le client envoie une demande au serveur pour une route donnée.
Le serveur Express reçoit la demande.
Le serveur Express transmet toutes les demandes client de pages au moteur Express d'Angular Univeral
Le moteur Express de l'Univeral Angular prend un fichier HTML modèle et l'alimente comme suit
1. Balisage pour la route donnée
2. Données de routage sérialisées
3. Références à des feuilles de style
4. Références aux bundles JavaScript à exécuter sur le client
Le serveur Express renvoie le document HTML créé par Angular Univeral's Express Engine au client
Le client reçoit le code HTML et le affiche. L'utilisateur verra une page Web entièrement formée.
Le client demande des bundles JavaScript à partir du serveur. Après réception, le client exécute le JavaScript dans le groupe.
1. Il "hydrater" le code HTML et l'ajouter dans n'importe quel code JavaScript côté client, tel que les processus d'écoute d'événement.
2. Angular prend automatiquement les données sérialisées de la page et les injecte dans le code JavaScript afin qu'elles soient disponibles pour les composants.
Si le document HTML contenait une feuille de style, le client demande la feuille de style.

La CLI angular prend en charge l'ajout de la prise en charge du rendu côté serveur à une application Angular existante. Pour plus d'informations, reportez-vous à https://angular.io/guide/universal.

Serveur Express côté serveur

L'application serveur utilise un serveur Express pour recevoir la demande et la transmettre au moteur Express d'Angular Univeral.

Le fichier du serveur Express se trouve dans server.js. Ce fichier est créé par la CLI angulaire lors de l'ajout de la prise en charge du rendu côté serveur.

Composants angulaires

Les composants angulaires sont écrits dans TypeScript et définissent un modèle qui définit la vue. Ces modèles contiennent du HTML ordinaire, des directives angulaires et des balises de liaison, qui permettent à Angular d'ajuster le HTML avant son affichage.

Les sections suivantes fournissent un aperçu de la manière dont Angular affiche notre application dans chacun de nos composants :

Module d'application
Module racine pour l'affichage côté serveur
Résolveur de données de page
Composant d'application
Composants d'en-tête et de pied de page
Composant de section
PageComponent

Module d'application

Module d'application situé dans src/app/app.module.ts. Il initialise l'application avec le composant d'application.

Ce fichier définit les différents routages pour notre application. Sur notre site, nous voulons fournir deux routes : - le chemin racine (/) - et un chemin de page (/page/:slug)

La route racine est redirigée vers la route de page sans spécifier de slug de page. Le routage de page définit le résolveur PageDataResolver, utilisé pour obtenir toutes les données requises pour le routage avant la création des composants du routage.

Ouvrez le composant racine, situé à src/app/app.module.ts, et consultez les routes définies :

const appRoutes: Routes = [
      // no path specified, go to home
      {
        path: '',
        redirectTo: '/page/',
        pathMatch: 'full',
        runGuardsAndResolvers: 'always',
      },
      {
        path: 'page/:slug',
        component: PageComponent,
        resolve: { routeData: PageDataResolver },
        runGuardsAndResolvers: 'always',
      },
    ];

Ce module d'application est le point d'entrée lors de l'affichage de l'application côté client.

Module racine pour l'affichage côté serveur

Le point d'entrée principal de cette application Angular, lors du rendu de l'application sur le serveur, est le module serveur d'applications situé dans src/app/app.server.module.ts.

Ce module importe le module d'application, situé dans src/app/app.server.module.ts, ainsi que le fichier ServerModule d'Angular. L'application côté serveur démarre le même composant d'application que le client et utilise tous les mêmes composants.

La CLI d'Angular crée le fichier de module serveur lors de l'ajout de la prise en charge du rendu côté serveur.

Résolveur de données de page

Le résolveur de données de page, situé dans src/resolvers/page-data.resolver.ts, gère l'obtention des données à afficher dans les pages.

Lors de l'hydratation du client, ces données sont obtenues à partir du fichier transferState qui a été renseigné lors du rendu côté serveur et sérialisé dans le document HTML renvoyé au client.

Lors du rendu côté serveur ou du rendu côté client lors de la navigation côté client, transferState ne contiendra pas les données. Les données sont obtenues à partir du serveur Oracle Content Management à l'aide du kit SDK Content.

return fetchOceMinimalMain()
      .then((appData) => {
        if (pageSlug === null || pageSlug === '') {
          pageSlug = appData.fields.pages[0].slug;
        }
        return fetchPage(pageSlug).then((pageData) => {
          if (isPlatformServer(this.platformId)) {
            // add the two pieces of data to the transfer state separately
            this.transferState.set(APP_KEY, appData);
            this.transferState.set(PAGE_KEY, pageData);
          }
    
          // return the two pieces of data in a single object
          const fullData = { appData, pageData };
          return fullData;
        });
      });

Composant d'application

Le composant d'application, situé dans src/app/app.component.ts, définit la vue racine.

Ce composant contient les balises routeur-lien. Angular échange les composants sur et hors de la page au sein de ces balises, en fonction du routage en cours.

Composants d'en-tête et de bas de page

Les composants En-tête et Pied de page permettent respectivement d'afficher l'en-tête et le pied de page.

Les données d'en-tête sont transmises au composant En-tête, situé dans src/app/header/header.component.ts, et les données de pied de page sont transmises au composant Pied de page, situé dans src/app/footer/footer.component.ts. Les composants d'en-tête et de pied de page utilisent simplement les données qui leur sont transmises ; ils n'obtiennent aucune donnée supplémentaire du serveur. Reportez-vous aux liaisons dans src/app/header/header.component.html et src/app/footer/footer.component.html.

Composant de section

Le composant Section, situé à src/app/section/section.component.ts, est utilisé par le composant Page et est utilisé pour afficher tous les éléments de contenu de type MinimalSection.

Des données sont transmises à ce composant à partir du composant Page et si les données de section comportent une image, un appel côté client permet d'obtenir les URL de rendu de l'image à partir du serveur.

  ngOnInit() {
        this.heading = this.section.fields.heading;
        this.type = this.section.fields.type;
        // sanitize the content for html display
        const content = this.section.fields.body;
        const options = {
          stripIgnoreTag: true, // filter out all HTML not in the whitelist
          stripIgnoreTagBody: ['script'],
        };
        this.body = filterXSS(content, options);
        this.actions = this.section.fields.actions;
        if (this.section.fields.image) {
          getRenditionURLs(this.section.fields.image.id).then((urls) => {
            this.renditionURLs = urls;
          });
        }
      }

Composant de page

Le composant Page est chargé d'afficher l'en-tête, le pied de page et toutes les sections définies pour une page.

Ouvrez le composant Page situé dans src/app/page/page.component.ts. Dans ngOnInit, vous pouvez voir que le composant obtient les données du routage actif, qui a été rempli par le résolveur de page d'accueil.

  ngOnInit() {
        const fullData = this.route.snapshot.data.routeData;
        this.appData = fullData.appData;
        this.headerRenditionURLs = this.appData.headerRenditionURLs;
        this.footerRenditionURLs = this.appData.footerRenditionURLs;
    
        this.pageData = fullData.pageData;
        if (!this.pageData.hasError) {
          this.sections = this.pageData.fields.sections;
          this.pages = this.appData.fields.pages;
        }
      }

Le balisage du composant Page se trouve dans src/app/page/page.component.html.

Tâche 3 : Préparer votre application pour le déploiement

Maintenant que nous avons créé notre site Angular minimal, nous devons le voir sur un serveur de développement local afin de pouvoir déboguer tous les problèmes et prévisualiser l'application avant de la mettre en service.

Préparez l'application pour le déploiement en deux étapes :

Mettre en place un serveur de développement local
Tester l'application dans l'environnement de production

Mettre en place un serveur de développement local

Vous pouvez démarrer un serveur de développement localement en exécutant la commande suivante.

npm run dev

Ouvrez ensuite votre navigateur vers http://localhost:4200 pour voir votre site en action.

Tester l'application dans l'environnement de production

Pour la production, le script de création est utilisé pour créer le code client et serveur.

Exécutez la commande suivante pour exécuter le script build :

npm run build

Ce script exécute d'abord le build client, puis le build de serveur.

Déployez le dist/serveur et le dist/navigateur sur l'ordinateur serveur avant de démarrer l'application. Utilisez ensuite la commande suivante pour le démarrer :

npm run start

Conclusion

Dans ce tutoriel, nous avons créé un site minimal en Angular, accessible sur GitHub. Ce site utilise Oracle Content Management comme CMS sans tête. Après avoir configuré et configuré Oracle Content Management avec un canal de contenu publié pour le tutoriel de site minimal, nous avons installé et exécuté le site Angular afin d'extraire le contenu requis et de créer le site.

Pour plus d'informations sur Angular, visitez le site Web angulaire.

Découvrez les concepts importants d'Oracle Content Management dans la documentation.

Vous trouverez d'autres exemples de ce type sur la page Exemples Oracle Content Management du centre d'aide Oracle.

Informations relatives au titre et au copyright

Créer un site minimal en angulaire avec Oracle Content Management sans tête

F51762-01

Décembre 2021

Auteur principal : Oracle Corporation