ultimatecourses / angular-pro-src Goto Github PK

I tried to run npm install on several projects of this repository. I did this on a Mac so I had to install XCode and other stuff - and finally, npm install still gives an error:

gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/Users/christian/Git/ultimatecourses/angular/angular-pro-src/03-projecting-components/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (events.js:315:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:277:12)
gyp ERR! System Darwin 20.6.0
gyp ERR! command "/usr/local/bin/node" "/Users/christian/Git/ultimatecourses/angular/angular-pro-src/03-projecting-components/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Users/christian/Git/ultimatecourses/angular/angular-pro-src/03-projecting-components/node_modules/node-sass
gyp ERR! node -v v14.15.4
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
Build failed with error code: 1
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=0.10.0 <7"} (current: {"node":"14.15.4","npm":"6.14.10"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR! 

This repository really seems outdated. How can I follow the course with the code?

node -v = 8.9.1
tried deleting node modules and reinstalling and did not work

any idea? Thanks!

in the store.ts

get value() {
return this.subject.value;
}

if the component mutates the value received via this property (for example via a developer mistake), we actually mutate our store !
this is because your store's data is kept in the behaviorSubject .

isnt it better to keep an additional separate private property that will hold our store data.
and in the

set(name: string, state: any) {
this.subject.next({
...this.value, [name]: state
});
}

instead of using 'this.value' (which could have been mutated), we use that private property (and also update it during this process, to have the latest store data).

There seems to be a problem with sass on windows environments.

Here is my console output for yarn install:
D:\Source\Courses\angular-pro-routing>yarn install
yarn install v1.22.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
error D:\Source\Courses\angular-pro-routing\node_modules\node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments:
Directory: D:\Source\Courses\angular-pro-routing\node_modules\node-sass
Output:
Building: C:\Program Files\nodejs\node.exe D:\Source\Courses\angular-pro-routing\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli 'C:\Program Files\nodejs\node.exe',
gyp verb cli 'D:\Source\Courses\angular-pro-routing\node_modules\node-gyp\bin\node-gyp.js',
gyp verb cli 'rebuild',
gyp verb cli '--verbose',
gyp verb cli '--libsass_ext=',
gyp verb cli '--libsass_cflags=',
gyp verb cli '--libsass_ldflags=',
gyp verb cli '--libsass_library='
gyp verb cli ]
gyp info using [email protected]
gyp info using [email protected] | win32 | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb which failed Error: not found: python2
gyp verb which failed at getNotFoundError (D:\Source\Courses\angular-pro-routing\node_modules\which\which.js:13:12)
gyp verb which failed at F (D:\Source\Courses\angular-pro-routing\node_modules\which\which.js:68:19)
gyp verb which failed at E (D:\Source\Courses\angular-pro-routing\node_modules\which\which.js:80:29)
gyp verb which failed at D:\Source\Courses\angular-pro-routing\node_modules\which\which.js:89:16
gyp verb which failed at D:\Source\Courses\angular-pro-routing\node_modules\isexe\index.js:44:5
gyp verb which failed at D:\Source\Courses\angular-pro-routing\node_modules\isexe\windows.js:29:5
gyp verb which failed at FSReqCallback.oncomplete (fs.js:158:21)
gyp verb which failed python2 Error: not found: python2
gyp verb which failed at getNotFoundError (D:\Source\Courses\angular-pro-routing\node_modules\which\which.js:13:12)
gyp verb which failed at F (D:\Source\Courses\angular-pro-routing\node_modules\which\which.js:68:19)
gyp verb which failed at E (D:\Source\Courses\angular-pro-routing\node_modules\which\which.js:80:29)
gyp verb which failed at D:\Source\Courses\angular-pro-routing\node_modules\which\which.js:89:16
gyp verb which failed at D:\Source\Courses\angular-pro-routing\node_modules\isexe\index.js:44:5
gyp verb which failed at D:\Source\Courses\angular-pro-routing\node_modules\isexe\windows.js:29:5
gyp verb which failed at FSReqCallback.oncomplete (fs.js:158:21) {
gyp verb which failed code: 'ENOENT'
gyp verb which failed }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb which failed Error: not found: python
gyp verb which failed at getNotFoundError (D:\Source\Courses\angular-pro-routing\node_modules\which\which.js:13:12)
gyp verb which failed at F (D:\Source\Courses\angular-pro-routing\node_modules\which\which.js:68:19)
gyp verb which failed at E (D:\Source\Courses\angular-pro-routing\node_modules\which\which.js:80:29)
gyp verb which failed at D:\Source\Courses\angular-pro-routing\node_modules\which\which.js:89:16
gyp verb which failed at D:\Source\Courses\angular-pro-routing\node_modules\isexe\index.js:44:5
gyp verb which failed at D:\Source\Courses\angular-pro-routing\node_modules\isexe\windows.js:29:5
gyp verb which failed at FSReqCallback.oncomplete (fs.js:158:21)
gyp verb which failed python Error: not found: python
gyp verb which failed at getNotFoundError (D:\Source\Courses\angular-pro-routing\node_modules\which\which.js:13:12)
gyp verb which failed at F (D:\Source\Courses\angular-pro-routing\node_modules\which\which.js:68:19)
gyp verb which failed at E (D:\Source\Courses\angular-pro-routing\node_modules\which\which.js:80:29)
gyp verb which failed at D:\Source\Courses\angular-pro-routing\node_modules\which\which.js:89:16
gyp verb which failed at D:\Source\Courses\angular-pro-routing\node_modules\isexe\index.js:44:5
gyp verb which failed at D:\Source\Courses\angular-pro-routing\node_modules\isexe\windows.js:29:5
gyp verb which failed at FSReqCallback.oncomplete (fs.js:158:21) {
gyp verb which failed code: 'ENOENT'
gyp verb which failed }
gyp verb could not find "python". checking python launcher
gyp verb could not find "python". guessing location
gyp verb ensuring that file exists: C:\Python27\python.exe
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack at failNoPython (D:\Source\Courses\angular-pro-routing\node_modules\node-gyp\lib\configure.js:449:14)
gyp ERR! stack at D:\Source\Courses\angular-pro-routing\node_modules\node-gyp\lib\configure.js:404:11
gyp ERR! stack at D:\Source\Courses\angular-pro-routing\node_modules\graceful-fs\polyfills.js:284:29
gyp ERR! stack at FSReqCallback.oncomplete (fs.js:158:21)
gyp ERR! System Windows_NT 10.0.17763
gyp ERR! command "C:\Program Files\nodejs\node.exe" "D:\Source\Courses\angular-pro-routing\node_modules\node-gyp\bin\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd D:\Source\Courses\angular-pro-routing\node_modules\node-sass
gyp ERR! node -v v12.13.1
gyp ERR! node-gyp -v v3.4.0
gyp ERR! not ok
Build failed with error code: 1
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

How can I fix this error?
PS: the code is directly checked out from github (47-route-tracing) nothing changed.

Good day Todd,

https://github.com/UltimateAngular/angular-pro-src/blob/238e5d32be47ea57120d42bfab94e40d749e1638/01-content-projection/package.json#L4

Should the description and url not be?

...
"description: "Ultimate Angular: Angular Pro",
...
"url": "[email protected]:UltimateAngular/angular-pro-src.git",
...

cannot get ngTemplateOutletContext to function as depicted in the video.

course: https://app.ultimatecourses.com/course/angular-pro/using-ngtemplateoutlet-with-context

source: https://github.com/ultimatecourses/angular-pro-src/tree/master/19-ngtemplateoutletcontext

Im sorry if this is the wrong place for asking that question but im currently kinda lost.
I just finished with the basic course (which is awesome btw @toddmotto! great way of teaching, loved it!). Now i wanted to continue with the pro course but quickly realized that i encounter quite a few issues, likely due to my missing skills, knowledge and experience.

First of all i also struggled to get the dependencies installed. What finally worked (kinda) was replacing "node-sass" with "sass" in the package.json as per the last comment from 2021 here: ultimatecourses/angular-fundamentals-seed#10 (comment) and then install them with npm install --legacy-peer-deps.
Now i at least see a "Hello" when i browse to localhost:4000 (yay?). I hope i won't encounter other problems now due to switching to another dependency instead further down the line.

So how do i proceed now with the actual course? I would wish for some updated instructions. I struggle to understand the folder structure of that Angular 4 project. Its quite different to an Angular 15 project. There is no CLI available? How does one create new components? Write them out by hand? The first chapter directly starts out with an existing auth-form.component.ts which is not available in the seed project zip file. Naive as i was i thought i just open my terminal and create that component with ng g c auth-form. But then i encounter the following error message:

Error: This command is not available when running the Angular CLI outside a workspace.

I think that's because there actually is NO CLI? I would have wished for at least a short explanation/update on what to do as someone now coming from comfortably using a CLI to generate components (and as someone coming from the basic course using Angular 15). The angular-fundamentals-seed also doesn't contain an angular.json / angular-cli.json file which is (afaik) usually available if a new project is generated?

I hope there is someone out there (if not Todd himself) to help me out to continue with the pro course. I recently bought the Angular Master Bundle and really want to work through all of the chapters and courses :)

Thanks in advance for anyone wanting to help me out!

Hello, I am doing (already bought) the pro course in Ultimate Angular and even that it works (it applies the placeholder, sets the 'email' class and focuses the input, I can't see the shadow-root element in the console.

  ngAfterViewInit() {
    this.renderer.setElementAttribute(this.email.nativeElement, 'placeholder', 'Enter your email address');
    this.renderer.setElementClass(this.email.nativeElement, 'email', true);
    this.renderer.invokeElementMethod(this.email.nativeElement, 'focus');
    // this.email.nativeElement.setAttribute('placeholder', 'Enter your email address');
    // this.email.nativeElement.classList.add('email');
    // this.email.nativeElement.focus();
    if (this.message) {
      // setTimeout(() => {
        this.message.forEach((message) => {
          message.days = 30;
        });
        this.cd.detectChanges();
      // })
    }
  }

Thanks

EDITED
I've been working my way through the course, starting with the first folder of a section and building it out along with the lessons, everything working as expected. Then about halfway through lesson 47-router-tracing, I started getting the following error after the hot-reload triggered after a save:

client?11a9:119 Cannot determine the module for class AppComponent in C:\Users\Allende\Desktop\Dev\tutorials\angular-pro-src\47-route-tracing\app\app.component.ts! Add AppComponent to the NgModule to fix it.

Everything works until the first hot-reload then I get the same error, regardless of what I change, even just adding a word to an HTML template. If I stop the server and restart, it works again until the next hot-reload.

This only happens in folders after 46-async-custom-validators, I have retested and can confirm this.

Notes:

• Setup:
  yarn add node-sass -D
yarn install
yarn start
• From the beginning I have had to yarn install node-sass -D separately, I get build errors if I don't. Until lesson 47 this wasn't an issue.
• After a few hot-reloads the terminal running the server freezes
• Tried upgrading dependencies to latest and got compiler._compileSrcFile is not a function error
• Reforked the repository, no change
• I forked the angular-pro-app-seed and I don't have the same issues.
• Environment:
  • Windows 10
  • node 8.2.1,
  • yarn 0.27.5 initially and then upgraded to 1.1 locally and globally
  • VS Code 1.16.1

Thank you for this great course I've learned a lot and am anxious to finish. Any help would be much appreciated.

while starting yarn in 31-componentizing-formgroups , local host is not loading , by inspecting i get the below error in console. But the index.js file does exist.
Please assist i am stuck.
Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open 'C:\Users\navas\Desktop\angular-pro-src-master\32-binding-formcontrols-select\node_modules\webpack-dev-server\client\index.js'
at Object../node_modules/webpack-dev-server/client/index.js?http:/localhost:4000 (app.js:2121)
at webpack_require (app.js:660)
at fn (app.js:84)
at Object.9 (app.js:2205)
at webpack_require (app.js:660)
at app.js:709
at app.js:712

The Pro course has some of the same issues on Windows as does the seed course, so it would be helpdul to link the github issues page with the fix(es) for this(ultimatecourses/angular-fundamentals-seed#10) for folks who did not also purchase the Basics course, to minimize frustration and time searching for this issue.

I started to get this error starting from chapter 56-lazy-loading

I just installed dependencies and run npm run start

Error that occurs on runtime was

bootstrap e6c8b6c…:708 Uncaught
ZoneAwareError {__zone_symbol__error: Error: Cannot find module "./ngfactory/app/app.module.ngfactory"
at Object../main.ts (http://loc…, …}
message: (...)
name: (...)
originalStack: (...)
stack: (...)
toSource: ƒ ()
toString: ƒ ()
zoneAwareStack: (...)
__zone_symbol__error: Error: Cannot find module "./ngfactory/app/app.module.ngfactory" at Object../main.ts (http://localhost:4000/build/app.js:719:7) [] at webpack_require (http://localhost:4000/build/app.js:660:30) [] at fn (http://localhost:4000/build/app.js:84:20) [] at Object.5 (http://localhost:4000/build/app.js:11049:18) [] at webpack_require (http://localhost:4000/build/app.js:660:30) [] at ./main.ts.Object.defineProperty.value (http://localhost:4000/build/app.js:709:37) [] at http://localhost:4000/build/app.js:712:10 []
get message: ƒ ()
set message: ƒ (value)
get name: ƒ ()
set name: ƒ (value)
get originalStack: ƒ ()
set originalStack: ƒ (value)
get stack: ƒ ()
set stack: ƒ (value)
get zoneAwareStack: ƒ ()
set zoneAwareStack: ƒ (value)
proto: Object

There is no app.module.ngfactory.ts created as well.

Thanks