The Reason Behind Angular Error when Using CSS Custom Tags

Question

The Reason Behind Angular Error when Using CSS Custom Tags

I have the following SCSS code:

main{
    width: 100%;
    height: 840px;
    /*background: red;*/
    margin: 10px auto;
    position: relative;
    padding: 5px 0;
}
section{
    width: 98%;
    height: 600px;      
    margin: auto;
    display: flex;
    align-items: center;
    overflow-x: auto;
}
....

and this HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Simple responsive test</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <main>
        <div class="text">
            <h1>Simple Test</h1>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam non atque adipisci est, recusandae aperiam, ullam minima quos nostrum animi voluptas sequi. At repellendus fuga reiciendis accusantium, dolor suscipit repellat?
            </p>
        </div>
        <section>
            <div class="product">
                <img src="image/banner2.png" alt="">
                <p>
                    <b>Product One</b><br>
                    <small>New arrival</small>
                </p>
                <samp>$45.00</samp>
            </div>
       </section>
   </main>
</body>

In regular HTML, the browser renders the layout correctly.

However, when using Angular, we encounter an error main is not recognized. Is there any specific action needed in Angular to resolve this issue?

The error message is as follows:

error NG8001: 'main' is not a known element:
1. If 'main' is an Angular component, then verify that it is part of this module.
2. If 'main' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

                  <main>


</main>

html css angular

Answer 1

Answer №1

Ensure that your Component is imported in the AppModule, or in the module that imports your Component.

Don't forget to include CommonModule and BrowserModule in your AppModule as well. This may be causing the issue.

Your AppModule should look something like this:

@NgModule({
  declarations: [
    YourComponent,
    AppComponent
  ],
  imports: [
    CommonModule,
    BrowserModule
    // any other necessary modules
  ],
  .........
 })
 export class AppModule {
    }

However, I recommend creating a separate Module for your components and importing that into your AppModule.

// components.module.ts (or choose another name)

import { NgModule }      from '@angular/core';
import { CommonModule } from '@angular/common';
import { YourComponent}  from './YourComponent/your-component.component.ts';

@NgModule({
  imports:      [ CommonModule  ],
  declarations: [ YourComponent],
  exports:    [ YourComponent]
})
export class ComponentsModule{ }

// app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { ComponentsModule } from './components/components.module.ts'

@NgModule({
  imports:      [ BrowserModule, ComponentsModule  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Answer 2

Ensure that your Component is imported in the AppModule, or in the module that imports your Component.

Don't forget to include CommonModule and BrowserModule in your AppModule as well. This may be causing the issue.

Your AppModule should look something like this:

@NgModule({
  declarations: [
    YourComponent,
    AppComponent
  ],
  imports: [
    CommonModule,
    BrowserModule
    // any other necessary modules
  ],
  .........
 })
 export class AppModule {
    }

However, I recommend creating a separate Module for your components and importing that into your AppModule.

// components.module.ts (or choose another name)

import { NgModule }      from '@angular/core';
import { CommonModule } from '@angular/common';
import { YourComponent}  from './YourComponent/your-component.component.ts';

@NgModule({
  imports:      [ CommonModule  ],
  declarations: [ YourComponent],
  exports:    [ YourComponent]
})
export class ComponentsModule{ }

// app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { ComponentsModule } from './components/components.module.ts'

@NgModule({
  imports:      [ BrowserModule, ComponentsModule  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

The Reason Behind Angular Error when Using CSS Custom Tags

Answer №1

Similar questions

Load the flexslider once the fancybox container is opened

Problem with Jasmine in Angular 5 within Visual Studio Code

Issues with HTML formatting in PHP emails

Using Mat-Error for Two Way Binding leads to frequent triggering of ngModelChange事件

Identifying the precise image dimensions required by the browser

Tips for streamlining interface initialization and adding items to it

Utilizing CSS to dynamically update SVG icons within the navigation menu upon tab selection

Trigger parent Component property change from Child Component in Angular2 (akin to $emit in AngularJS)

The issue with Angular 4 imports not refreshing in a .less file persists

Creating a bespoke Bootstrap 4 Modal experience without the backdrop

Verify user credentials during login in a React application

an online platform design

Scale up the font size for all text on the website uniformly

What is the best way to determine the actual height of a DOM element that is being hidden by the overflow property in order to create a seamless CSS transition to height: auto

The dropdown height feature is experiencing issues in the Chrome browser

The anchor tag seems to be malfunctioning within the div container

[attr.disabled]="isChecked ? '' : 'disabled'"

Utilizing Partial Types in TypeScript Getter and Setter Functions

Is it possible for a malicious party to modify the src attribute within an iframe?

Add a unique shape to the CSS clip property