The module 'PublicModule' was declared unexpectedly within the 'AppModule' in the Angular 4 component structure

My goal is to create a simple structure:

app
--_layout
  --public-footer
  ----public-footer.html/ts/css files
  --public-header
  ----public-header.html/ts/css files
  --public-layout
  ----public-layout.html/ts/css files

In public-layout.html, the structure should be:

<public-header></public-header>
<router-outlet></router-outlet>
<public-footer></public-footer>

In public-layout.ts:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-public-layout',
  templateUrl: './public-layout.component.html',
  styleUrls: ['./public-layout.component.css']
})
export class PublicLayoutComponent implements OnInit {
  constructor() { }
  ngOnInit() {}
}

I want this public-layout to be used with other components such as Home, About, etc.

I've been struggling to make it work for the About component. I've tried various combinations but none have worked for me.

My expectation is that I shouldn't have to declare/import the header and footer in app.module.

Can anyone offer assistance?

javascriptangulartypescriptangular-components

Answer №1

Welcome! Here are a couple of solutions tailored to your specific case:

Firstly, instead of using the traditional strategy with 

<router-outlet></router-outlet>
in your layout, you can implement a different approach. In each view where you want your outlet, wrap the component in a custom tag.

<app-app-layout>
  <h1>
  Custom HTML code for the component within the layout.
  </h1>
</app-app-layout>

By adopting this method, you have the flexibility to create multiple layouts as needed.

The second solution involves utilizing a tree-based structure for routing. From the app module, for instance, you can establish two branches for each layout. One branch can be private, containing the desired outlet where you insert 

<router-outlet></router-outlet>
to allow all children components access to the outlet. The second branch, named public, connects to components/views that do not require an outlet.

I would recommend the first strategy. Feel free to explore a demonstration of the initial solution on StackBlitz: StackBlitz Demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize Hardhat and NPM to distinguish between unit tests and integration tests efficiently

Struggling with setting up two commands in my package.json for running unit tests and integration tests. I am having trouble defining the location of the testset for each type of testing. Within the scripts section of my package.json, I have created two c ...

javascripttypescriptnpmnpm-scriptshardhat

Error in pagination when using MAX() function in PostgreSQL query

Here is the query I am using to retrieve the latest message from each room: SELECT MAX ( "Messages"."id" ) AS messageId, "Rooms"."id" FROM "RoomUsers" INNER JOIN "Rooms" ON " ...

typescriptpostgresqlsequelize.js

What could be causing useEffect to trigger only after the component has been mounted in NextJS?

I'm currently encountering an issue with my implementation of a useEffect function that is supposed to act like a componentWillMount, but the behavior is not as expected. Within the code for Component (as demonstrated in the Codesandbox provided belo ...

javascriptreactjsnext.js

Can a website accurately identify my operating system and browser version even if my browser settings have been altered?

When using selenium to browse a website, I have modified the useragent, platform, and oscpu properties of the navigator object in my Firefox browser. Will the website be able to detect my actual operating system and browser version? ...

javascriptseleniumweb-scraping

Combine several elements in a single jQuery scrollreveal function

I am currently working on a webpage that utilizes the jQuery library plugin scrollreveal to gradually reveal different html elements when the page loads. The functionality of the code is working correctly at the moment, but I have noticed that there is a d ...

javascriptjqueryhtml

Enhancing Promises.all with extra parameters

Looking to dive into promises, eager to learn. Here is an array of shopIds I'm working with: let shopIdsArray = ['shop1','shop2','shop3']; Additionally, there's an external promise call: getProducts(shopId, ' ...

javascriptnode.jspromisees6-promise

Is there a way to retrieve files from a main directory as well as all its subdirectories?

I'm looking to find a way to retrieve all JavaScript files located in the main directory and any subdirectories for my discord.js command handler. How can I make this happen? I have a functioning code snippet that successfully retrieves all .js files ...

javascriptnode.jsfsdiscord.js

Error message displayed: "Unexpected token 'H' when attempting to render Markdown

I've been working with the react markdown library and wanted to share my code: import Markdown from 'react-markdown'; import PreClass from './PreClass'; type MarkdownFormatTextProps = { markdown: string; tagName?: string; ...

javascriptreactjsnext.jsmarkdown

Retrieve the file that has been uploaded to AWS S3

Here is a snippet of code to consider : var express = require('express'), aws = require('aws-sdk'), bodyParser = require('body-parser'), multer = require('multer'), multerS3 = req ...

javascriptnode.jsamazon-web-servicesamazon-s3

Error: Attempting to access the property 'push' of an undefined variable has resulted in an unhandled TypeError

if (Math.random() <= .1) { let orgAdmin = User.find({email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1234454665324721380c0d">[email protected]</a>'}); or ...

javascriptjsonintellij-idea

Leveraging Prototype's Class creation function to declare confidential and safeguarded attributes and functions

Looking for a solid approach to defining private and protected properties and methods in Javascript? Check out this helpful discussion here on the site. Unfortunately, the current version of Prototype (1.6.0) doesn't offer a built-in method through it ...

javascriptoopprivateprototypejsprotected

Tips for placing the header text at the center of a TemplateField in your design

I'm using a GridView with TemplateFields. I attempted to align the header text of the TemplateField to center by using HeaderStyle-HorizontalAlign="Center", but it doesn't seem to be working as expected. <asp:TemplateField HeaderTex ...

javascriptc#jqueryasp.netgridview

Is it possible to reverse the use of JQuery's .each() function without any additional plugins or modifications?

Similar Question: Reversing JQuery .each() Is there a better approach to using .each() in reverse? Currently, I am implementing it like this: var temp = []; $("#nav a").each(function() { temp.push($(this)); }); temp.reverse(); for(var i = 0; i ...

javascriptjquery

The error message "Type 'string' cannot be assigned to type 'Condition<UserObj>' while attempting to create a mongoose query by ID" is indicating a type mismatch issue

One of the API routes in Next has been causing some issues. Here is the code: import {NextApiRequest, NextApiResponse} from "next"; import dbConnect from "../../utils/dbConnect"; import {UserModel} from "../../models/user"; e ...

mongodbtypescriptmongoosenext.js

Do not apply tailwindcss styles to Material-UI

I've been struggling to apply styling from tailwindcss to my MUI button. My setup includes babel and webpack, with the npm run dev script as "webpack --mode development --watch". tailwind.css module.exports = { content: ["./src/**/*.{js, jsx, t ...

javascriptcssreactjsmaterial-uitailwind-css

javascript function not being invoked

Currently, I have incorporated the following HTML <html> <head> <Title>EBAY Search</title> </head> <script language="JavaScript" src="ajaxlib.js"></script> <body> Click here & ...

javascripthtmlajax

Avoiding a jest compile error and executing the test efficiently

Here is my Vue.js code snippet: export default { name: 'App', components: { }, created() { let t = typeof t === 'undefined' ? {} : t; // ISSUE LINE } } The ISSUE LINE runs successfully in the browser without any errors an ...

javascriptvue.jsjestjsbabeljsbabel-jest

Leaflet Alert: The number of child elements is not the same as the total number of markers

Encountering a problem with Leaflet clustering using v-marker-cluster. Within the icon createFunction of the cluster, the className of children is used to determine the cluster style. Here is a snippet of this function : const childCount = marker_cluster._ ...

javascriptvue.jsvuejs2leafletleaflet.markercluster

Ways to slow down page transition on NextJs

I'm currently working on securing my private pages using a HOC withAuth. While the protection is functioning correctly, I am looking to avoid users seeing a loading screen for a split second while the access token is being retrieved from local storage ...

javascriptreactjsnext.jsfrontend

Having trouble with the Express.js app.post request functionality

I'm facing a challenge with the Express.js library. I've been attempting to set up a basic post request with the route. I have body-parser installed and am using it for the post data. If I specifically include app.post, it doesn't work, ...

javascriptnode.jsexpress