ultimatecourses / angular-pro-src Goto Github PK
View Code? Open in Web Editor NEWSource code for the "Angular Pro" course.
Home Page: https://ultimatecourses.com
Source code for the "Angular Pro" course.
Home Page: https://ultimatecourses.com
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.
Good day Todd,
Should the description and url not be?
... "description: "Ultimate Angular: Angular Pro", ... "url": "[email protected]:UltimateAngular/angular-pro-src.git", ...
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.
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!
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
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:
yarn add node-sass -D
yarn install
yarn start
yarn install node-sass -D
separately, I get build errors if I don't. Until lesson 47 this wasn't an issue.compiler._compileSrcFile is not a function
errorThank you for this great course I've learned a lot and am anxious to finish. Any help would be much appreciated.
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
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
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?
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).
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.