Discussion :

[Zebulon777]

Bonjour à tous.

J'ai plein de variables définies dans le fichier environment.ts, mais je n'arrive pas à les utilisez dans un template html
Je précise que je suis totalement débutant en Angular.

J'ai essayé pas mal de choses trouvées sur le net, sans succès.

Voici mon code :

Code typescript :

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
 
//environment.ts
 
// import { SidenavComponent } from 'src/app/feature/sidenav/sidenav.component';
 
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.
 
/**
 * Configuration in Development Mode.
 */
export const environment = {
  production: false,
  limitOfNbTrajectories: 20000,
  limitOfNbTrajectoriesExportPlots: 1,
  env: 'development',
  tileOsmEndPoint: 'http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png',
  tileSatEndPoint: 'https://...erver/tile/{z}/{y}/{x}',
  version: "1.0.0"
...
...
...

Code html :

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
42
43
44
45
46
47
48
49
50
51
52
 
 
<section class="">
  <!-- Footer -->
  <footer class="text-center text-white police-pied-de-page fond-pied-de-page">
    <div class="footer-inner">
      <div class="text-center">
        <!-- <a (click)="openNumAccess()">Accessibilité non conforme</a> -->
        <!-- <a href="javascript:void(0)" (click)="openNumAccess()">Accessibilité non conforme</a> -->
        <a href="/numAccess">Accessibilité non conforme</a>
      </div>
      <div class="text-center">
        <!-- <a (click)="openContact()">Contact</a> -->
        <!-- <a href="javascript:void(0)" (click)="openContact();">Contact</a> -->
        <a href="/contact">Contact</a>
      </div>
      <div class="text-center">
        <!-- <a (click)="openVisualize()">Plan du site</a> -->
        <!-- <a href="javascript:void(0)" (click)="openVisualize();">Plan du site</a> -->
        <a href="/visualize/plan">Plan du site</a>      </div>
      <div class="text-center">
        <!-- <a (click)="openProtectData()">Protection des données personnelles</a> -->
        <a href="/protectData">Protection des données personnelles</a>
        <!-- <a href="javascript:void(0)" (click)="openProtectData();">Protection des données personnelles</a> -->
      </div>
      <div class="text-center">
        <!-- <a (click)="openLegalMention()">Mentions légales</a> -->
        <!-- <a href="javascript:void(0)" (click)="openLegalMention();">Mentions légales</a> -->
        <a href="/mentionsLegales">Mentions légales</a>
      </div>
      <div class="text-center">
        <!-- <a (click)="downloadHelpFile()">Manuel utilisateur</a> -->
        <!-- <a href="javascript:void(0)" (click)="downloadHelpFile();">Manuel utilisateur</a> -->
        <!-- <a href="{{manuel}}" target="_blank">Manuel utilisateur</a> -->
        <a href="/assets/Manuel%20Utilisateur%20SURVOLS.pdf" target="_blank">Manuel utilisateur</a>
      </div>
      <div class="text-center">
        <!-- <a (click)="openUrl('dsnaLink', true);">La DS</a> -->
        <!-- <a href="javascript:void(0)" (click)="openUrl('dsnaLink', true);">La DS</a> -->
        <!-- <a href="{{ openUrl('dsnaLink', true) }}" target="_blank">La DS</a> -->
        <!-- <a href="/env.dsnaLink" target="_blank">La DS</a> -->
        <a href="https://www.ecologie.gouv.fr/controle-aerien" target="_blank">La DS</a>
        <br/>
        <br/>
      </div>
      <div class="text-center pt-5">
          <p>version<p>
      </div>
  </div>
  </footer>
  <!-- Footer -->
</section>

Code typescript :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { environment as env } from '@env/environment';
 
@Component({
  selector: 'app-pied-de-page',
  templateUrl: './pied-de-page.component.html',
  styleUrls: ['./pied-de-page.component.css']
})
export class PiedDePageComponent implements OnInit {
 
/**
   * The url for the user manual.
   */
 url = {
  manuel: '../../assets/Manuel%20Utilisateur%20SURVOLS.pdf',
};
 
              /**
 * Constructor.
 */
constructor(private router: Router) {}
/**
 * On init comp.
 */
ngOnInit(): void {
}
 
/**
 * Open the given url with the appropriate env.
 * @param url the given url
 * @param isEnv the given env
 */
openUrl(url, isEnv): void {
  if (isEnv) {
    window.open(env[url]);
  } else {
    window.open(url);
  }
}
 
/**
 * Open pdf help file
 */
downloadHelpFile() {
  window.open(env.helpFile);
}
 
/**
 * Open the visualize url.
 */
openVisualize(): void {
  /*this.router.navigateByUrl('/visualize/plan', {});*/
  window.open('/visualize/plan', '_top');
}
 
/**
 * Open in new tab the protect data page.
 */
openProtectData(): void {
  window.open('/protectData', '_top');
}
 
/**
 * Open in new tab the num accessibility page.
 */
openNumAccess(): void {
  window.open('/numAccess', '_top');
}
 
/**
 * Open in new tab the a propos page.
 */
openAPropos() {
  window.open('/apropos');
}
 
/**
 * Open in new tab contact page.
 */
openContact(): void {
  window.open('/contact', '_top');
}
 
/**
 * Open in new tab legal mention page.
 */
openLegalMention(): void {
  window.open('/mentionsLegales', '_top');
}
 
 
}

[dukoid]

Code :

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

1
2
3
4
5
import { environment } from 'src/environments/environment';
 
export class ??????????Component {
...
  environment =  environment;

html

Code :

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

1
2
 
{{ environment.???????? }}

[Zebulon777]

Merci pour ton aide.
J'essaye de me dépatouiller avec Angular, mais je trouve que ce n'est vraiment pas pratique et intuitif

Par contre, ce que je ne comprends pas c'est que j'avais déjà un import de "environnment", pourquoi il n'est pas pris en compte ?

Code typescript :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
import { Component, HostListener, OnInit } from '@angular/core';
import { environment as env } from '@env/environment';
import { environment } from 'src/environments/environment';
 
/**
 * Page 'A propos' component.
 */
@Component({
  selector: 'app-page-a-propos',
  templateUrl: './page-a-propos.component.html',
  styleUrls: ['./page-a-propos.component.css'],
})
export class PageAProposComponent implements OnInit {
  environment =  environment;
 
  screenWidht: any;
  screenHeight: any;
 
  @HostListener('window:resize', ['$event'])
  onWindowResize() {
    this.screenWidht = window.innerWidth + 'px';
    this.screenHeight = window.innerHeight + 'px';
  }
 
  /**
   * Constructor.
   */
  constructor() {}
 
  /**
   * On init.
   */
  ngOnInit() {
    // initiliser le scroll bar
    this.onWindowResize();
  }
 
  /**
   * Open new tab for the contact.
   */
  openContact(): void {
    window.open('/contact');
  }
 
  /**
 * Open the given url with the appropriate env.
 * @param url the given url
 * @param isEnv the given env
 */
openUrl(url, isEnv): void {
  if (isEnv) {
    window.open(env[url]);
  } else {
    window.open(url);
  }
}
 
}
 
...
...
...

Code html :

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

1
2
3
4
5
6
7
8
 
...
...
...
Pour plus d’information, consulter la rubrique <a href="{{ environment.dsLink }}" target="_blank">La DS</a> du Menu.</p>
...
...
...