UPDATED -- SOLVED
I am relatively new to programming and very new to Angular. I'm trying to follow along in a course to learn--I'm using codewithmosh, if anyone is familiar with that.
When updating my html, the browser is not refreshing and I have to manually re-serve in order to see any changes. I've already referenced
this and this article, but the first did not help. Much as I'm embarrassed to say it, I'm not familiar enough with the 'dist' directory to have applied that. Could someone help me, or is there a different solution?
Best as I can tell, when the code is changed the serve piece starts looking at old stuff...so when the html is changed, I get an error like "error NG8001: 'authors' is not a known element: 1. If 'authors' is an Angular component, then verify that it is part of this module." But it's bogus because it works just fine after I re-serve.
I just don't know how to get it to look at the refreshing stuff correctly. I uninstalled and re-installed both webpack and node_module, neither worked.
Update: I left this out, I'm using VS Code. And I've decided to continue on with the course pending resolution here, since it's inconvenient but not fatal. It appears that editing templates in the component.ts files updates live just fine, but modifying the .html files is what makes it stop working correctly.
Below is what happens in the standalone command prompt when I ng serve. Not sure how to format properly, apologies!
chunk {main} main.js, main.js.map (main) 23.1 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 686 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.62 MB [initial] [rendered]
Date: 2020-10-05T22:56:11.557Z - Hash: e4c32bae1bac1338266f - Time: 9337ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.
And this is what happens after I modify the app.component.html file by deleting the tag I'd added, and then re-adding it.
Date: 2020-10-05T23:00:22.833Z - Hash: 274020775ace6f38e9de
3 unchanged chunks
chunk {main} main.js, main.js.map (main) 22.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.62 MB [initial] [rendered]
Time: 735ms
: Compiled successfully.
ERROR in src/app/app.module.ts:14:5 - error NG6001: The class 'AppComponent' is listed in the declarations of the NgModule 'AppModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.
14 AppComponent,
~~~~~~~~~~~~
src/app/app.component.ts:8:14
8 export class AppComponent {
~~~~~~~~~~~~
'AppComponent' is declared here.
src/app/app.component.html:2:1 - error NG8001: 'authors' is not a known element:
1. If 'authors' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
2 <authors></authors>
~~~~~~~~~~~~~~~~~~~
src/app/app.component.ts:5:16
5 templateUrl: './app.component.html',
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.
src/app/app.component.html:3:1 - error NG8001: 'courses' is not a known element:
1. If 'courses' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
3 <courses></courses>
~~~~~~~~~~~~~~~~~~~
src/app/app.component.ts:5:16
5 templateUrl: './app.component.html',
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.
Now, this looks a lot to my (untrained) eyes like "authors" and "courses" are components that aren't plugged in right. But if I CTRL+C and stop the serve, and then type ng serve again, it serves up just fine.
Below is the code from my courses.component.ts. I can add the author component if you'd like but it seems redundant.
import { CoursesService } from './courses.service';
import {Component} from '@angular/core';
import { NumberFormatStyle } from '@angular/common';
@Component({
selector: 'courses',
template: `
<h2>{{ title }}</h2>
<button>{{button title }} </button>
<img src="{{ imageUrl }}"/>
<img [src]="title" />
`
})
export class CoursesComponent {
title = "List of courses";
imageUrl = "http://lorempixel.com/400/200";
buttonTitle = "save this";
isActive = true;
}
And below is my app.module.ts.
import { CoursesService } from './courses.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CoursesComponent } from './courses.component';
import { CourseComponent } from './course/course.component';
import { AuthorsComponent } from './authors/authors.component';
import { AuthorsService } from './authors.service';
@NgModule({
declarations: [
AppComponent,
CoursesComponent,
CourseComponent,
AuthorsComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [
CoursesService,
AuthorsService
],
bootstrap: [AppComponent]
})
export class AppModule { }
And finally, below is my app.component.html. Editing the template or details in the courses.component.ts live-update just fine, but editing this HTML causes the browser to remove anything from the custom tags and the terminal starts throwing those errors. Native HTML updates just fine even after the issues start.
<h1>Angular</h1>
<authors></authors>
<courses></courses>
<h1>yo</h1>
