从Angular项目的页面中加载来自资源文件夹的图标时显示429错误。

huangapple
go评论117阅读模式
英文:

Loading icons from asset folder in a page in angular project showing 429 error

问题

在我的Angular项目中，在assets文件夹下有一些SVG图标。我需要在每个项目旁边的下拉列表中显示这些图标。以下是显示图标的代码：

  1. constructor(		
  2.     private matIconRegistry: MatIconRegistry,
  3.     private domSanitizer: DomSanitizer		
  4. ) {
  5.     this.registerIcon();
  6. }
  8. registerIcon() {
  9.     this.matIconRegistry.addSvgIcon("1", this.domSanitizer.bypassSecurityTrustResourceUrl("assets/icons/text.svg"));
  10.     this.matIconRegistry.addSvgIcon("2", this.domSanitizer.bypassSecurityTrustResourceUrl("assets/icons/text.svg"));
  11.     this.matIconRegistry.addSvgIcon("4", this.domSanitizer.bypassSecurityTrustResourceUrl("assets/icons/select.svg"));
  12.     this.matIconRegistry.addSvgIcon("5", this.domSanitizer.bypassSecurityTrustResourceUrl("assets/icons/radio.svg"));
  13.     this.matIconRegistry.addSvgIcon("6", this.domSanitizer.bypassSecurityTrustResourceUrl("assets/icons/checkbox.svg"));
  14.     this.matIconRegistry.addSvgIcon("7", this.domSanitizer.bypassSecurityTrustResourceUrl("assets/icons/date.svg"));		
  15. }

HTML代码：

  1. <mat-form-field>
  2.     <mat-label>Field Type</mat-label>
  3.     <mat-select [(ngModel)]="field.fieldType" [ngModelOptions]="{standalone: true}">
  4.         <mat-select-trigger>
  5.             <mat-icon svgIcon="{{field.fieldType}}"></mat-icon>
  6.             &nbsp;{{selectedFieldName}}
  7.         </mat-select-trigger>
  8.         <mat-option *ngFor="let item of allFieldTypes" [value]="item.value">
  9.             <mat-icon class="material-icons" svgIcon="{{item.value}}"></mat-icon>
  10.             {{item.viewValue}}
  11.         </mat-option>
  12.     </mat-select>
  13. </mat-form-field>

在本地环境运行项目时，一切正常，我可以在下拉列表中看到图标。但是当我将代码部署到AWS云上时，代码不起作用，我看到每个图标都有429错误。

你可以告诉我如何解决这个问题吗？

英文:

In my angular project, under assets folder I have some svg icons. I need to show those icons in the dropdown list beside of each item. Here is my code to show the icons:

  1. constructor(		
  2. 		private matIconRegistry: MatIconRegistry,
  3. 		private domSanitizer: DomSanitizer		
  4. 	) {
  5. 		
  6. 		this.registerIcon();
  7. 	}
  8. 	
  10. registerIcon() {
  11. 		this.matIconRegistry.addSvgIcon(&quot;1&quot;, this.domSanitizer.bypassSecurityTrustResourceUrl(&quot;assets/icons/text.svg&quot;));
  12. 		this.matIconRegistry.addSvgIcon(&quot;2&quot;, this.domSanitizer.bypassSecurityTrustResourceUrl(&quot;assets/icons/text.svg&quot;));
  13. 		this.matIconRegistry.addSvgIcon(&quot;4&quot;, this.domSanitizer.bypassSecurityTrustResourceUrl(&quot;assets/icons/select.svg&quot;));
  14. 		this.matIconRegistry.addSvgIcon(&quot;5&quot;, this.domSanitizer.bypassSecurityTrustResourceUrl(&quot;assets/icons/radio.svg&quot;));
  15. 		this.matIconRegistry.addSvgIcon(&quot;6&quot;, this.domSanitizer.bypassSecurityTrustResourceUrl(&quot;assets/icons/checkbox.svg&quot;));
  16. 		this.matIconRegistry.addSvgIcon(&quot;7&quot;, this.domSanitizer.bypassSecurityTrustResourceUrl(&quot;assets/icons/date.svg&quot;));		
  17. 	}

Html code:

  1. &lt;mat-form-field&gt;
  2. 	&lt;mat-label&gt;Field Type&lt;/mat-label&gt;
  3. 	&lt;mat-select [(ngModel)]=&quot;field.fieldType&quot; [ngModelOptions]=&quot;{standalone: true}&quot;&gt;
  4. 		&lt;mat-select-trigger&gt;
  5. 			&lt;mat-icon svgIcon=&quot;{{field.fieldType}}&quot;&gt;&lt;/mat-icon&gt;
  6. 			&amp;nbsp;{{selectedFieldName}}
  7. 		&lt;/mat-select-trigger&gt;
  8. 		&lt;mat-option *ngFor=&quot;let item of allFieldTypes&quot; [value]=&quot;item.value&quot;&gt;
  9. 			&lt;mat-icon class=&quot;material-icons&quot; svgIcon=&quot;{{item.value}}&quot;&gt;&lt;/mat-icon&gt;
  10. 			{{item.viewValue}}
  11. 		&lt;/mat-option&gt;
  12. 	&lt;/mat-select&gt;
  13. &lt;/mat-form-field&gt;

While runing the project in my local Environment, it's working fine and I can see the icons in the dropdown list. But when I deploy the code to the AWS Cloud, the code is not working and I can see the 429 error for each icons.

从Angular项目的页面中加载来自资源文件夹的图标时显示429错误。

Can anyone tell me how to fix the problem?

答案1

得分: 1

你的服务配置似乎有问题，
这是一个更新的服务，
这是文件夹结构
文件夹结构

以及输出
输出 

  2. import { Injectable } from '@angular/core';
  3. import { DomSanitizer } from '@angular/platform-browser';
  4. import { MatIconRegistry } from '@angular/material/icon';
  6. @Injectable({
  7.   providedIn: 'root'
  8. })
  9. export class IconService {
  11.   constructor(
  12.     private _iconRegistry: MatIconRegistry,
  13.     private _sanitizer: DomSanitizer
  14.   ) {}
  15.   public registerIcons(icons: Array<string>): void {
  16.     icons.forEach((icon) => {
  18.       this._iconRegistry.addSvgIcon(
  19.         icon,
  20.         this._sanitizer.bypassSecurityTrustResourceUrl(
  21.           `assets/icons/${icon}.svg`
  22.         )
  23.       );
  24.     });
  25.   }
  26. }

对于 app.module.ts

  1. import { NgModule } from '@angular/core';
  2. import { BrowserModule } from '@angular/platform-browser';
  3. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  4. import { AppRoutingModule } from './app-routing.module';
  5. import { AppComponent } from './app.component';
  6. import { IconService } from './services/icon.service';
  7. import { MatIconModule } from '@angular/material/icon';
  8. import { HttpClientModule } from '@angular/common/http';
  9. import { MatSelectModule } from '@angular/material/select';
  10. import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  12. @NgModule({
  13.   declarations: [
  14.     AppComponent
  15.   ],
  16.   imports: [
  17.     BrowserModule,
  18.     AppRoutingModule,
  19.     MatIconModule,
  20.     BrowserAnimationsModule,
  21.     HttpClientModule,
  22.     FormsModule,
  23.     MatSelectModule,
  24.     ReactiveFormsModule
  25.   ],
  26.   providers: [IconService],
  27.   bootstrap: [AppComponent]
  28. })
  29. export class AppModule { }

对于 app.component.ts

  1. import { Component, OnInit } from '@angular/core';
  2. import { IconService } from './services/icon.service';
  4. export class AppComponent implements OnInit {
  5.   title = 'app-icons';
  6.   icon: string = 'soc-icon';
  8.   allFieldType=[];
  10.   field:any
  12.   constructor(private _iconService: IconService) {
  13.     this.field = {
  14.       value: this.icon,
  15.       viewValue: 'Text',
  16.     };
  17.     this.allFieldTypes = [
  18.       { value: this.icon, viewValue: 'Text' },
  19.       { value: this.icon, viewValue: 'Number' },
  20.       { value: this.icon, viewValue: 'Date' },
  21.      
  22.     ];
  23.   }
  24.   ngOnInit(): void {
  25.     this._iconService.registerIcons([this.icon]);
  26.   }
  27. }

对于 app.component.html

  2.   <h1>hello SVG icon</h1>
  4.   <div>
  5.     <mat-form-field>
  6.       <mat-label>Select a field type</mat-label>
  7.       <mat-select [(ngModel)]="field">
  8.         <mat-select-trigger>
  9.           <mat-icon svgIcon="{{field.value}}"></mat-icon>
  10.           &nbsp;{{field.viewValue}}
  11.         </mat-select-trigger>
  12.         <mat-option *ngFor="let item of allFieldTypes" [value]="item">
  13.           <mat-icon class="material-icons" svgIcon="{{item.value}}"></mat-icon>
  14.           {{item.viewValue}}
  15.         </mat-option>
  16.       </mat-select>
  17.     </mat-form-field>
  18.   </div>
英文:

you seem to have wrong configuration for this service,
here's an update service
and here's folder structure
folder structure

and output here
output 

  2. import { Injectable } from &#39;@angular/core&#39;;
  3. import { DomSanitizer } from &#39;@angular/platform-browser&#39;;
  4. import { MatIconRegistry } from &#39;@angular/material/icon&#39;;
  6. @Injectable({
  7.   providedIn: &#39;root&#39;
  8. })
  9. export class IconService {
  11.   constructor(
  12.     private _iconRegistry: MatIconRegistry,
  13.     private _sanitizer: DomSanitizer
  14.   ) {}
  15.   public registerIcons(icons: Array&lt;string&gt;): void {
  16.     icons.forEach((icon) =&gt; {
  18.       this._iconRegistry.addSvgIcon(
  19.         icon,
  20.         this._sanitizer.bypassSecurityTrustResourceUrl(
  21.           `assets/icons/${icon}.svg`
  22.         )
  23.       );
  24.     });
  25.   }
  26. }

for app.module.ts

  1. import { NgModule } from &#39;@angular/core&#39;;
  2. import { BrowserModule } from &#39;@angular/platform-browser&#39;;
  3. import { BrowserAnimationsModule } from &#39;@angular/platform-browser/animations&#39;;
  4. import { AppRoutingModule } from &#39;./app-routing.module&#39;;
  5. import { AppComponent } from &#39;./app.component&#39;;
  6. import { IconService } from &#39;./services/icon.service&#39;;
  7. import { MatIconModule } from &#39;@angular/material/icon&#39;;
  8. import { HttpClientModule } from &#39;@angular/common/http&#39;;
  9. import { MatSelectModule } from &#39;@angular/material/select&#39;;
  10. import { FormsModule, ReactiveFormsModule } from &#39;@angular/forms&#39;;
  12. @NgModule({
  13.   declarations: [
  14.     AppComponent
  15.   ],
  16.   imports: [
  17.     BrowserModule,
  18.     AppRoutingModule,
  19.     MatIconModule,
  20.     BrowserAnimationsModule,
  21.     HttpClientModule,
  22.     FormsModule,
  23.     MatSelectModule,
  24.     ReactiveFormsModule
  25.   ],
  26.   providers: [IconService],
  27.   bootstrap: [AppComponent]
  28. })
  29. export class AppModule { }

FOR app.component.ts

  1. import { Component, OnInit } from &#39;@angular/core&#39;;
  2. import { IconService } from &#39;./services/icon.service&#39;;
  4. export class AppComponent implements OnInit {
  5.   title = &#39;app-icons&#39;;
  6.   icon: string = &#39;soc-icon&#39;;
  8.   allFieldType=[];
  10.   field:any
  12.   constructor(private _iconService: IconService) {
  13.     this.field = {
  14.       value: this.icon,
  15.       viewValue: &#39;Text&#39;,
  16.     };
  17.     this.allFieldTypes = [
  18.       { value: this.icon, viewValue: &#39;Text&#39; },
  19.       { value: this.icon, viewValue: &#39;Number&#39; },
  20.       { value: this.icon, viewValue: &#39;Date&#39; },
  21.      
  22.     ];
  23.   }
  24.   ngOnInit(): void {
  25.     this._iconService.registerIcons([this.icon]);
  26.   }

for app.compnent.html

  2.   &lt;h1&gt;hello SVG icon&lt;/h1&gt;
  4.   &lt;div&gt;
  5.     &lt;mat-form-field&gt;
  6.       &lt;mat-label&gt;Select a field type&lt;/mat-label&gt;
  7.       &lt;mat-select [(ngModel)]=&quot;field&quot;&gt;
  8.         &lt;mat-select-trigger&gt;
  9.           &lt;mat-icon svgIcon=&quot;{{field.value}}&quot;&gt;&lt;/mat-icon&gt;
  10.           &amp;nbsp;{{field.viewValue}}
  11.         &lt;/mat-select-trigger&gt;
  12.         &lt;mat-option *ngFor=&quot;let item of allFieldTypes&quot; [value]=&quot;item&quot;&gt;
  13.           &lt;mat-icon class=&quot;material-icons&quot; svgIcon=&quot;{{item.value}}&quot;&gt;&lt;/mat-icon&gt;
  14.           {{item.viewValue}}
  15.         &lt;/mat-option&gt;
  16.       &lt;/mat-select&gt;
  17.     &lt;/mat-form-field&gt;
  18.   &lt;/div&gt;

huangapple
  • 本文由 发表于 2023年5月30日 00:30:38
  • 转载请务必保留本文链接：https://go.coder-hub.com/76358942.html
  • angular
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定