Angular code compilation failed after making changes for autocomplete tag in Appstream - AWS Blu Age L3 Workshop

0

While making the following code changes in the angular code, as mentioned in the workshop (step#4), for implementing the “auto-complete” feature, the angular code compilation failed. Refer to error logs: Error Logs

Code changes in comen01-comen1a.component.html

<dynamic-autocomplete [options]='getMenuOptions()' [id]='"option"' [size]=2 [line]=20 [column]=41 [(ngModel)]='option'></dynamic-autocomplete>
<!-- <dynamic-field [id]='"option"' [size]=2 [line]=20 [column]=41 [(ngModel)]='option'></dynamic-field> -->

Code changes in comen01-comen1a.component.ts

 import { Option } from "../../dynamic-field/custom/dynamic-autocomplete.component";
 
 export class OptionImpl implements Option {
    constructor (value: string, label: string) {
        this.value = value
        this.label = label
    }
	value: string;
        label: string;
 }

 getMenuOptions (): Option[] {
        let menuOptions : Option[] = []
        if (this.optn001 && this.optn001.value) menuOptions.push(new OptionImpl("01", this.optn001.value.trim()))
        if (this.optn002 && this.optn002.value) menuOptions.push(new OptionImpl("02", this.optn002.value.trim()))
        if (this.optn003 && this.optn003.value) menuOptions.push(new OptionImpl("03", this.optn003.value.trim()))
        if (this.optn004 && this.optn004.value) menuOptions.push(new OptionImpl("04", this.optn004.value.trim()))
        if (this.optn005 && this.optn005.value) menuOptions.push(new OptionImpl("05", this.optn005.value.trim()))
        if (this.optn006 && this.optn006.value) menuOptions.push(new OptionImpl("06", this.optn006.value.trim()))
        if (this.optn007 && this.optn007.value) menuOptions.push(new OptionImpl("07", this.optn007.value.trim()))
        if (this.optn008 && this.optn008.value) menuOptions.push(new OptionImpl("08", this.optn008.value.trim()))
        if (this.optn009 && this.optn009.value) menuOptions.push(new OptionImpl("09", this.optn009.value.trim()))
        if (this.optn010 && this.optn010.value) menuOptions.push(new OptionImpl("10", this.optn010.value.trim()))
        if (this.optn011 && this.optn011.value) menuOptions.push(new OptionImpl("11", this.optn011.value.trim()))
        if (this.optn012 && this.optn012.value) menuOptions.push(new OptionImpl("12", this.optn012.value.trim()))
        return menuOptions
    }

NOTE: I am following the Self-Paced Troubleshooting Workshop and am currently at “Improvement >> User Experience”. https://catalog.workshops.aws/aws-blu-age-l3-certification-workshop/en-US/improvement/user-experience

asked a month ago107 views
2 Answers
3
Accepted Answer

Here is the solution file. Maybe your OptionImpl class declaration is after @Component declaration and cause the issue.

import { Component } from '@angular/core';
import { Overlay } from "./../commonMap/overlay";
import { Option } from "../../dynamic-field/custom/dynamic-autocomplete.component";

export class OptionImpl implements Option {

    constructor (value: string, label: string) {
        this.value = value
        this.label = label
    }

	value : string;
    label: string;
}

@Component({
    moduleId: module.id,
    selector: 'comen01-comen1a',
    templateUrl: './comen01-comen1a.component.html'
})
export class Comen01Comen1aComponent extends Overlay {
    trnname: any = {};
    title01: any = {};
    curdate: any = {'value': 'mm\/dd\/yy'};
    pgmname: any = {};
    title02: any = {};
    curtime: any = {'value': 'hh:mm:ss'};
    optn001: any = {};
    optn002: any = {};
    optn003: any = {};
    optn004: any = {};
    optn005: any = {};
    optn006: any = {};
    optn007: any = {};
    optn008: any = {};
    optn009: any = {};
    optn010: any = {};
    optn011: any = {};
    optn012: any = {};
    option: any = {};
    errmsg: any = {};

    public FIELDS: string[] = ['trnname', 'title01', 'curdate', 'pgmname', 'title02', 'curtime', 'optn001', 'optn002', 'optn003', 'optn004', 'optn005', 'optn006', 'optn007', 'optn008', 'optn009', 'optn010', 'optn011', 'optn012', 'option', 'errmsg'];
    public LINES: number[] = [1, 2, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 20, 23, 24];

    ngAfterViewInit(): void {
    }

    getMenuOptions (): Option[] {
        let menuOptions : Option[] = []
        if (this.optn001 && this.optn001.value) menuOptions.push(new OptionImpl("01", this.optn001.value.trim()))
        if (this.optn002 && this.optn002.value) menuOptions.push(new OptionImpl("02", this.optn002.value.trim()))
        if (this.optn003 && this.optn003.value) menuOptions.push(new OptionImpl("03", this.optn003.value.trim()))
        if (this.optn004 && this.optn004.value) menuOptions.push(new OptionImpl("04", this.optn004.value.trim()))
        if (this.optn005 && this.optn005.value) menuOptions.push(new OptionImpl("05", this.optn005.value.trim()))
        if (this.optn006 && this.optn006.value) menuOptions.push(new OptionImpl("06", this.optn006.value.trim()))
        if (this.optn007 && this.optn007.value) menuOptions.push(new OptionImpl("07", this.optn007.value.trim()))
        if (this.optn008 && this.optn008.value) menuOptions.push(new OptionImpl("08", this.optn008.value.trim()))
        if (this.optn009 && this.optn009.value) menuOptions.push(new OptionImpl("09", this.optn009.value.trim()))
        if (this.optn010 && this.optn010.value) menuOptions.push(new OptionImpl("10", this.optn010.value.trim()))
        if (this.optn011 && this.optn011.value) menuOptions.push(new OptionImpl("11", this.optn011.value.trim()))
        if (this.optn012 && this.optn012.value) menuOptions.push(new OptionImpl("12", this.optn012.value.trim()))
        return menuOptions
    }
    
}

AWS
ArnO
answered a month ago
2

Hello,
What I understand from your modifications on the comen01-comen1a.component.ts file is that you put all modifications at the top of the file.
However, the getMenuOptions() method should be added inside the component, after the ngAfterViewInit. The expected skeleton looks like:

import ...
import ...
import { Option } from "../../dynamic-field/custom/dynamic-autocomplete.component";

export class OptionImpl implements Option {
 ...
}

@Component({
    moduleId: module.id,
    selector: 'comen01-comen1a',
    templateUrl: './comen01-comen1a.component.html'
})
export class Comen01Comen1aComponent extends Overlay {
    ...

    ngAfterViewInit(): void {
    }
   
    getMenuOptions (): Option[] {
        let menuOptions : Option[] = []
        if (this.optn001 && this.optn001.value) menuOptions.push(new OptionImpl("01", this.optn001.value.trim()))
        if (this.optn002 && this.optn002.value) menuOptions.push(new OptionImpl("02", this.optn002.value.trim()))
        if (this.optn003 && this.optn003.value) menuOptions.push(new OptionImpl("03", this.optn003.value.trim()))
        if (this.optn004 && this.optn004.value) menuOptions.push(new OptionImpl("04", this.optn004.value.trim()))
        if (this.optn005 && this.optn005.value) menuOptions.push(new OptionImpl("05", this.optn005.value.trim()))
        if (this.optn006 && this.optn006.value) menuOptions.push(new OptionImpl("06", this.optn006.value.trim()))
        if (this.optn007 && this.optn007.value) menuOptions.push(new OptionImpl("07", this.optn007.value.trim()))
        if (this.optn008 && this.optn008.value) menuOptions.push(new OptionImpl("08", this.optn008.value.trim()))
        if (this.optn009 && this.optn009.value) menuOptions.push(new OptionImpl("09", this.optn009.value.trim()))
        if (this.optn010 && this.optn010.value) menuOptions.push(new OptionImpl("10", this.optn010.value.trim()))
        if (this.optn011 && this.optn011.value) menuOptions.push(new OptionImpl("11", this.optn011.value.trim()))
        if (this.optn012 && this.optn012.value) menuOptions.push(new OptionImpl("12", this.optn012.value.trim()))
        return menuOptions
    }
}
AWS
Damien
answered a month ago
  • No, it is not exactly the way I have put it here. I just wanted to highlight the component that I have added into the file. Rather, it is just the way you have suggested here.

    import { Component, Inject } from '@angular/core';
    import { Overlay } from "./../commonMap/overlay";
    import { Option } from "../../dynamic-field/custom/dynamic-autocomplete.component";
    
    (...)
    
    export class OptionImpl implements Option {
    
        constructor (value: string, label: string) {
            this.value = value
            this.label = label
        }
    
    	value: string;
        label: string;
    }
    
    
    export class Comen01Comen1aComponent extends Overlay {
    
    	(...)
    
        ngAfterViewInit(): void {
        }
        
        getMenuOptions (): Option[] {
            let menuOptions : Option[] = []
            if (this.optn001 && this.optn001.value) menuOptions.push(new OptionImpl("01", this.optn001.value.trim()))
            if (this.optn002 && this.optn002.value) menuOptions.push(new OptionImpl("02", this.optn002.value.trim()))
            (...)
            if (this.optn012 && this.optn012.value) menuOptions.push(new OptionImpl("12", this.optn012.value.trim()))
            return menuOptions
        }
    
    }
    
  • I missed the most important part when writing the skeleton, the decorator part:

    @Component({
        moduleId: module.id,
        selector: 'comen01-comen1a',
        templateUrl: './comen01-comen1a.component.html'
    })
    

    I updated my first answer. Is it this part which is missing on your side?

  • The decorator part was there but the sequence was incorrect, as pointed out in the previous comment. Thank you for the assistance.

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions