Code Monkey home page Code Monkey logo

angular-course's Introduction

Angular Core Deep Dive (Video Course)

This repository contains the code of the Angular Core Deep Dive.

This course repository is updated to Angular 18:

Angular Core Deep Dive

Installation pre-requisites

IMPORTANT: Please use Node 18 LTS (Long Term Support version).

Installing the Angular CLI

With the following command the angular-cli will be installed globally in your machine:

npm install -g @angular/cli

How To install this repository

We can install the master branch using the following commands:

git clone https://github.com/angular-university/angular-course.git

This repository is made of several separate npm modules, that are installable separately. For example, to run the au-input module, we can do the following:

cd angular-course
npm install

Its also possible to install the modules as usual using npm:

npm install

NPM 5 or above has the big advantage that if you use it you will be installing the exact same dependencies than I installed in my machine, so you wont run into issues caused by semantic versioning updates.

This should take a couple of minutes. If there are issues, please post the complete error message in the Questions section of the course.

To Run the Development Backend Server

In order to be able to provide realistic examples, we will need in our playground a small REST API backend server. We can start the sample application backend with the following command:

npm run server

This is a small Node REST API server.

To run the Development UI Server

To run the frontend part of our code, we will use the Angular CLI:

npm start

The application is visible at port 4200: http://localhost:4200

Important

This repository has multiple branches, have a look at the beginning of each section to see the name of the branch.

At certain points along the course, you will be asked to checkout other remote branches other than master. You can view all branches that you have available remotely using the following command:

git branch -a

The remote branches have their starting in origin, such as for example 1-navigation-and-containers.

We can checkout the remote branch and start tracking it with a local branch that has the same name, by using the following command:

  git checkout -b section-1 origin/1-navigation-and-containers

It's also possible to download a ZIP file for a given branch, using the branch dropdown on this page on the top left, and then selecting the Clone or Download / Download as ZIP button.

Other Courses

Modern Angular With Signals

If you are looking for the Modern Angular With Signals Course, the repo with the full code can be found here:

Modern Angular With Signals Course

RxJs In Practice Course

If you are looking for the RxJs In Practice Course, the repo with the full code can be found here:

RxJs In Practice Course

NgRx In Depth Course

If you are looking for the NgRx In Depth Course, the repo with the full code can be found here:

NgRx In Depth Course

Angular PWA Course

If you are looking for the Angular PWA Course, the repo with the full code can be found here:

Angular PWA Course - Build the future of the Web Today

Angular Security Masterclass

If you are looking for the Angular Security Masterclass, the repo with the full code can be found here:

Angular Security Masterclass.

Angular Security Masterclass

Angular Advanced Library Laboratory Course

If you are looking for the Angular Advanced Course, the repo with the full code can be found here:

Angular Advanced Library Laboratory Course: Build Your Own Library.

Angular Advanced Library Laboratory Course: Build Your Own Library

RxJs and Reactive Patterns Angular Architecture Course

If you are looking for the RxJs and Reactive Patterns Angular Architecture Course code, the repo with the full code can be found here:

RxJs and Reactive Patterns Angular Architecture Course

RxJs and Reactive Patterns Angular Architecture Course

Angular Ngrx Reactive Extensions Architecture Course

If you are looking for the Angular Ngrx Reactive Extensions Architecture Course code, the repo with the full code can be found here:

Angular Ngrx Reactive Extensions Architecture Course

Github repo for this course

Angular Ngrx Course

Angular 2 and Firebase - Build a Web Application Course

If you are looking for the Angular 2 and Firebase - Build a Web Application Course code, the repo with the full code can be found here:

Angular 2 and Firebase - Build a Web Application

Github repo for this course

Angular firebase course

Complete Typescript 2 Course - Build A REST API

If you are looking for the Complete Typescript 2 Course - Build a REST API, the repo with the full code can be found here:

https://angular-university.io/course/typescript-2-tutorial

Github repo for this course

Complete Typescript Course

angular-course's People

Contributors

angular-academy-devs avatar jhades avatar philipszdavido avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

angular-course's Issues

your code not working as per expect

I am facing issue your code

ERROR Error: NG02200: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables, such as Arrays. Did you mean to use the keyvalue

vulnerabilities and other warnings in dependencies

The vulnerabilities and other dependency warnings should be fixed by upgrading the dependencies:

$ npm install
npm WARN deprecated [email protected]: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: request has been deprecated, see request/request#3142
npm WARN deprecated [email protected]: V0 is gone and the best V1 polyfill is now @ungap/custom-elements
npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: TSLint has been deprecated in favor of ESLint. Please see palantir/tslint#4534 for more information.
npm WARN deprecated [email protected]: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.

added 1180 packages, and audited 1181 packages in 35s

92 packages are looking for funding
run npm fund for details

11 vulnerabilities (9 moderate, 2 high)

To address all issues, run:
npm audit fix

Run npm audit for details.

Wrong narration in angular beginner's course and completely skips some sections

Angular's beginners course lesson - injectable services describes the course as angular deep dive course. Also the previous lesson has the course card component developed but not the course-image component. it doesn't describe how to do that and directly skips to a lesson where we see course-image component in the template. Even though learned developers will know how it works and how it came there there has to be some explaination.
Please remember we This is a paid course and as paid users we want flawless experience.

  1. so code and description in the video doesnt match.
  2. narration talks about altogether different course
  3. no mention of some sections.
  4. also in previous to previous lesson ends with comment that we will learn ng-container which never is described in this course.?
    Why so much errors?

The tests highlighted.directive.spec.ts and ngx-useless.directive.spec.ts won't compile

Expectation: Running the tests with npm test works.

Actual: The test file highlighted.directive.spec.ts currently looks like this on master:

import { HighlightedDirective } from './highlighted.directive';

describe('HighlightedDirective', () => {
  it('should create an instance', () => {
    const directive = new HighlightedDirective();
    expect(directive).toBeTruthy();
  });
});

However, the only constructor of HighlightedDirective has a non-optional argument:

constructor(private coursesService: CoursesService) {

    console.log('coursesService highlighted ' + coursesService.id);

}

A similar problem exists with ngx-useless.directive.spec.ts and ngx-useless.directive.ts, here we're missing two parameters:

constructor(private templateRef: TemplateRef<any>,
            private viewContainer: ViewContainerRef) {


}

For this reason, running npm test produces the following error message:

ERROR in src/app/courses/directives/highlighted.directive.spec.ts(5,23): error TS2554: Expected 1 arguments, but got 0.
src/app/courses/directives/ngx-unless.directive.spec.ts(5,23): error TS2554: Expected 2 arguments, but got 0.

npm run sever is not working

C:\Users\home\3-services\3-services>npm run server

[email protected] server
./node_modules/.bin/ts-node -P ./server.tsconfig.json ./server.ts

'.' is not recognized as an internal or external command,
operable program or batch file.

C:\Users\home\3-services\3-services>

How to resolve this issue while using Observable.

How to resolve this issue while using Observable.

ERROR Error: NG02200: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables, such as Arrays. Did you mean to use the keyvalue

Schema validation failed with the following errors: Data path "" must NOT have additional properties(i18nFile).

Hello,

I followed the guide on internationalization and I'm sad to inform you, that it is outdated.
You already updated this repo to angular v13, but the i18n fields in the angular.json don't work anymore since v11.
I tested out your current master, then I also tested out some older commits to find out why it doesn't work.

When you run "ng build -c fr" it fails with the error:
Schema validation failed with the following errors: Data path "" must NOT have additional properties(i18nFile).

Then I tested the same command with commit "77a89a4226cc90e55dd1a8352f2e237b3e78d1b9" labeled "upgrade to angular 12" and I got the same result.

Commit: "88288b6f03384ff1ef916c5310cdd58609908f48" labeled "upgrade to Angular 11 and Node 14" worked, but it told me:

Option "i18nFile" is deprecated: Use 'locales' object in the project metadata instead.
Option "i18nLocale" is deprecated: Use 'localize' instead.

At the start when I was building the fr configuration.

Commit: "ec06a6131bd1c37a95d797002727d7ce6a502a6d" labeled "upgrade to angular 10" also worked, but without warning.

The way Angular handles i18n now is actually through adding locales to the workspace. It is very confusing to me at the moment, so I sadly can't point you to resources that will help you update your course.

npm run server yields the following error

image

C:\Learning\angular-course-3-services-finished>npm run server

[email protected] server
node_modules/.bin/ts-node -P ./server.tsconfig.json ./server.ts

'node_modules' is not recognized as an internal or external command,
operable program or batch file.

I tried editing the "." in package.json "server": "node_modules/.bin/ts-node -P ./server.tsconfig.json ./server.ts".
still the same error.

npm Install Error

Hello,

When cloning the project, and after downgrading to node 16 as directed in the repo, I receive this error and cannot run npm install on the cloned repo

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/tslint
npm ERR!   dev tslint@"~6.1.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer tslint@"^3.9.0" from [email protected]
npm ERR! node_modules/codelyzer
npm ERR!   dev codelyzer@"^0.0.28" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/tslint
npm ERR!   peer tslint@"^3.9.0" from [email protected]
npm ERR!   node_modules/codelyzer
npm ERR!     dev codelyzer@"^0.0.28" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 

Any assistance would be appreciated.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.