DeborahK/Angular-Routing

APM-Start - product.description not defined

Closed this issue · 4 comments

In APM-Start, the following reference on line 70 in file product-edit-info.component.html is undefined:
[(ngModel)] = product.description
Is that by design so it can be addressed as part of the "code-along" strategy in Module 3 of your course?

I have taken your APM-Start code and "Angular-CLI'zed" it. When I run:
ng build --verbose --progress --vendor-chunk --extract-css --prod
the above issue is flagged in error:

ERROR in ng:///C:/projects/APM-routed/src/app/products/product-edit-info.component.html (71,29): Property 'description' does not exist on type '{ id: number; productName: string; productCode: string; }'. ng:///C:/projects/APM-routed/src/app/products/product-edit-info.component.html (72,29): Property 'description' does not exist on type '{ id: number; productName: string; productCode: string; }'.

If you look at product-edit-info.component.ts, line 14 defines a product that does not contain a description, which is why the reference to that property fails during ng build:
product = { id: 1, productName: 'test', productCode: 'test' };

Further investigation reveals an "unused import" on line 5:
import { IProduct } from './product';

If I change line 14 to the following, the error goes away:
product: IProduct = { id: 1, productName: 'test', productCode: 'test', category: 'test', releaseDate: '2017-01-31', price: 0, description: 'test', starRating: 1, imageUrl: '' };
None of this bothers me if the intent is to fix these issues as part of the course; but, if the intent is that the code for APM-Start is supposed to work, then those of us who (ng) build our Angular apps using Angular-CLI have a lot of clean-up work ahead of us before we can continue with the course.

It may be too late to ask, but would you consider using Angular-CLI to build APM when you use it in future courses? I just finished John Papa's excellent Pluralsight course on Angular-CLI and build all my Angular apps using that tool.

In fact, my "dream course" is one that involves you, Julie Lerman and John Papa combining Angular-CLI, Angular and Entity Framework in one very advanced "best practices" course.

Thank you for the kind words.

I did not use the CLI for this course because this course was completed before the CLI was released on March 24th. The course was released on March 30th, but was completed several weeks before that date.

When I compile without the CLI, I have no errors. I assume that the CLI must be doing some additional checks.

The APM Start files do not use the product-edit-info component nor the product-edit-tags component. They are used much later in the course. Probably the easiest thing to do to get it to compile is just to copy them somewhere else and then delete them from the products folder. Then you can add back the code when it is time to actually incorporate these files.

Make sense?

Yes, I see that the APM-Start that I "started" (pun sort of intended) from may have extra code that is not part of the original APM-Start. I'll try to trim my APM-Start-CLI down to a true "no routing at all" starting point (there's that pun again).

I have found that ng build --prod finds issues that ng build does not, probably because of the tree-shaking and other global optimizations that the former performs that the later does not.

Can we close this issue?

Yes, please close.