Chemins relatifs dans le fichier index_angular.html

Version imprimable

Voir 40 message(s) de cette discussion en une page

06/05/2022, 21h48
krakatoa

est ce que tu as mis ça ?

Code:

entryComponents: [ButtonToggleMatComponent]

dans app.module ?

le mode stricte c'est pour forcer à initialiser les propriétés car c'est une bonne pratique
si on ne veut pas initialiser alors on met ! pour dire que la propriété est autorisé à être de type 'undefined'

Bonjour.

oui, mais j'ai toujours les 2 mêmes erreurs :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import  { Injector } from '@angular/core';
import  { createCustomElement } from '@angular/elements';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from  '@angular/forms';
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SortiesComponent } from './sorties/sorties.component';
import { NavbarComponent } from './navbar/navbar.component';
import { ApiSortiesService } from 'services/api.sorties.service';
import { SortieTriablesComponent } from './sortie-triables/sortie-triables.component';
import { Routes, RouterModule } from '@angular/router';
 
const appRoutes: Routes = [
  { path: 'sorties', component: SortiesComponent },
  { path: 'sortiestriables', component: SortieTriablesComponent }
 
];
 
@NgModule({
  declarations: [AppComponent, ],
  imports: [ BrowserModule,  ],
  //20220607 entryComponents : [ AppComponent, ],  
  entryComponents: [ButtonToggleMatComponent, 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);           
  }
}

J'ai essayé aussi avec

Code:

entryComponents: [ButtonToggleMatComponent]

seul.

07/05/2022, 13h58
69Pierre
Bon, j'ai réglé la première erreur : error TS2322: Type 'null' is not assignable to type
Code:

1 2 3 4 5 export interface Sortie { date: number | null; chrono: number | null; itineraire: string | null; }
Il me reste l'erreur error TS2304: Cannot find name 'ButtonToggleMatComponent'

Je ne comprends pas ce qui cloche dans ces 2 lignes : error TS2304: Cannot find name 'ButtonToggleMatComponent'

Code:

1
2
  entryComponents: [ButtonToggleMatComponent, ],
    const el = createCustomElement(ButtonToggleMatComponent, {injector : this.injector});

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import  { Injector } from '@angular/core';
import  { createCustomElement } from '@angular/elements';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from  '@angular/forms';
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SortiesComponent } from './sorties/sorties.component';
import { NavbarComponent } from './navbar/navbar.component';
import { ApiSortiesService } from 'services/api.sorties.service';
import { SortieTriablesComponent } from './sortie-triables/sortie-triables.component';
import { Routes, RouterModule } from '@angular/router';
 
const appRoutes: Routes = [
  { path: 'sorties', component: SortiesComponent },
  { path: 'sortiestriables', component: SortieTriablesComponent }
 
];
 
@NgModule({
  declarations: [AppComponent, ],
  imports: [ BrowserModule,  ],
  //20220607 entryComponents : [ AppComponent, ],  
  entryComponents: [ButtonToggleMatComponent, ],
  providers: [  ],                                
  schemas: [ CUSTOM_ELEMENTS_SCHEMA, ],                        
})
export class AppModule {
  constructor(private injector : Injector) {}                  
 
  ngDoBootstrap(){
    const el = createCustomElement(ButtonToggleMatComponent, {injector : this.injector});
    customElements.define('angular', el);           
  }
}

il n'y a pas de this:

Code:

const PopupElement = createCustomElement(PopupComponent, {injector});

exemple:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { Component, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { PopupService } from './popup.service';
import { PopupComponent } from './popup.component';
 
@Component({
  selector: 'app-root',
  template: `
    <input #input value="Message">
    <button type="button" (click)="popup.showAsComponent(input.value)">Show as component</button>
    <button type="button" (click)="popup.showAsElement(input.value)">Show as element</button>
  `,
})
export class AppComponent {
  constructor(injector: Injector, public popup: PopupService) {
    // Convert `PopupComponent` to a custom element.
    const PopupElement = createCustomElement(PopupComponent, {injector});
    // Register the custom element with the browser.
    customElements.define('popup-element', PopupElement);
  }
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
import { AppComponent } from './app.component';
import { PopupComponent } from './popup.component';
import { PopupService } from './popup.service';
 
@NgModule({
  imports: [BrowserModule, BrowserAnimationsModule],
  providers: [PopupService],
  declarations: [AppComponent, PopupComponent],
  bootstrap: [AppComponent],
})
export class AppModule {
}

07/05/2022, 19h15
69Pierre

Bonjour.

Je n'ai pas du comprendre.

Code:

const el = createCustomElement(ButtonToggleMatComponent, {injector});

donne :

Citation:

Error: src/app/app.module.ts:26:21 - error TS2304: Cannot find name 'ButtonToggleMatComponent'.

26 entryComponents: [ButtonToggleMatComponent, ],
~~~~~~~~~~~~~~~~~~~~~~~~

Error: src/app/app.module.ts:35:33 - error TS2304: Cannot find name 'ButtonToggleMatComponent'.

35 const el = createCustomElement(ButtonToggleMatComponent, {injector});
~~~~~~~~~~~~~~~~~~~~~~~~

Error: src/app/app.module.ts:35:60 - error TS2663: Cannot find name 'injector'. Did you mean the instance member 'this.injector'?

35 const el = createCustomElement(ButtonToggleMatComponent, {injector});
07/05/2022, 21h03
krakatoa

tu as bien fait l'importation de ButtonToggleMatComponent ?
08/05/2022, 00h25
69Pierre

Je ne sais pas...
08/05/2022, 07h40
dukoid

dans app.module

Code:

import {ButtonToggleMatComponent} from .......................................
08/05/2022, 09h40
69Pierre

Ben, justement.

C'est le from dont je doute.

j'ai essayé

Code:

import { MatButtonToggleModule } from '@angular/material/button-toggle';

qui me donne

Citation:

Error: src/app/app.module.ts:7:39 - error TS2307: Cannot find module '@angular/material/button-toggle' or its corresponding type declarations.

7 import { MatButtonToggleModule } from '@angular/material/button-toggle';

Parceque est dans la 13.3.6 et que j'ai Angular CLI: 13.3.5.

J'ai un soucis pour charger ces librairies :

Citation:

npm install --save @angular/material
npm ERR! code E407
npm ERR! 407 authenticationrequired - GET https://registry.npmjs.org/@angular%2fmaterial

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Zare6363\AppData\Local\npm-cache\_logs\2022-05-08T07_39_25_492Z-debug-0.log

Code:

1
2
3
npm remove @angular/material
 
ng add @angular/material

Bonjour.
Je reprends donc à cet endroit avec cette erreur :

Code:

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

et cette configuration :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
ng --version
 
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
 
 
Angular CLI: 13.3.9
Node: 16.10.0
Package Manager: npm 7.24.0
OS: win32 x64
 
Angular: 13.3.11
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
 
Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.9
@angular-devkit/build-angular   13.3.9
@angular-devkit/core            13.3.9
@angular-devkit/schematics      13.3.9
@angular/cdk                    13.3.9
@angular/cli                    13.3.9
@angular/material               13.3.9
@schematics/angular             13.3.9
rxjs                            7.5.7
typescript                      4.6.4

01/11/2022, 08h44
dukoid
module

Code:

import {MatButtonToggleModule} from '@angular/material/button-toggle';

dans le .ts:
Code:

1 2 3 4 import { MatButtonToggle } from '@angular/material/button-toggle'; ... ... const el = createCustomElement(MatButtonToggle, { injector: this.injector });
astuce:
il y a un channel d'aide Angular sur discord (chat) - recherche de serveur: "angular"
c'est en anglais mais tu peux utiliser un traducteur de texte pour communiquer

Merci Dukoid.

Ca va mieux plus d'erreur et ça "builde".

Bon, j'ai un fichier app.module.ts qui ne me paraît pas génial et que je ne maîtrise pas :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import  { Injector } from '@angular/core';
import  { createCustomElement } from '@angular/elements';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from  '@angular/forms';
 
//import {ButtonToggleMatComponent} from '@angular/material/button-toggle'; 
import {MatButtonToggleModule} from '@angular/material/button-toggle';
import { MatButtonToggle } from '@angular/material/button-toggle'; //20221101
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SortiesComponent } from './sorties/sorties.component';
import { NavbarComponent } from './navbar/navbar.component';
import { ApiSortiesService } from 'services/api.sorties.service';
import { SortieTriablesComponent } from './sortie-triables/sortie-triables.component';
import { Routes, RouterModule } from '@angular/router';
 
const appRoutes: Routes = [
  { path: 'sorties', component: SortiesComponent },
  { path: 'sortiestriables', component: SortieTriablesComponent }
 
];
 
@NgModule({
  declarations: [AppComponent, ],
  imports: [ BrowserModule,  ],
  entryComponents : [ AppComponent, ],             
  providers: [  ],                                
  schemas: [ CUSTOM_ELEMENTS_SCHEMA, ],                        
})
export class AppModule {
  constructor(private injector : Injector) {}                  
 
  ngDoBootstrap(){
//20221101    const el = createCustomElement(ButtonToggleMatComponent, {injector : this.injector});
const el = createCustomElement(MatButtonToggle, { injector: this.injector }); //20221101
    customElements.define('angular', el);           
  }
}

Le ng build --prod produit ses fichiers :

Code:

1
2
3
4
5
6
7
01/11/2022  09:18            16*300 3rdpartylicenses.txt
17/05/2020  20:29             5*430 favicon.ico
01/11/2022  09:18             7*203 index.html
01/11/2022  09:18           200*327 main.b8bfd861beab1f63.js
01/11/2022  09:18            46*298 polyfills.e0cd036c8224321b.js
01/11/2022  09:18             1*079 runtime.ab77de2067259761.js
01/11/2022  09:18            74*908 styles.69b0537b80f75de9.css

Par contre dans mon usine à gaz, rien ne marche.

J'ai une application pHp avec un onglet qui appelle le fichier html généré par angular, ça ne marche pas.
Si j'appelle un fichier de la forme :

Code:

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>

Ca ne fonctionne pas non plus.
Je ne sais pas comment debbuguer.

07/11/2022, 08h54
dukoid

si ce n'est pas confidentiel, tu peux mettre le code sur un github. (en enlevant les parties sensible)
je regarderai

parceque là, comme ça, je ne sais pas

Voir 40 message(s) de cette discussion en une page