Giter VIP home page Giter VIP logo

angular-university / angular-ssr-course Goto Github PK

View Code? Open in Web Editor NEW
159.0 13.0 121.0 2.13 MB

Angular SSR In Depth (formerly Angular Universal) - Use Angular on the server too! Learn Angular Server-Side Rendering

Home Page: https://angular-university.io/course/angular-universal-course

JavaScript 6.06% TypeScript 67.70% CSS 1.13% HTML 15.73% SCSS 9.37%
angular angularuniversal angular-ssr

angular-ssr-course's Introduction

Angular Universal In Depth Course

This repository contains the code of the course Angular SSR In Depth (formerly Angular Universal).

This course repository is updated to Angular v18.

Angular SSR In Depth (formerly Angular Universal)

Installation pre-requisites

Please use Node 18 long-term support (LTS) 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-ssr-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-ssr-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 UI Server

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

npm start 

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

To run the Angular Universal Live Development Server

To run the application in development mode but still have it server side rendered:

npm run dev:ssr 

The live universal application is available 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

NgRx (with NgRx Data) - The Complete Guide

If you are looking for the Ngrx (with NgRx Data) - The Complete Guide, the repo with the full code can be found here:

Ngrx (with NgRx Data) - The Complete Guide

Angular Core Deep Dive Course

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

Angular Core Deep Dive

RxJs In Practice

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

RxJs In Practice Course

NestJs In Practice (with MongoDB)

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

NestJs In Practice Course

Angular Testing Course

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

Angular Testing Course

Serverless Angular with Firebase Course

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

Serverless Angular with Firebase 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

Complete Typescript 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-ssr-course's People

Contributors

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

angular-ssr-course's Issues

Hangs Indefinitely at "Building..." on Angular 18

When attempting to run npm run build:ssr on a project using Angular 18, the process hangs indefinitely with the message "Building...". The build process does not complete, and no error messages are displayed, making it difficult to diagnose the problem.

router-outlet not rendering the html

Hi I am gettign

after integration of angular ssr, I am followign all the cmand as per tuts

my router page is this

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LogoutComponent } from './components/logout/logout.component';

const routes: Routes = [
{
path: '',
loadChildren: () => import('./module/home/home.module').then(m => m.HomeModule)
},
{
path: 'tour-packages',
loadChildren: () => import('./module/tour-packages/tour-packages.module').then(m => m.TourPackagesModule)
},
{
path: 'sights',
loadChildren: () => import('./module/sights/sights.module').then(m => m.SightsModule)
},
{
path: 'about-us',
loadChildren: () => import('./module/about-us/about-us.module').then(m => m.AboutUsModule)
},
{
path: 'login',
loadChildren: () => import('./module/login/login.module').then(m => m.LoginModule)
},
{
path: 'register',
loadChildren: () => import('./module/register/register.module').then(m => m.RegisterModule)
},
{
path: 'contact-us',
loadChildren: () => import('./module/contact/contact.module').then(m => m.ContactModule)
},
{
path: 'my-account', loadChildren: () => import('./module/my-account/my-account.module').then(m => m.MyAccountModule) },
{
path: 'logout',
component: LogoutComponent
},
];

@NgModule({
imports: [RouterModule.forRoot(routes, {
initialNavigation: 'enabledBlocking'
})],
exports: [RouterModule]
})
export class AppRoutingModule { }

HTTP call still being made when using transfer state

For video "How to use the State Transfer API- Step-by-Step Implementation", the http call is still being made from the client. In the XHR filter search for 'couse' rather than '/course'. You will see it still being called. Can you please explain how to make this un-needed call to stop happening?

dev:ssr not starting

Hi, Thanks for sharing this project. I have the latest version (with Angular 13) and the dev:ssr option doesn't start up.

$ npm run dev:ssr

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

Any ideas?

Best wishes,
Beemer

client/server folder structure

Hi Lukas
I've been a reader of your articles since back in the pre-comment section days:-)
Have you ever experimented with implementing a client/server folder structure (like you have in your file-upload example) with Angular Universal?
I've got ssr running (amazingly in 5 mins) with "npx ng add @nguniversal/express-engine --clientProject angular-exp", but end up with the server.ts file in the client structure. I was trying to have a single server file for my API and ssr, in an outter server folder but not sure if it's possible e.g.
Any thoughts on this?

readme is wrong, there is no "server" task

tbh very much disappointed with the whole Angular Universal project. So yours is also no better, a messy package.json, unfinished readme.
Can you please try to fix it and go through it yourself?
The best would be if you just use angular universal starter and align with their package.json, they have build:ssr and serve:ssr tasks, there

App Module: Invalid imports in 1-start branch

app.module.ts imports the below even when there is not 'Directives' folder in the '1-start' branch

import {AppShellRenderDirective} from "./directives/app-shell-render.directive";
import {AppShellNoRenderDirective} from "./directives/app-shell-norender.directive";

update to Angular 17

Hello, thank you for the informative course. Is an update to Angular 17 planned? Thanks in advance.

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.