[Feedback]Tons of errors in Angular 12 app

Page: /start/getting-started/data-model/q/integration/angular

Feedback:

Here are the following errors I am seeing initially, I attempted to fix some.

1. Need to move the code from onInit into the constructor.
2. Rrename file, ‘aws-exports.js’ to ‘aws-exports.ts’
3. Assign empty array to class field restaurants: Array<Restaurant> = [];

Error: src/app/app.component.ts:13:10 - error TS2564: Property 'createForm' has no initializer and is not definitely assigned in the constructor.

13   public createForm: FormGroup;
            ~~~~~~~~~~


Error: src/app/app.component.ts:15:3 - error TS2564: Property 'restaurants' has no initializer and is not definitely assigned in the constructor.

15   restaurants: Array<Restaurant>;
     ~~~~~~~~~~~


Error: src/app/app.component.ts:16:3 - error TS7008: Member 'subscription' implicitly has an 'any' type.

16   subscription;
     ~~~~~~~~~~~~


Error: src/app/app.component.ts:29:7 - error TS2322: Type '({ __typename: "Restaurant"; id: string; name: string; description: string; city: string; createdAt: string; updatedAt: string; } | null)[] | null | undefined' is not assignable to type 'Restaurant[]'.
  Type 'undefined' is not assignable to type 'Restaurant[]'.

29       this.restaurants = event.items;
         ~~~~~~~~~~~~~~~~

Error: src/main.ts:5:25 - error TS7016: Could not find a declaration file for module './aws-exports'. '/home/yadav/dev/tmp/amplify-app/src/aws-exports.js' implicitly has an 'any' type.

5 import aws_exports from "./aws-exports";
                          ~~~~~~~~~~~~~~~

After making these changes, there is still one more error I am unable to fix at the moment.

Error: src/app/app.component.ts:26:7 - error TS2322: Type '({ __typename: "Restaurant"; id: string; name: string; description: string; city: string; createdAt: string; updatedAt: string; } | null)[]' is not assignable to type 'Restaurant[]'.
  Type '{ __typename: "Restaurant"; id: string; name: string; description: string; city: string; createdAt: string; updatedAt: string; } | null' is not assignable to type 'Restaurant'.
    Type 'null' is not assignable to type 'Restaurant'.

26       this.restaurants = event.items;
         ~~~~~~~~~~~~~~~~

[wlee221]

Hi @rajinder-yadav, thanks for your detailed feedback! These issues are stemming from Angular 12 enforcing Typescript strict mode by default. I opened up #3606 to provide the necessary updates to the documentation, based on your suggestions (also confirmed locally 🎉 ).

[rajinder-yadav]

Here is the final fix in file app.components.ts, a typecast is required.

    this.api.ListRestaurants().then(event =>  {
      this.restaurants = (event.items as Array<Restaurant>);
    });

Please update the doc and have someone go through everything for Angular 12, the text is out of date and it’s really frustrating to learn like this.