angularchatmessaging

Is there any way that this chat-application can work?

I am pretty new to Angular and was trying to build a simple chat application, without a backend or anything just trying to learn the framework and build a simple template. But after several hours, I am still getting the same error messages: ✘ [ERROR] NG8001: 'router-outlet' is not a known element:

  1. If 'router-outlet' is an Angular component, then verify that it is part of this module.

  2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. [plugin angular-compiler]

    src/app/app.component.html:0:0: 0 │ ╵ ^

Error occurs in the template of component AppComponent.

src/app/app.component.ts:6:15:
  6 │   templateUrl: './app.component.html',
    ╵                ~~~~~~~~~~~~~~~~~~~~~~

I was trying to build two seperate pages, the chat-home (overview of all chats) and the chat-room(page to chat with one selected person where messages get actually sent). Here is the link to the github: https://github.com/tostrauss/chat-app

Solution

  • You are mixing standalone and modules that is why you are getting this issue, based on the assumption that you want your app to be modules, I updated the main.ts with new code, that will compile the module! after that the code works great!

    Getting started with standalone components

    Introduction to modules

    // import { bootstrapApplication } from '@angular/platform-browser';
// import { appConfig } from './app/app.config';
// import { AppComponent } from './app/app.component';

// bootstrapApplication(AppComponent, appConfig)
//   .catch((err) => console.error(err));
// use the above code when you want standalone components, if you use standalone
// then there should be no app.module.ts and app component should be set as standalone: true!


import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

    Github Repo