Discussion :

[krakatoa]

est ce que tu as mis ça ?

Code :

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

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'

[69Pierre]

Bonjour.

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

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
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 :

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

entryComponents: [ButtonToggleMatComponent]

seul.

[69Pierre]

Bon, j'ai réglé la première erreur : error TS2322: Type 'null' is not assignable to type

Code :

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

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'

[69Pierre]

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

Code :

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

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

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
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);           
  }
}

[krakatoa]

il n'y a pas de this:

Code :

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

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

exemple:

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
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 :

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
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 {
}

[69Pierre]

Bonjour.

Je n'ai pas du comprendre.

Code :

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

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

donne :

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});

[krakatoa]

tu as bien fait l'importation de ButtonToggleMatComponent ?

[69Pierre]

Je ne sais pas...

[dukoid]

dans app.module

Code :

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

import {ButtonToggleMatComponent} from .......................................

[69Pierre]

Ben, justement.

C'est le from dont je doute.

j'ai essayé

Code :

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

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

qui me donne

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 :

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

[krakatoa]

Code :

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

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

[69Pierre]

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

Code batch :

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

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 batch :

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
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

[dukoid]

module

Code :

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

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

dans le .ts:

Code :

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

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

[69Pierre]

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 javascipt :

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
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 batch :

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

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 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>

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

[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