Chemins relatifs dans le fichier index_angular.html

**69Pierre** · 03/05/2022, 17h34

Bonjour.

J'ai une application pHp/Javascript qui tourne sur un serveur Apache.

J'ai développé de nouvelle page web avec Angular 8 qui tourne bien dans l’environnement de dev avec ng serve.

Après un ng build --prod, mon code javascript a bien été généré dans le répertoire \Projet-V5.2\angular\dist\angular\.

Le répertoire \Projet-V5.2 contient mon index.php qui est le point d'entrée de l'application : http://127.0.0.1:8000/Projet-V5.2/index.php.

Lorsque je j'essaie d'ouvrir la page angular.php que j'ai créée :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<?php require_once '.\angular\dist\angular\index_angular.html'; ?>

Le navigateur ne trouvent pas les fichiers :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
http://127.0.0.1:8000/Projet-V5.2/angular/dist/angular/styles.c7b63c77103d3100fe9e.css
http://127.0.0.1:8000/Projet-V5.2/angular/dist/angular/runtime-es2015.858f8dd898b75fe86926.js

etc
issus du fichier index_angular.html créé avec le nd build dans \Projet-V5.2\angular\dist\angular\.

En fait les chemins créés dans \Projet-V5.2\angular\dist\angular\index_angular.html ne sont pas des chemins relatifs à \Projet-V5.2\angular\dist\angularComment faire pour ce soit le cas ?

**krakatoa** · 03/05/2022, 19h56

utilise Angular element pour ça !
ça va transformer ton appli angular en une seule balise
que tu mettra dans n'importe quel page html ou php avec juste les fichiers .js

**69Pierre** · 03/05/2022, 20h59

OK, merci, je ne connais pas, ce sera l'occasion.

C'est bien de ça dont tu parles :

Le package @angular/elements exporte une API createCustomElement() qui fournit un pont entre l'interface de composant d'Angular et la fonctionnalité de détection des modifications vers l'API DOM intégrée.

Est ce que tu aurais une doc, un tuto et/ou des exemples STP ?

**krakatoa** · 03/05/2022, 21h10

https://iner-dukoid.developpez.com/t...ngular/#LXXVII

**69Pierre** · 03/05/2022, 21h18

Super.
J'essaye ça demain.

**69Pierre** · 03/05/2022, 21h31

Ca n'a pas l'air si simple...

**krakatoa** · 04/05/2022, 12h17

un package a installé
une modification de app.module
creation concatenate.js

build avec concatenate pour tout mettre sur un seul fichier

et utiliser la balise dans le .html ou php
tout en chargeant le fichier .js concaténé

très simple au contraire

pas besoin de toucher aux input puisque ta balise n'envoi aucune donnée du fichier .html ou php au composant !

**69Pierre** · 04/05/2022, 21h09

Bonjour.

Dans \dist\angular, le seul composant html est le fichier index_angular.html autogénéré par ng build.
Comment le faire "rentrer" dans un composant ?

Typescript :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
class Index_angular extends HTMLElement {
 
    constructor() {
        // Always call super first in constructor
        super();
    }
    …
    …
}
 
customElements.define('angular', Index_angular);

et utiliser

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<angular></angular>

dans mon projet pHp ?

**dukoid** · 05/05/2022, 07h16

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html lang="fr">
<head>
  <title>Angular elements</title>
</head>
<body>
 
  <angular></angular>
 
  <script src="...le fichier .js qui a été concatené....js "></script>
 
</body>
</html>

app.module.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import  { Injector } from '@angular/core';
import  { createCustomElement } from '@angular/elements';
 
@NgModule({
  declarations: [AppComponent, ],
  imports: [ BrowserModule,  ],
  entryComponents : [ AppComponent, ],             
  providers: [  ],                                
  schemas: [ CUSTOM_ELEMENTS_SCHEMA, ],                        
})
export class AppModule {
  constructor(private injector : Injector) {}                  
 
  ngDoBootstrap(){
    const el = createCustomElement(ButtonToggleMatComponent, {injector : this.injector});
    customElements.define('angular', el);           
  }
}

**69Pierre** · 06/05/2022, 16h10

Merci.

J'ai un soucis, c'est pour ça que je m'en sortait pas.
J'ai la version 8.0.6 d'Angular.

J'ai fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
npm uninstall -g @angular/cli
npm --force cache clean
npm cache verify
npm install -g @angular/cli@latest
ng --version
 
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
 
 
Angular CLI: 8.0.6
Node: 16.15.0
OS: win32 x64
Angular: 8.0.3

Mais je n'arrive toujours pas à avoir la dernière version, ou en tous cas, une qui me permette de faire un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

npm install @angular/elements

**dukoid** · 06/05/2022, 16h33

créé un projet vierge (avec la dernière version 14):
ng new myproject
cd myproject

ng --version (verifie que c'est bien la 14)

tu copie tes fichiers /src d ton ancien projet que tu balance dans le nouveau
plus qu'à débuguer petit à petit

**69Pierre** · 06/05/2022, 17h24

Bon.

Je n'arrive pas à mieux :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
λ ng --version
 
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
 
 
Angular CLI: 13.3.5
Node: 16.15.0
Package Manager: npm 8.5.5
OS: win32 x64

mais je peux faire mon

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

npm install @angular/elements

**69Pierre** · 06/05/2022, 18h21

Ah, oui, il va y avoir du debug...

λ ng build --prod
Option "--prod" is deprecated: No need to use this option as this builder defaults to configuration "production".
√ Browser application bundle generation complete.

./src/main.ts:2:0-18 - Error: Module not found: Error: Can't resolve 'hammerjs' in 'C:\Users\Zare6363\Documents\Perso\Projet\EasyPHP-Devserver-17_Win8_V1\eds-www\touslesport\Projet-V5.2\angular\src'

Error: src/app/app.module.ts:12:35 - error TS2307: Cannot find module 'services/api.sorties.service' or its corresponding type declarations.
12 import { ApiSortiesService } from 'services/api.sorties.service';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: src/app/app.module.ts:33:36 - error TS2304: Cannot find name 'ButtonToggleMatComponent'.
33 const el = createCustomElement(ButtonToggleMatComponent, {injector : this.injector});
~~~~~~~~~~~~~~~~~~~~~~~~

Error: src/app/navbar/navbar.component.html:16:43 - error NG8002: Can't bind to 'routerLink' since it isn't a known property of 'a'.
16 <a class="nav-item nav-link active" [routerLink]="['/sorties']" routerLinkActive="router-link-active" >Sorties<span class="sr-only">(current)</span></a>
~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/navbar/navbar.component.ts:5:16
5 templateUrl: './navbar.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component NavbarComponent.

Error: src/app/navbar/navbar.component.html:17:36 - error NG8002: Can't bind to 'routerLink' since it isn't a known property of 'a'.
17 <a class="nav-item nav-link" [routerLink]="['/sortiestriables']" routerLinkActive="router-link-active">Sorties triables</a>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/navbar/navbar.component.ts:5:16
5 templateUrl: './navbar.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component NavbarComponent.

Error: src/app/sorties/sorties.component.ts:2:35 - error TS2307: Cannot find module '../../../services/api.sorties.service' or its corresponding type declarations.
2 import { ApiSortiesService } from '../../../services/api.sorties.service';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: src/app/sorties/sorties.component.ts:3:24 - error TS2307: Cannot find module 'policies/Sortie' or its corresponding type declarations.
3 import { Sortie } from 'policies/Sortie';
~~~~~~~~~~~~~~~~~

Error: src/app/sorties/sorties.component.ts:11:3 - error TS2564: Property 'sorties' has no initializer and is not definitely assigned in the constructor.
11 sorties: Sortie[];
~~~~~~~

Error: src/app/sorties/sorties.component.ts:14:23 - error NG2003: No suitable injection token for parameter 'apiSortiesService' of class 'SortiesComponent'.
Consider using the @Inject decorator to specify an injection token.
14 constructor(private apiSortiesService: ApiSortiesService) { }
~~~~~~~~~~~~~~~~~

src/app/sorties/sorties.component.ts:14:42
14 constructor(private apiSortiesService: ApiSortiesService) { }
~~~~~~~~~~~~~~~~~
This type does not have a value, so it cannot be used as injection token.

**69Pierre** · 06/05/2022, 20h31

Je ne comprends pas les erreurs suivantes que je n'avais pas avant :

Error: src/app/sorties/sorties.component.ts:11:3 - error TS2564: Property 'sorties' has no initializer and is not definitely assigned in the constructor.
11 sorties: Sortie[];
~~~~~~~

Error: src/app/sorties/sorties.component.ts:12:32 - error TS2322: Type 'null' is not assignable to type 'number'.
12 selectedSortie: Sortie = { date : null , chrono:null, itineraire: null};
~~~~
policies/Sortie.ts:2:3
2 date: number;
~~~~
The expected type comes from property 'date' which is declared here on type 'Sortie'

Error: src/app/sorties/sorties.component.ts:12:47 - error TS2322: Type 'null' is not assignable to type 'number'.
12 selectedSortie: Sortie = { date : null , chrono:null, itineraire: null};
~~~~~~
policies/Sortie.ts:3:3
3 chrono: number;
~~~~~~
The expected type comes from property 'chrono' which is declared here on type 'Sortie'

Error: src/app/sorties/sorties.component.ts:12:60 - error TS2322: Type 'null' is not assignable to type 'string'.
12 selectedSortie: Sortie = { date : null , chrono:null, itineraire: null};
~~~~~~~~~~
policies/Sortie.ts:4:3
4 itineraire: string;
~~~~~~~~~~
The expected type comes from property 'itineraire' which is declared here on type 'Sortie'

J'ai bien un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

import { Sortie } from 'policies/Sortie';

dans le fichier sorties.component.ts
Le code du fichier Sorties.ts est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
export  interface  Sortie {
  date: number;
  chrono:  number;
  itineraire:  string;
}

Je ne comprends pas non plus cette erreur :

Error: src/app/navbar/navbar.component.html:4:43 - error NG8002: Can't bind to 'routerLink' since it isn't a known property of 'a'.
4 <a class="nav-item nav-link active" [routerLink]="['/sorties']" routerLinkActive="router-link-active" >Sorties<span class="sr-only">(current)</span></a>
~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/navbar/navbar.component.ts:5:16
5 templateUrl: './navbar.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component NavbarComponent.

Error: src/app/navbar/navbar.component.html:5:36 - error NG8002: Can't bind to 'routerLink' since it isn't a known property of 'a'.
5 <a class="nav-item nav-link" [routerLink]="['/sortiestriables']" routerLinkActive="router-link-active">Sorties triables</a>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/navbar/navbar.component.ts:5:16
5 templateUrl: './navbar.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component NavbarComponent.

Ni celle là :

Error: src/app/app.module.ts:33:36 - error TS2304: Cannot find name 'ButtonToggleMatComponent'.
33 const el = createCustomElement(ButtonToggleMatComponent, {injector : this.injector});

**krakatoa** · 06/05/2022, 20h46

* attention au mode strict
ajoute un ! pour résoudre le problème

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

sorties!:  Sortie[];

* essai:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a routerLink="'/search"

* peut etre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

entryComponents: [ButtonToggleMatComponent]

**69Pierre** · 06/05/2022, 21h00

Ah oui! Merci.
Une de moins. avec le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

sorties!:  Sortie[];

**krakatoa** · 06/05/2022, 21h04

* essai:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a routerLink="'/search"

* peut etre
entryComponents: [ButtonToggleMatComponent]

**69Pierre** · 06/05/2022, 21h19

oùlà, non, je suis perdu là.

**krakatoa** · 06/05/2022, 21h30

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a routerLink="'/sorties"

**69Pierre** · 06/05/2022, 21h38

Oui, bravo, c'est bien ça merci.

Je n'ai plus que 2 erreurs :

Error: src/app/app.module.ts:33:36 - error TS2304: Cannot find name 'ButtonToggleMatComponent'.
33 const el = createCustomElement(ButtonToggleMatComponent, {injector : this.injector});
~~~~~~~~~~~~~~~~~~~~~~~~
Error: src/app/sorties/sorties.component.ts:12:32 - error TS2322: Type 'null' is not assignable to type 'number'.
12 selectedSortie: Sortie = { date : null , chrono:null, itineraire: null};
~~~~
policies/Sortie.ts:2:3
2 date: number;
~~~~
The expected type comes from property 'date' which is declared here on type 'Sortie'
Error: src/app/sorties/sorties.component.ts:12:47 - error TS2322: Type 'null' is not assignable to type 'number'.
12 selectedSortie: Sortie = { date : null , chrono:null, itineraire: null};
~~~~~~
policies/Sortie.ts:3:3
3 chrono: number;
~~~~~~
The expected type comes from property 'chrono' which is declared here on type 'Sortie'

Error: src/app/sorties/sorties.component.ts:12:60 - error TS2322: Type 'null' is not assignable to type 'string'.
12 selectedSortie: Sortie = { date : null , chrono:null, itineraire: null};
~~~~~~~~~~
policies/Sortie.ts:4:3
4 itineraire: string;
~~~~~~~~~~
The expected type comes from property 'itineraire' which is declared here on type 'Sortie'

Pour le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part