Isolating the Root Module in Angular 2

There are two main pages in my website:

  1. Index.html (Home Page)
  2. Admin.html (Admin Control Panel which requires sign-in to access)

Do I need to create a separate root module for each page, or can they be bundled together using webpack in a single root module?

Answer №1

Due to the presence of 2 separate HTML files, each file will contain the necessary JavaScript scripts for initialization.
I plan on creating 2 distinct bundles of JS so that I can update the user interface independently from the admin interface without interconnecting the scripts. It is possible to import a shared common module for both AppModule and AdminAppModule, as there may be some overlapping functionality and components they might utilize.
Another consideration is that the server must be capable of serving both index.html and admin.html, allowing users to access yoursie.com/index and yoursite.com/admin.

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

The addition operator cannot be used with the Number type and the value of 1

Encountering an issue where the operator '+' cannot be applied to types 'Number' and '1' buildQuerySpec() { return { PageSize: this.paging.PageCount, CurrentPage: this.paging.PageIndex + 1, MaxSize: '' ...

What is preventing me from uploading the node_modules folder to my GitHub repository?

I've encountered an issue with uploading my Angular 6 project to GitHub using GitHub Desktop. Despite successfully uploading all files, the node_modules file is consistently missing. Upon downloading the project from GitHub and attempting to run it, ...

Webpack's node process.cwd() and path.resolve() functions both yield the root directory as '/' in their output

Basically the main issue here is with the title, I'm not entirely sure what I have misconfigured... I've seen other solutions that recommend adding target: node, but since I am using webpack to bundle react, my target shouldn't be nodejs, ri ...

Unable to retrieve jwt tokens transmitted from the frontend to the backend

Having just started learning Django and simplejwt, I'm facing an issue with retrieving tokens sent from our Angular frontend labeled as "app_token" and "access_token". Despite trying variations like "HTTP_APP_TOKEN" and "HTTP_ACCESS_TOKEN", as well as ...

Menu made of Angular material card located in the upper right corner

Is there a way to add a menu at the top right of a card using Angular Material? The documentation does not mention a specific tag for this feature. https://i.sstatic.net/FEf40.png I am looking to include a button with an icon at the top right corner, sim ...

Having trouble getting the backpack feature to work on Skyscanner's React app

I encountered an error while compiling my React app. Initially, I faced an old SSL security error on NodeJS, which I managed to fix with the help of Stack Overflow. However, now I am encountering a new error. Failed to compile. ./node_modules/@skyscanner/ ...

Fetching Data from Response Headers in Angular 4.3.3 HttpClient

(Text Editor: Visual Studio Code; TypeScript Version: 2.2.1) The main objective here is to fetch the headers of the response from a request Let's consider a scenario where we make a POST request using HttpClient within a service: import { Injec ...

Issue with react router v6: Component fails to render even though route has been changed

The router seems to be experiencing an issue where it does not render a component. Specifically, on the home page, the Private Route is only rendered once. Clicking on a NavLink changes the URL to "/agreements", but the component itself is not being render ...

Changes related to Next.js webpack have been incorporated into the git changes

Why are these files getting added to my git changes? I have tried adding them to .gitignore but it doesn't seem to help. Any tips on how to solve this issue would be greatly appreciated! I have attempted adding them to .gitignore, updating next, and ...

Utilizing ASP.NET Core Web API and Angular 2 for Secure Authorization and Authentication

I'm currently working on an Angular 2 application that communicates with a Web API to perform basic CRUD operations. I have some specific questions: Is there a way to create a Login/Register page in Angular 2 using ASP.NET Identity? How can I secure ...

Retrieve the content text while handling errors using RxJs

When my Node.js server encounters an error with status 401, it sends out a message: https://i.stack.imgur.com/bOOF3.png https://i.stack.imgur.com/Kcv27.png The code responsible for this is as follows: res.status(401).send('Invalid user or password & ...

Pressing the confirm button will close the sweet alert dialog

When pressing the confirm button, the swal closes. Is this the intended behavior? If so, how can I incorporate the loading example from the examples? Here is my swal code: <swal #saveSwal title="Are you sure?" text ="Do you want to save changes" cancel ...

How to Pass Values in handleChange Event in Typescript

I have noticed that most online examples of handling change events only pass in the event parameter, making the value accessible automatically. However, I encountered an error stating that the value is not found when trying to use it in my handleChange fun ...

The parameter 'unknown[]' cannot be assigned to the type 'OperatorFunction'

component.ts initialize() method explains The error message says 'Argument of type 'unknown[]' is not assignable to parameter of type 'OperatorFunction<unknown[], unknown>'. Type 'unknown[]' does not match the si ...

What is the reason behind using `Partial<>` to enclose the Vue props?

I am currently working with a combination of technologies, and I am struggling to pinpoint the root cause of the issue. Here is the Tech Stack: Vue 3 TypeScript Vite VSCode / Volar unplugin-vue-macros (https://github.com/sxzz/vue-macros) unplugin-vue-com ...

What steps should I follow to configure my VS 2013 TypeScript project so that it compiles my TypeScript files while omitting the node_modules folder?

Currently, I am tackling a project in VS 2013 using angular2@beta, having previously worked with IntelliJ. In IntelliJ, I utilized the tsconfig.json file and TypeScript 1.6, which allowed me to exclude node_modules from compilation. However, upon moving to ...

"Troubleshooting the issue of Angular's ViewContainerRef.createComponent malfunctioning on subsequent

My application is structured into Header, Context, and Content sections. I am looking to dynamically inject different components into the Context Component (viewContainerRef) based on the route and other conditions. To achieve this functionality, I have ...

Discovering the ASP.NET Core HTTP response header in an Angular application using an HTTP interceptor

I attempted to create a straightforward app version check system by sending the current server version to the client in the HTTP header. If there's a newer version available, it should trigger a notification for the user to reload the application. Ini ...

Module import in Ionic

I'm encountering an issue with Ionic, Angular, and TypeScript, and I'm feeling a bit lost... I'm trying to call an external function from my file but I keep getting the following error: "Uncaught (in promise): TypeError: undefined is not an ...

"Upon invoking the services provider in Ionic 2, an unexpected undefined value was

I encountered an issue while setting a value in the constructor of my page's constructor class. I made a call to the provider to fetch data. Within the service call, I was able to retrieve the data successfully. However, when I tried to access my vari ...