deborahk / angular-routing

Materials for my Pluralsight course: Angular Routing.

Angular-Routing

Materials for the "Angular Routing" course on Pluralsight.

APM-Start: The starter files. Use this to code along with the course. NOTE: This code is Angular v10. To install it, you'll need to use npm install --force and you will see numerous warnings.

APM-Start v14: The starter files updated to Angular v14. Use this code to code along with the course using v14. NOTE: The course was not updated to v14, so if starting with v14 code, some shown code will be slightly different, requiring initialized variables and strong typing.

APM-Final: The completed files. Use this to see the completed solution from the course. NOTE: This code is Angular v10. To install it, you'll need to use npm install --force and you will see numerous warnings.

APM-Final v14: The completed files updated to Angular v14. Use this to see the completed solution for the course in v14.

See the README.md file under each folder for details on installing and running the application.

Please see the CHANGELOG.md for the most recent changes to this repo.

angular-routing's Issues

Angular routing keeps redirecting me to the home page

I am facing a issues with the routing in Angular .It keeps redirecting me to the home page even though I am entering a valid url (http://localhost:4200/services)
This is my code:

app.routing.module

const routes: Routes = [
{path: 'services', loadChildren: () => import('./routes/services/services.module').then(m => m.ServicesModule)},
{ path: '', loadChildren: () => import('./routes/home/home.module').then(m => m.HomeModule) },
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: '**', pathMatch: 'full', redirectTo: ''},
];

home-routing.module

const routes: Routes = [{ path: '', component: HomeComponent, children: [
{ path: '', component: HomeStartingViewComponent },
{ path: '', component: MeetUsComponent },
{ path: '', component: ServiceItemsComponent },
{ path: '', component: TitleComponent },
{path:'', component:CaseStudyComponent},
{path: '', component:BenefitsComponent},
{path:'', component:PartnersComponent}],
}]

services-rouiting.module

const routes: Routes = [{ path: '', component: ServicesComponent, children: [
{path:'', component:TitleComponent}
] }];

Going "back"

Is there a way to go "back"? From the Edit page, I'd like to go back to the caller, which is either 'products' or 'products/:id'.

Reading query parameters on /products

Probably should be subscribed instead of snapshot, because selecting the menu option for the Product List changes the url, but doesn't impact the page.

I loved this course! Great Job. Your courses are so useful. I have started to take notes because I cannot keep up with all of the "tips"/useful cases that you cover. I have to go back and completely watch the Reactive Forms course again :-)

Why isv

Why is there 2 folder with the same name?

enableTracing based on a config value

Is there a way to enable route tracing based on a config value? I'm thinking more in terms of troubleshooting in a production environment where I really can't rebuild the app.

Add Route Animations to enhance User Experience

Here is some samples from angularfirebase.com:
https://www.youtube.com/watch?v=7JA90VI9fAI&feature=youtu.be

Not working with Node Latest Stable version

Please update the code to Angular 10 -14

APM-Start-CLI available

I have taken your APM-Start and converted it to Angular-CLI 1.0.0 and Angular 4.0.3 and published to a public GitHub at:
APM-Start-CLI

Once I complete your Angular Routing Course, I'll try to publish my edition as APM-Routed (currently private since I am only starting Module 3 of your course).

Angular Routing : After lazy loading , page is redirecting to default route

I was following your course on Angular routing in Pluralsight I have created a sample app but I am facing below issue after implementing lazy loading .
my repo https://github.com/deepu105045/boyka

I have two modules in my angular 6 application one is app module and another one is User module, I am trying to implement lazy loading of the user module. Routing works if I manually hit the URL then the correct page from user module is getting displayed. But when I tried to navigate from header component it's not navigating to user page instead it's going to the default page.

Header.html

Login Register app-routing-module

import { NgModule, Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { WelcomeComponent } from './components/welcome/welcome.component';
import { PagenotfoundComponent } from './components/pagenotfound/pagenotfound.component';

const routes: Routes = [
{
path:'welcome',
component:WelcomeComponent
},
{
path:'user',
loadChildren:'./user/user.module#UserModule'
},
{
path: '',
redirectTo: 'welcome',
pathMatch: 'full' },
{
path: '**',
component: PagenotfoundComponent
}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
User routing module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './components/login/login.component';
import { RegisterComponent } from './components/register/register.component';

const routes: Routes = [
{
path:'login',
component: LoginComponent
},
{
path:'register',
component:RegisterComponent
},
{
path:'',
redirectTo:'login',
pathMatch:'full'
}
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class UserRoutingModule { }
App module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { WelcomeComponent } from './components/welcome/welcome.component';
import { PagenotfoundComponent } from './components/pagenotfound/pagenotfound.component';

@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
WelcomeComponent,
PagenotfoundComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Missing angular.json files

The projects in this repo don't seem to have the generated angular.json files required for some IDEs to recognize the app as an Angular application. Checking out your other repos work fine, but this one isn't being recognized as an Angular app.

Api not working

I cannot find the api/products folder anywhere in the app?

Getting error when run npm serve -o

Local workspace file ('angular.json') could not be found.
Error: Local workspace file ('angular.json') could not be found.
at WorkspaceLoader._getProjectWorkspaceFilePath (F:\APM\APM-Final\node_modules@angular\cli\models\workspace-loader.j
s:37:19)
at WorkspaceLoader.loadWorkspace (F:\APM\APM-Final\node_modules@angular\cli\models\workspace-loader.js:24:21)
at ServeCommand._loadWorkspaceAndArchitect (F:\APM\APM-Final\node_modules@angular\cli\models\architect-command.js:19
5:32)
at ServeCommand. (F:\APM\APM-Final\node_modules@angular\cli\models\architect-command.js:47:25)
at Generator.next ()
at F:\APM\APM-Final\node_modules@angular\cli\models\architect-command.js:7:71
at new Promise ()
at __awaiter (F:\APM\APM-Final\node_modules@angular\cli\models\architect-command.js:3:12)
at ServeCommand.initialize (F:\APM\APM-Final\node_modules@angular\cli\models\architect-command.js:46:16)
at Object. (F:\APM\APM-Final\node_modules@angular\cli\models\command-runner.js:87:23)

APM-Start - product.description not defined

In APM-Start, the following reference on line 70 in file product-edit-info.component.html is undefined:
[(ngModel)] = product.description
Is that by design so it can be addressed as part of the "code-along" strategy in Module 3 of your course?

I have taken your APM-Start code and "Angular-CLI'zed" it. When I run:
ng build --verbose --progress --vendor-chunk --extract-css --prod
the above issue is flagged in error:

ERROR in ng:///C:/projects/APM-routed/src/app/products/product-edit-info.component.html (71,29): Property 'description' does not exist on type '{ id: number; productName: string; productCode: string; }'. ng:///C:/projects/APM-routed/src/app/products/product-edit-info.component.html (72,29): Property 'description' does not exist on type '{ id: number; productName: string; productCode: string; }'.

If you look at product-edit-info.component.ts, line 14 defines a product that does not contain a description, which is why the reference to that property fails during ng build:
product = { id: 1, productName: 'test', productCode: 'test' };

Further investigation reveals an "unused import" on line 5:
import { IProduct } from './product';

If I change line 14 to the following, the error goes away:
product: IProduct = { id: 1, productName: 'test', productCode: 'test', category: 'test', releaseDate: '2017-01-31', price: 0, description: 'test', starRating: 1, imageUrl: '' };
None of this bothers me if the intent is to fix these issues as part of the course; but, if the intent is that the code for APM-Start is supposed to work, then those of us who (ng) build our Angular apps using Angular-CLI have a lot of clean-up work ahead of us before we can continue with the course.

It may be too late to ask, but would you consider using Angular-CLI to build APM when you use it in future courses? I just finished John Papa's excellent Pluralsight course on Angular-CLI and build all my Angular apps using that tool.

In fact, my "dream course" is one that involves you, Julie Lerman and John Papa combining Angular-CLI, Angular and Entity Framework in one very advanced "best practices" course.

Url Rewriting in IIS Express

Does anyone have a good link to help rewriting Urls in IIS Express? This Stack Overflow answer seems helpful, but I'm still missing something.

Refresh issue with Child Route

Hello Deborah,

I have facing an issue with Child routing. Could you please support me to find a fix.

I am using child route in my application. When I do direct refresh on child path, the style.css is getting loaded on parent path instead of root. This is causing the page to loose global styling as style.css is not found on root. Its working perfectly when navigating with angular routing, but issue happens only I do browser refresh on child route.

The above issue is not reproducible in local, but happening only when I deploy angular application in AWS cloud-front. I have tried all possible fixes like setting base href, etc.. but no luck

Please let me know if you have any pointer to fix this issue

Regards

Shaheer