farata / angulartypescript Goto Github PK

My compiler moans regarding https://github.com/Farata/angulartypescript/blob/master/code-samples/Angular7/chapter7/ng-auction/src/app/home/home.component.ts. It seems ObservableMedia is deprecated: angular/flex-layout#989. Do I have to update my code accordingly to be able to follow your book?

I am on Chapter 5 using AM to replace the bootstrap of the book. In search.component.html file, there was an error: Property 'categories' does not exist on type 'SearchComponent'. I have double checked the source code in search.component.ts and app.module.ts and could not find any property named "categories". The only file that defines the "categories" is in the ./shared/product.services.ts while the service creates Product instances. Should we use DI to implement into search.component.ts to let Angular know "categories"? Or, anything I have missed?

In Chapter 7 for Angular 7
import {ObservableMedia} from '@angular/flex-layout';
produce an error: 'flex-layout ' has no exported member 'observablemedia'

Even though there is a link to a list of videos it comes down to a huge presentation video which at this point I can't watch. Can you please provide a link to something shorter or I am looking at a wrong link altogether.

Thanks for the help.

1st: I love & have used your book A LOT!

2nd: I can deal with outdated Angular warnings, but do NOT know how to resolve the following

opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED'
errors. Any ideas? Thanks!

PowerShell 7.2.1
Copyright (c) Microsoft Corporation.

https://aka.ms/powershell
Type 'help' to get help.

PS D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05> ng serve -o
Node.js version v17.0.1 detected.
Odd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https://nodejs.org/en/about/releases/.
Your global Angular CLI version (13.1.2) is greater than your local version (12.0.1). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
⠸ Generating browser application bundles (phase: building)...Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:130:10)
at BulkUpdateDecorator.hashFactory (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\webpack\lib\util\createHash.js:144:18)
at BulkUpdateDecorator.update (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\webpack\lib\util\createHash.js:46:50)
at OriginalSource.updateHash (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\webpack\node_modules\webpack-sources\lib\OriginalSource.js:104:8)
at NormalModule._initBuildHash (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\webpack\lib\NormalModule.js:839:17)
at handleParseResult (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\webpack\lib\NormalModule.js:904:10)
at D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\webpack\lib\NormalModule.js:995:4
at processResult (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\webpack\lib\NormalModule.js:718:11)
at D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\webpack\lib\NormalModule.js:778:5
at D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\loader-runner\lib\LoaderRunner.js:406:3
at iterateNormalLoaders (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\loader-runner\lib\LoaderRunner.js:232:10)
at iterateNormalLoaders (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\loader-runner\lib\LoaderRunner.js:239:10)
at D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\loader-runner\lib\LoaderRunner.js:254:3
at runSyncOrAsync (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\loader-runner\lib\LoaderRunner.js:143:11)
at iterateNormalLoaders (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\loader-runner\lib\LoaderRunner.js:250:2)
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:130:10)
at BulkUpdateDecorator.hashFactory (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\webpack\lib\util\createHash.js:144:18)
at BulkUpdateDecorator.update (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\webpack\lib\util\createHash.js:46:50)
at OriginalSource.updateHash (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\webpack\node_modules\webpack-sources\lib\OriginalSource.js:104:8)
at NormalModule._initBuildHash (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\webpack\lib\NormalModule.js:839:17)
at handleParseResult (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\webpack\lib\NormalModule.js:904:10)
at D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\webpack\lib\NormalModule.js:995:4
at processResult (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\webpack\lib\NormalModule.js:718:11)
at D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\webpack\lib\NormalModule.js:778:5
at D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\loader-runner\lib\LoaderRunner.js:406:3
at iterateNormalLoaders (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\loader-runner\lib\LoaderRunner.js:232:10)
at iterateNormalLoaders (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\loader-runner\lib\LoaderRunner.js:239:10)
at D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\loader-runner\lib\LoaderRunner.js:254:3
at runSyncOrAsync (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\loader-runner\lib\LoaderRunner.js:143:11)
at iterateNormalLoaders (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\loader-runner\lib\LoaderRunner.js:250:2)
⠼ Generating browser application bundles (phase: building)...node:internal/crypto/hash:67
this[kHandle] = new _Hash(algorithm, xofLen);
^

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:130:10)
at BulkUpdateDecorator.hashFactory (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\webpack\lib\util\createHash.js:144:18)
at BulkUpdateDecorator.update (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\webpack\lib\util\createHash.js:46:50)
at OriginalSource.updateHash (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\webpack\node_modules\webpack-sources\lib\OriginalSource.js:104:8)
at NormalModule._initBuildHash (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\webpack\lib\NormalModule.js:839:17)
at handleParseResult (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\webpack\lib\NormalModule.js:904:10)
at D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\webpack\lib\NormalModule.js:995:4
at processResult (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\webpack\lib\NormalModule.js:718:11)
at D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\webpack\lib\NormalModule.js:778:5
at D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\loader-runner\lib\LoaderRunner.js:406:3
at iterateNormalLoaders (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\loader-runner\lib\LoaderRunner.js:232:10)
at iterateNormalLoaders (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\loader-runner\lib\LoaderRunner.js:239:10)
at D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\loader-runner\lib\LoaderRunner.js:254:3
at context.callback (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
at Object.loader (D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05\node_modules\css-loader\dist\index.js:182:3) {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v17.0.1
PS D:\Projects\Angular\Angular-Projects-Second-Edition\Chapter05>

Using Angular 12
and have "strict Mode" turned on ... while generating my app.

Getting these errors

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

12 product: Product;
~~~~~~~

Error: src/app/product-item/product-item.component.ts:11:12 - error TS2564: Property 'product' has no initializer and is not definitely assigned in the constructor.

11 @input() product: Product;
~~~~~~~

Error: src/app/shared/product.service.ts:29:5 - error TS2322: Type '{ id: number; title: string; price: number; rating: number; description: string; categories: string[]; } | undefined' is not assignable to type 'Product'.
Type 'undefined' is not assignable to type 'Product'.

29 return products.find(p => p.id === productId);
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

My code is exactly identlcal to what is on the github site (as far as I can see)

I do not find a products.find () method anywhere
also get errors about "product" being undefined.

Please help!

Ch7, in home.component.ts:

constructor(private media: MediaObserver, private productService: ProductService) {
    this.products$ = this.productService.getAll();

    this.columns$ = this.media.asObservable()
      .pipe(
         map(mc => <number>this.breakpointsToColumnsNumber.get(mc.mqAlias))
       );
  }

mc.mqAlias gives the error: Property 'mqAlias' does not exist on type 'MediaChange[]'.

The navbar is not working, I copied the code from the repository but the navbar is just text instead of a navbar like this:

ngAuction
Home (current)
About
Services
Find productsPlace order
Pay
search works!

footer works!

I checked my angular.json styles and scripts and they are exactly what you have, I'm using angular 8 and bootstrap 4.3.1 though, I know there are issues with bootstrap and angular should i just switch to ng-bootstrap? Or do you have a work around? Really enjoying the book so far though, thanks!