angular-albumstoreproductpage's Issues
deploy live demo on Heroku
Code being overwritten by Angular?
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:
Can we hide warnings when running tests?
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?
Project will not build or run
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."
Can't Check Work
I cannot check my work after submitting code. I wanted to do this project but it wasn't a good experience.
Path to products.json is wrong
Part 3, a lack of an img end tag causes a failure
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
Part 6, fails on space before `response.json()` in getProducts
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
Verify Local Environment Content
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.
prod build fails
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'.```
Typo
Test doesn't take type annotation into account
This test fails when a type annotation is present on this line for response
Module 6 task 17 test fails on Module 7 or complete tests
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)
ng commands give warning about version mismatch
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.
Getting http://localhost:4200/null error
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,
Allow flexible whitespace when using regex to in testing
From @mikemike26
Mike - Consider lightening the white space linting. It currently doesn't allow for new lines between methods or code blocks.
Change all file names and component names to inline markdown
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).
Project not building
I am not able to get a successful build after running npm install.
Review Carolina's update
- 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
add durations to admin
Test fails when linter formats correct code
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));
}
Users cannot pass module 6 task 1
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,
Angular Component Tags
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.
Part 1 Task 4
Cannot generate node_modules file
I am unable to run npm install / npm i.
No error is thrown, but node_modules doesn't get downloaded either.
What We'll Build
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.
Deprecated packages
Most of the packages has been deprecated like (http, response ) and lot more which affected the projects completion.
Try splitting the Service subproject into multiple task groups
Import checks are very restrictive
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):
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.
3.16 does not accept property binding as an answer
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.
Please rework this tutorial multiple npm package issues
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!
@product-service-getalbum-method-returns-album-json
Getting this error: Failed: Cannot read property 'subscribe' of undefined instead of a helpful message.
@product-service-getalbum-method-maps-response-to-json
Getting this error: Failed: Cannot read property 'subscribe' of undefined
instead of a helpful message.
re-run npm install with Node 8.x and updated package.json and package-lock.json
Basics of Check My Work
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.
Incorrect filename specified in Adding the Tracklisting Component Part 2
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.
Add answer video timing for all tasks
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
Cannot Generate Component
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)
Mention installing the Angular CLI in the project setup instructions
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.
npm audit shows critical security issues
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
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
Add RegEx for Product Type
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())
}
Package.json specifies incorrect location for mocha test files
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.
Cannot complete Part 1, task 2 in isolation
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.
NPM install not working
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:(
Add Subproject taskgroup descriptions for each subproject
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
Unable to complete npm install
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
Part 4 Task 8
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.
Beta Notes from Adam
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 usefont-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
add guards against commented lines in RegEx tests
Test fails for product detail template
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?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.