This is my first angular 8 application, and now when I am trying to setup routerlinks and when I click on the links I get from the google console the error: Error: ASSERTION ERROR: Provided Component class doesn't contain Component definition. Please check whether provided class has @Component decorator. [Expected=> null != null <=Actual]. On compilation there is no error and I can not find any solution to the problem with the help of professor Google.
The app.module.ts file looks like this: `
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ProductList, ProductListComponent } from './product/product-list.component'
import { Comment } from '@angular/compiler';
import { ConvertToSpacesPipe } from './shared/convert-to-spaces.pipe';
import { starComponent } from './shared/star.component';
import { HttpClientModule } from '@angular/common/http';
import { ProductDetailComponent } from './product/product-detail.component'
import { WelcomeComponent } from './home/welcome.component';
import { RouterModule } from '@angular/router';
@NgModule({
declarations: [
AppComponent,
ProductList,
ConvertToSpacesPipe,
starComponent,
ProductDetailComponent,
WelcomeComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
RouterModule.forRoot([
{path: 'products', component: ProductListComponent},
{path: 'products/:id', component: ProductDetailComponent},
{path: 'welcome', component: WelcomeComponent},
{path: '', redirectTo: '/welcome', pathMatch: 'full'},
{path: '**', redirectTo: 'welcome', pathMatch: 'full'}
])
],
bootstrap: [AppComponent],
exports: [
RouterModule,
],
})
export class AppModule { }
`
product-list.component.ts looks like this: `
import { Component, OnDestroy, OnInit } from "@angular/core";
import { IProduct } from "./product";
import { ConvertToSpacesPipe } from "../shared/convert-to-spaces.pipe";
import { ProductService } from "./product.service";
import { Subscription } from "rxjs";
@Component({
templateUrl: './product-list.component.html',
styleUrls: ['./product-list.component.css']
})
export class ProductList implements OnInit, OnDestroy {
constructor(private productService: ProductService) {
}
pageTitle: string = 'Product list Rating';
imageWidth: number = 50;
imageMargin: number = 2;
showImage: boolean = true;
errormsg: string = `err`;
sub!: Subscription;
private _listFilter : string = '' ;
get listFilter(): string {
return this._listFilter;
}
set listFilter(value: string) {
this._listFilter = value;
this.filteredProducts = this.preformFilter(value);
}
filteredProducts: IProduct[] = [];
products: IProduct[] = [];
toggleImage(): void {
this.showImage = !this.showImage;
}
ngOnInit(): void {
this.sub = this.productService.getProducts().subscribe({
next: products => {
this.products = products;
this.filteredProducts = this.products;
},
error: err => this.errormsg = err,
});
this.listFilter = '';
this.startup();
}
ngOnDestroy(): void {
this.sub.unsubscribe();
}
startup(): void {
if (this.showImage) {
console.log('tråd');
}
if (!this.showImage) {
console.log('Show Image')
}
}
preformFilter(filteredBy : string): IProduct[] {
filteredBy = filteredBy.toLocaleLowerCase();
return this.products.filter((product: IProduct) =>
product.productName.toLocaleLowerCase().includes(filteredBy));
}
onRatingClicked(message : string): void {
this.pageTitle = 'Product list Rating ' + message;
}
};
export class ProductListComponent {
onNotify(messeges : string ): void {
console.log('shit')
}
};
My app.component.ts looks like this:
import { Component } from "@angular/core";
@Component({
selector: 'pm-root',
template: `<nav class="navbar navbar-expand navbar-light bg-light">
<a class="navbar-brand">{{pageTitle}}</a>
<ul class='nav nav-pills'>
<li><a class="nav-link" routerLink='/welcome' routerLinkActive="active">Home</a></li>
<li><a class="nav-link" routerLink='/products' routerLinkActive="active">Product list</a></li>
</ul>
</nav>
<div class="container">
<router-outlet></router-outlet>
</div>`
})
export class AppComponent {
pageTitle: string = 'Acme Project Mangement';
}
the welcome.component.ts looks like this:
import { Component } from '@angular/core';
@Component({
templateUrl: './welcome.component.html'
})
export class WelcomeComponent {
public pageTitle = 'Welcome';
}
`
Please help me find a solution to this problem, my future is dependent on me learning angular, so fixing this problem would mean a lot.
