module: https://app.pluralsight.com/projects/build-an-album-store-product-page-with-angular/displaying-a-list-of-products

issue: Users cannot currently pass Task 1 of the sixth module Displaying a List of Products

• due to there being no module with test tag @product-list-component-created
• the test it seems which was intended to match up with Task 1 is src/spec/mocha-specs/part6/product-list-component-created.spec.js
• affected at least three users (Rodrigo, two in Support with ticket #s 636190 and 634293 , and I could reproduce)

Suggested fix:

• PR #79
• do note I based this on src/spec/mocha-specs/part6/product-interface-exists.mocha.spec.js
• I did try and it works, and it worked for Rodrigo and at least one of the other users, but I'm not sure if my fix is the best approach,

Looks like one requirement to play this project locally is to install the Angular CLI:

npm install -g @angular/cli

I'm thinking we should add a bit about that in the setup markdown within the "Verify Local Environment" step.

Maybe we can add a line before Installation that tells the user to open the terminal and navigate to the root of the recently cloned project and run a few commands in there.

Hi,

I getting below error while completing chapter 3 of this project:

After checking error stack trace in google console, then I found error was in below code:

ngOnInit() { this._productService.getAlbum(1).subscribe(response => this.albumInfo = response); }

Please let me know what's wrong in the code.

Thanks,

I can and will flesh this one out if needed.

Not currently the highest priority, but ideal to improve upon. Just for now recording so a fix along these lines can be considered upon a Project update.

Reported by a user (and I have noticed prior and kept in the back of my mind until reported):

https://app.pluralsight.com/projects/build-an-album-store-product-page-with-angular/discussion#comment-4565778362

if you import with extensions, you often end up with 'app/somepart.ts' instead of for example '../somepart.ts'

I believe they're correct at least at times as the check is just a string comparison. Improving upon that and making it smarter, or at least checking for both types of paths would be great.

Whenever I run ng generate component product-description, I get the following:

Your global Angular CLI version (1.6.2) is greater than your local
version (1.4.7). The local Angular CLI version is used.

To disable this warning use "ng set --global warnings.versionMismatch=false".
input.mergeMap is not a function
TypeError: input.mergeMap is not a function
at Object.callRule (C:\Angular\Angular-AlbumStoreProductPage\node_modules@angular-devkit\schematics\src\rules\call.js:78:18)
at SchematicImpl.call (C:\Angular\Angular-AlbumStoreProductPage\node_modules@angular-devkit\schematics\src\engine\schematic.js:35:23)
at Promise (C:\Angular\Angular-AlbumStoreProductPage\node_modules@angular\cli\tasks\schematic-run.js:77:23)
at Class.run (C:\Angular\Angular-AlbumStoreProductPage\node_modules@angular\cli\tasks\schematic-run.js:76:16)
at Class.run (C:\Angular\Angular-AlbumStoreProductPage\node_modules@angular\cli\commands\generate.js:149:33)
at resolve (C:\Angular\Angular-AlbumStoreProductPage\node_modules@angular\cli\ember-cli\lib\models\command.js:261:20)
at Class.validateAndRun (C:\Angular\Angular-AlbumStoreProductPage\node_modules@angular\cli\ember-cli\lib\models\command.js:240:12)
at Promise.resolve.then.then (C:\Angular\Angular-AlbumStoreProductPage\node_modules@angular\cli\ember-cli\lib\cli\cli.js:140:24)
at process._tickCallback (internal/process/next_tick.js:109:7)

Most of the packages has been deprecated like (http, response ) and lot more which affected the projects completion.

From @meglkts

Meg - do we want filenames in code syntax or any other highlighting? TG2:T1
general consistency in using code markdown. files, components, etc

For now, we chatted on Slack about wrapping these as code items with backticks (file names, etc).

Any issues for part 1. I'll be tracking on more things here as I encounter them, and removing things as I realize they're all actually just my fault 😅

Part 2

Starting State

Issues when you submit the code in it's starting state.

• Task 5, Setting the Font Styles in the description - returns the error Failed: undefined is not an object (evaluating 'token.charAt')
• Task 5, Setting image styles in the description - returns the error Failed: undefined is not an object (evaluating 'token.charAt')

Edited State

• Would it be possible to create a general error message when there's invalid html? I made a commit with a tag referenced, but without a closing tag. Tasks 1, 3, 4 all give the error Failed: Template parse errors:. Looks like there's more info available that we might be able to include.
• In Part 1, task 5, the instructions mention setting the "font" to Helvetica. This should be "font-family". The tests work if you use font-family. If both work, then feel free to close this one. Otherwise the answer video would need to be recorded to use font-family too.

Part 3 - Creating a Service to Get Album Data

Starting State

• In subproject 2, task "Inject The Service Into Product Description’s Constructor" showed up as complete before writing any code. (GR)
• Change images URLs from codeschool.com to relative images. There are 2 links in the project to codeschool.com. Can we change these to be relative links and store the image in the assets folder? (A)

Edited State

• I completed the project, it passed on the website, but I was still getting 1 failed test. Nothing in Part 3 asked for creating a getProducts method ( I do see that's a task in project 6 - "Displaying a List of Products" though). Looks like one test might just need to be removed that's being called here too early. (A)

  ProductService
    ✗ should map the result of get request to json with rxjs map function @product-service-getproducts-method-maps-response-to-json (471ms)
	Failed: product_service.getProducts is not a function

the following assertion error is called.

Since in Angular 5 the map method is part of the pipe, I changed the getAlbum method as follows.

  getAlbum(id: number): Observable<Album> {
    return this._http.get(this._albumUrl).pipe(map(response => <Album>response.json()));
  }

But this causes the error mentioned above. I can not finish the course 100% due to this error.

I run npm install on git bash and i don't see the progress, I see the node_modules folder created but as soon as it finishes "packaging" the folder disappears. I tried in the vs code terminal, I started seeing the packaging progress bar but same result at the end:(

When submitting tasks one at a time, Task 4 will throw a non-custom message when the previous task was correct and task 4 isn't yet.

I am not able to get a successful build after running npm install.

Definition for npm script within the package.json included in the repo is:

"test:part2": "./node_modules/.bin/mocha ./src/spec/mocha-specs/part2/ --recursive --reporter spec & ng test --single-run --part part2"

However, this folder is not included in the repo at the specified location. Running the npm run test:part2 command therefore results in the following error:

Warning: Could not find any test files matching pattern: ./src/spec/mocha-specs/part2/
No test files found

It is possible to work around this issue by running the full test suite using ng test from the root repo folder, though this is sub-optimal as it is then necessary to scroll up through other unit tests to find the one relevant to the course module.

Perhaps we can remind the user that Angular components need a closing tag, differently than React, otherwise they will get a passing error in files where there are more html elements.

For example, <app-product-description></app-product-description> if written only as <app-product-description>, will throw a parsing error in the console of http://localhost:4200/ and it will throw a parsing error in Projects if user add, commit and pushes this code.

Not sure if it's if the issue is with the Angular project or with tutor...

But, I tested submitting a task when it was wrong and I got one error message. I solved that message, but did not submit a complete correct answer again. So, I got the second error message.
Once I solved that and submitted the correct code, the task does not validate my answer. It looks like it's overwritten somewhere in Angular.

This task should pass now:

Getting this error: Failed: Cannot read property 'subscribe' of undefined instead of a helpful message.

This test fails when a type annotation is present on this line for response

Step 3, Task 12

This is something down the line after we get any additional assets from Sams team, but wanted to make sure we had an issue for it here:

• Part 1
• Part 2
• Part 3
• Part 4
• Part 5
• Part 6

Part 6, task 6 and task 10 will fail if in product-list.component we declare products: Product[] but we have not given this type in getProducts(): Observable<Product[]> inside product.service.ts.

  getProducts(): Observable<Product> {
    return this._http.get(this._productsUrl).map(response => <Product>response.json())
  }

summary: npm audit, by default npm install show issues include the follow critical issues

• growl: https://nodesecurity.io/advisories/146
• electron: https://nodesecurity.io/advisories/563
• not critical in this case as run locally, but best to mention this to user

Description: With npm 6, when you run npm install (with a default configuration), or run npm audit, the following critical security issues are mentioned in the output

• growl: https://nodesecurity.io/advisories/146
• electron: https://nodesecurity.io/advisories/563

Fix: tricky, as would involve changing the server-side environment I believe, although it doesn't seem to be a breaking change at least (see below)

Alternative to fix is to mention in description to just run things locally.

To fix, can upgrade the package.json to the following

• upgrade to [email protected] (fixes growl issue, as growl is a dependency of mocha)
• upgrade [email protected] (fixes electron issue, as electron is a dependency of karma-nightmare)
• did test locally, see https://github.com/snychka/Angular-AlbumStoreProductPage/tree/upgrade-mocha-nightmare, and no breaking changes it seems (although do note https://boneskull.com/mocha-v4-nears-release/)

@jonfriskics let me know who else to github-ping, and/or let me know if you want me to create a PR

• Module 1 The Product Description Component
• Module 2 Creating a Service to Get Album Data
• Module 3 Using Interfaces to Describe Data
• Module 4 Adding the Tracklisting Component
• Module 5 Displaying a List of Products
• Module 6 Creating Navigation using the Angular Router

Should be ../ not ./

Module/Part: 6 Displaying a List of Products

issue:

• in product.service.ts' getProducts, a space before response.json() incorrectly causes a failure
•  

  getProducts(): Observable<Product[]>{
    return this._http.get(this._productsUrl).map((response) => <Product[]> response.json());
  }
  

• when run locally with npm run test:part6, the fails on this non-karma mocha test:

  1) ProductService getProducts Method should map response json to Product[] @product-service-getproducts-method-returns-typed-observable:
     AssertionError: The `getProducts()` response JSON isn't asserted as type `Product[]`.
      at Context.<anonymous> (src/spec/mocha-specs/part6/product-service-getproducts-method-returns-typed-observable.mocha.spec.js:35:5)
  

fix: can change regex to check for 0 or more spaces

notes:

• holler, and I can create a PR
• noticed in Discussion tab when I was helping user Jay on October 13th 2018
• Jay mentioned it results in a failure on Task 13

Not a great description, can flesh out if needed, just recording in case this can be fixed up upon a Project update.

Not the highest priority. I notice a lot, as I constantly help users, but my workflow is unique. Did have a report of this -- support ticket # 662531 -- so recording a roughly-described issue.

Module 6's, https://app.pluralsight.com/projects/build-an-album-store-product-page-with-angular/displaying-a-list-of-products , task 17 "Displaying The ProductListComponent", tag @app-product-list-selector

fails on a complete solution, or a solution that passed Module 7

Makes sense, but ideal to design the tests somehow so that if al of module 7 passes then the failure for module 6 isn't recorded. Or redesign? Not sure how best to do that, but I can see it confusing a few users (it did for me initially, anyway)

Following the instructions at https://app.pluralsight.com/projects/build-an-album-store-product-page-with-angular/setup/ does not produce a working project for me.

ng test fails as it cannot find karma:

C:\Users\tomh\Documents\GitHub\Angular-AlbumStoreProductPage>ng test
Cannot find module 'karma' from 'C:\Users\tomh\Documents\GitHub\Angular-AlbumStoreProductPage'
Error: Cannot find module 'karma' from 'C:\Users\tomh\Documents\GitHub\Angular-AlbumStoreProductPage'
    at Function.module.exports [as sync] (C:\Users\tomh\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\resolve\lib\sync.js:58:15)
    at Object.requireProjectModule (C:\Users\tomh\AppData\Roaming\npm\node_modules\@angular\cli\utilities\require-project-module.js:6:28)
    at Promise (C:\Users\tomh\AppData\Roaming\npm\node_modules\@angular\cli\tasks\test.js:24:52)
    at new Promise (<anonymous>)
    at Class.run (C:\Users\tomh\AppData\Roaming\npm\node_modules\@angular\cli\tasks\test.js:23:16)
    at Class.run (C:\Users\tomh\AppData\Roaming\npm\node_modules\@angular\cli\commands\test.js:122:25)
    at resolve (C:\Users\tomh\AppData\Roaming\npm\node_modules\@angular\cli\ember-cli\lib\models\command.js:261:20)
    at new Promise (<anonymous>)
    at Class.validateAndRun (C:\Users\tomh\AppData\Roaming\npm\node_modules\@angular\cli\ember-cli\lib\models\command.js:240:12)
    at Promise.resolve.then.then (C:\Users\tomh\AppData\Roaming\npm\node_modules\@angular\cli\ember-cli\lib\cli\cli.js:140:24)

ng build or ng serve fail with a dependency error:

C:\Users\tomh\Documents\GitHub\Angular-AlbumStoreProductPage>ng serve
You seem to not be depending on "@angular/core". This is an error.

I have followed advice online to resolve this (delete package-lock.json and retry, try npm link and npm update) but the best I can get to is:

C:\Users\tomh\Documents\GitHub\Angular-AlbumStoreProductPage>ng build
Versions of @angular/compiler-cli and typescript could not be determined.
The most common reason for this is a broken npm install.

Please make sure your package.json contains both @angular/compiler-cli and typescript in
devDependencies, then delete node_modules and package-lock.json (if you have one) and
run npm install again.

Following these instructions gets me back to "You seem to not be depending on "@angular/core". This is an error."

From @carolinapowers

Carolina - When submiting one task at a time, task 2 of part 1, where you need to run ng generate component product-description will not pass after running the correct command and generating the correct files.

All of the modules that are in future modules give a bunch of warnings when we run this. Can we

WARNING in ./src/spec/part4/product-tracklisting-html-uses-ngfor-to-enumerate-tracks.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product.service.ts' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part4'
 @ ./src/spec/part4/product-tracklisting-html-uses-ngfor-to-enumerate-tracks.projects.spec.ts 26:21-60
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part4/product-tracklisting-html-uses-track-object-data.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product.service.ts' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part4'
 @ ./src/spec/part4/product-tracklisting-html-uses-track-object-data.projects.spec.ts 21:21-60
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part5/product-list-html-uses-ngfor-to-enumerate-products.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product.service.ts' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part5'
 @ ./src/spec/part5/product-list-html-uses-ngfor-to-enumerate-products.projects.spec.ts 26:21-60
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part5/product-list-ul-contains-li-with-albumnames.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product.service.ts' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part5'
 @ ./src/spec/part5/product-list-ul-contains-li-with-albumnames.projects.spec.ts 26:21-60
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part5/product-service-getproducts-method-maps-response-to-json.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product.service.ts' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part5'
 @ ./src/spec/part5/product-service-getproducts-method-maps-response-to-json.projects.spec.ts 11:21-60
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part5/product-service-getproducts-method-returns-products-json.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product.service.ts' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part5'
 @ ./src/spec/part5/product-service-getproducts-method-returns-products-json.projects.spec.ts 11:21-60
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part2/product-description-html-uses-dynamic-albuminfo-band.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product.service.ts' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part2'
 @ ./src/spec/part2/product-description-html-uses-dynamic-albuminfo-band.projects.spec.ts 21:21-60
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part2/product-description-html-uses-dynamic-albuminfo-imageurl.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product.service.ts' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part2'
 @ ./src/spec/part2/product-description-html-uses-dynamic-albuminfo-imageurl.projects.spec.ts 21:21-60
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part2/product-description-html-uses-dynamic-albuminfo-name.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product.service.ts' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part2'
 @ ./src/spec/part2/product-description-html-uses-dynamic-albuminfo-name.projects.spec.ts 21:21-60
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part2/product-description-html-uses-dynamic-albuminfo-releasedate.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product.service.ts' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part2'
 @ ./src/spec/part2/product-description-html-uses-dynamic-albuminfo-releasedate.projects.spec.ts 21:21-60
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part2/product-service-getalbum-method-maps-response-to-json.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product.service.ts' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part2'
 @ ./src/spec/part2/product-service-getalbum-method-maps-response-to-json.projects.spec.ts 11:21-60
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part2/product-service-getalbum-method-returns-album-json.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product.service.ts' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part2'
 @ ./src/spec/part2/product-service-getalbum-method-returns-album-json.projects.spec.ts 11:21-60
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part6/product-list-anchor-tags-have-routerlink-attribute.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product.service.ts' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part6'
 @ ./src/spec/part6/product-list-anchor-tags-have-routerlink-attribute.projects.spec.ts 21:21-60
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part6/product-list-li-tags-contain-anchor-tags.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product.service.ts' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part6'
 @ ./src/spec/part6/product-list-li-tags-contain-anchor-tags.projects.spec.ts 21:21-60
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part4/product-tracklisting-component-css1.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product-tracklisting/product-tracklisting.component.css' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part4'
 @ ./src/spec/part4/product-tracklisting-component-css1.projects.spec.ts 9:33-109
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part4/product-tracklisting-component-css2.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product-tracklisting/product-tracklisting.component.css' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part4'
 @ ./src/spec/part4/product-tracklisting-component-css2.projects.spec.ts 9:33-109
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part4/product-tracklisting-component-css3.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product-tracklisting/product-tracklisting.component.css' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part4'
 @ ./src/spec/part4/product-tracklisting-component-css3.projects.spec.ts 9:33-109
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part4/product-tracklisting-component-css4.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product-tracklisting/product-tracklisting.component.css' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part4'
 @ ./src/spec/part4/product-tracklisting-component-css4.projects.spec.ts 9:33-109
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part4/product-tracklisting-html-uses-ngfor-to-enumerate-tracks.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product-tracklisting/product-tracklisting.component.html' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part4'
 @ ./src/spec/part4/product-tracklisting-html-uses-ngfor-to-enumerate-tracks.projects.spec.ts 11:11-88
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part4/product-tracklisting-component-created.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product-tracklisting/product-tracklisting.component.ts' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part4'
 @ ./src/spec/part4/product-tracklisting-component-created.projects.spec.ts 7:35-110
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part4/product-tracklisting-html-moved.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product-tracklisting/product-tracklisting.component.ts' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part4'
 @ ./src/spec/part4/product-tracklisting-html-moved.projects.spec.ts 18:35-110
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part4/product-tracklisting-html-uses-ngfor-to-enumerate-tracks.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product-tracklisting/product-tracklisting.component.ts' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part4'
 @ ./src/spec/part4/product-tracklisting-html-uses-ngfor-to-enumerate-tracks.projects.spec.ts 17:35-110
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part4/product-tracklisting-html-uses-track-object-data.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product-tracklisting/product-tracklisting.component.ts' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part4'
 @ ./src/spec/part4/product-tracklisting-html-uses-track-object-data.projects.spec.ts 12:35-110
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part5/product-list-html-uses-ngfor-to-enumerate-products.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product-list/product-list.component.html' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part5'
 @ ./src/spec/part5/product-list-html-uses-ngfor-to-enumerate-products.projects.spec.ts 11:11-72
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part5/product-list-ul-contains-li-with-albumnames.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product-list/product-list.component.html' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part5'
 @ ./src/spec/part5/product-list-ul-contains-li-with-albumnames.projects.spec.ts 11:11-72
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part5/app-product-list-selector.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product-list/product-list.component.ts' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part5'
 @ ./src/spec/part5/app-product-list-selector.projects.spec.ts 10:27-86
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part5/product-list-component-created.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product-list/product-list.component.ts' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part5'
 @ ./src/spec/part5/product-list-component-created.projects.spec.ts 7:27-86
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part5/product-list-html-uses-ngfor-to-enumerate-products.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product-list/product-list.component.ts' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part5'
 @ ./src/spec/part5/product-list-html-uses-ngfor-to-enumerate-products.projects.spec.ts 17:27-86
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part5/product-list-ul-contains-li-with-albumnames.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product-list/product-list.component.ts' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part5'
 @ ./src/spec/part5/product-list-ul-contains-li-with-albumnames.projects.spec.ts 17:27-86
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part6/product-list-anchor-tags-have-routerlink-attribute.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product-list/product-list.component.ts' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part6'
 @ ./src/spec/part6/product-list-anchor-tags-have-routerlink-attribute.projects.spec.ts 12:27-86
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

WARNING in ./src/spec/part6/product-list-li-tags-contain-anchor-tags.projects.spec.ts
Module not found: Error: Can't resolve '../../app/product-list/product-list.component.ts' in '/Users/adamfortuna/Downloads/Angular-AlbumStoreProductPage/src/spec/part6'
 @ ./src/spec/part6/product-list-li-tags-contain-anchor-tags.projects.spec.ts 12:27-86
 @ ./src projects\.spec\.ts
 @ ./src/test.ts

This makes it tough to see what's happening. Can we silence these warnings?

This is a bit stretch of the course, but I would expect the example would build for prod

Ebrus-MacBook-Pro:Angular-AlbumStoreProductPage demokritos$ ng build -prod
Date: 2018-01-15T16:00:17.658Z
Hash: 4d444e196b036530154b
Time: 14285ms
chunk {0} styles.5d370d2e32326232f9d5.bundle.css (styles) 115 kB {3} [initial] [rendered]
chunk {1} polyfills.3bc34265385d52184eab.bundle.js (polyfills) 86 bytes {3} [initial] [rendered]
chunk {2} main.e402deade8b026b7d50e.bundle.js (main) 84 bytes [initial] [rendered]
chunk {3} inline.4d821e06ec2edce61cd7.bundle.js (inline) 1.45 kB [entry] [rendered]

ERROR in /Users/demokritos/work/src/github.com/forkedgithub/Angular-AlbumStoreProductPage/src/$$_gendir/app/product-description/product-description.component.ngfactory.ts (89,112): Property 'album' does not exist on type 'Album'.
ERROR in ng:///Users/demokritos/work/src/github.com/forkedgithub/Angular-AlbumStoreProductPage/src/app/product-description/product-description.component.html (4,5): Property 'album' does not exist on type 'Album'.
ERROR in ng:///Users/demokritos/work/src/github.com/forkedgithub/Angular-AlbumStoreProductPage/src/app/product-description/product-description.component.html (7,27): Property 'artist' does not exist on type 'Album'.
ERROR in ng:///Users/demokritos/work/src/github.com/forkedgithub/Angular-AlbumStoreProductPage/src/app/product-description/product-description.component.html (8,26): Property 'album' does not exist on type 'Album'.
ERROR in /Users/demokritos/work/src/github.com/forkedgithub/Angular-AlbumStoreProductPage/src/$$_gendir/app/product-tracklisting/product-tracklisting.component.ngfactory.ts (124,80): Property 'album' does not exist on type 'Album'.```

From @mikemike26

Mike - Consider lightening the white space linting. It currently doesn't allow for new lines between methods or code blocks.

Summary: In Part 3, Creating a Service to Get Album Data, 3.16 ProductDescription HTML Contains Dynamic Image URL, the following correct answer is not accepted:

<img [src]="albumInfo?.album.coverImage" alt="product image" />

Description: 3.16 requires a change to product-description.component.html, and is too restrictive, and accepts only interpolation: <img src='{{albumInfo?.album.coverImage}}' alt="product image" />

Property binding works in this case, and the following should also be accepted:

<img [src]="albumInfo?.album.coverImage" alt="product image" />

Notes:

• The following errors occur when testing locally via npm run test:part3:
  
  
• They correspond to the following mocha test files:
  

  user ~/GitRepos/Angular-AlbumStoreProductPage/src/app
  > ls ../spec/part3/product-description-html-uses-dynamic-albuminfo-*
  ../spec/part3/product-description-html-uses-dynamic-albuminfo-band.projects.spec.ts
  ../spec/part3/product-description-html-uses-dynamic-albuminfo-imageurl.projects.spec.ts
  ../spec/part3/product-description-html-uses-dynamic-albuminfo-name.projects.spec.ts
  ../spec/part3/product-description-html-uses-dynamic-albuminfo-releasedate.projects.spec.ts
  

• was noticed by Eric in the Discussion tab for the Project on June 13 2018, and here was the change he had to make.

A very unique problem, so not pinging anyone for now, but can see it affecting others so will ping if anyone else reports this.

Getting this error: Failed: Cannot read property 'subscribe' of undefined instead of a helpful message.

Your global Angular CLI version (1.4.4) is greater than your local
version (1.3.2). The local Angular CLI version is used.

To disable this warning use "ng set --global warnings.versionMismatch=false".

It might be worth having them npm install -g @angular/cli@VERSION to prevent this warning.

module: Part 3: Using Interfaces to Describe Data

code:

• src/app/product-description/product-description.component.html
• <img src="{{albumInfo?.album.coverImage}}" alt="product image">

issue: An end tag, <img src="{{albumInfo?.album.coverImage}}" alt="product image" /> is required to pass the Part 3 tests, but no end tag is required by html 5

cause:

• 3 tests in src/spec/part3
• product-description-html-uses-dynamic-albuminfo-band.projects.spec.ts
  product-description-html-uses-dynamic-albuminfo-name.projects.spec.ts
  product-description-html-uses-dynamic-albuminfo-releasedate.projects.spec.ts
• the const htmlDoc = parser.parseFromString(htmlString, 'text/xml'); line

fix: change the code to use text/html:
const htmlDoc = parser.parseFromString(htmlString, 'text/html');

notes:

• Reported and suggested fix by nirouleur in Discussion tab between Sep. 24-25 2018
• tested and it works with ng serve and passes all tests, for both an img element with and without an end tag

I am unable to run npm install / npm i.
No error is thrown, but node_modules doesn't get downloaded either.

Part 3 task 12 fails if user submits code formatted by linter:

It will accept this code inside product-description-component.ts:

  ngOnInit() {
    this._productService.getAlbum(1).subscribe(response => this.albumInfo = response);
  }

But it will fail with this code:

  ngOnInit() {
    this._productService
      .getAlbum(1)
      .subscribe(response => (this.albumInfo = response));
  }

Text in instructions reads:

Before we edit the TypeScript file for this component, open up product-page.component.html and move the div with a class of row tracklisting and all of its children into product-tracklisting.component.html

However, the file with a class value of "row tracklisting" is found in product-description.component.html, not product-page.component.html -- having been moved there during The Product Description Component Part 3 section of the tutorial.

Automatic tests fail with the message that I don't use dynamic data but I definitely use is and if I misspell the property name it would disappear from the details view. Although, it fails just four local tests, the "Check My Work" fails all tests starting 10 telling that "Product Service is not imported" but it obviously wouldn't return any data in this case, isn't it?

At the top of this page, there's a place to add a line of text that shows up in a box at the top of the page. (like the prototype screenshot below). You can add these per-task group.

We'll want to go through and add these for each task group, with the command to run tests for that grouping and any other information you want to convey.

Add theses for all parts

• Part 1
• Part 2
• Part 3
• Part 4
• Part 5
• Part 6

Adding it here, but I also added it to our spread sheet.

Carolina - I think we are missing or not highlighting enough a crucial part of Projects which is having the user adding, committing and pushing their code prior to clicking Check My Work. I think we need to emphasize and remind the user of that. I'm not sure if I came across that information in anywhere.

I am unable to run npm install when initially setting up the project. It would first run for maybe a second then quit. Allowing me to run a new command. I looked online and some recommended removing the package-lock.json file. I deleted that file and now it will run longer but quits during the fetchMetaData stage. No errors are returned during this. I created a test angular project on my desktop and ran npm install to see what happens and it worked without any issues.

Here are the current versions I am running:
NPM: 5.5.1
CLI: 1.5.3
Node: 8.9.1

After spending an hour or so figuring out the npm package issues and then completing the first part of the project committing and pushing. I am now faced with nothing happening when I click Check my work button!

Please rework this tutorial there are multiple npm package issues and this whole first experience was a bust for me!

I cannot check my work after submitting code. I wanted to do this project but it wasn't a good experience.

Is the What We'll Build video final? I was expecting a video that would start by showing what the final state of the app is and then an overall view of the process.