Navigating between components in angular2 modules: A tutorial

Currently, I am utilizing angular2 Final version for my development tasks.

Within my project, I have established 3 distinct modules:

  1. AppModule
  2. ProjectModule
  3. DesignerModule

In the past, I solely had AppModule which integrated the following RoutingModule successfully:

import {NgModule} from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {ProjectManagerComponent} from './project-manager/project-manager.component';
import {DesignerComponent} from './designer/designer.component';

const appRoutes: Routes = [
  {path: '',redirectTo: 'project-manager',pathMatch: 'full'},
  { path: 'project-manager', component: ProjectManagerComponent },
  { path: 'designer/:id', component:DesignerComponent }  
];

@NgModule({
  imports:[RouterModule.forRoot(appRoutes)],
  exports:[RouterModule]
})
export class AppRoutingModule { }
export const routingComponents=[ProjectManagerComponent,DesignerComponent]

However, recently I've segregated ProjectManager and Designer into separate NgModules. In these new modules, the components are contained within the declarations section.

I am curious to know if it's feasible to route to these newly created modules using the existing routing configuration or if modifications are necessary.

Currently facing issues as my routing functionality has ceased working.

Seeking insights or suggestions on this matter.

Answer №1

instead of

export const routingComponents=[ProjectManagerComponent,DesignerComponent]

you can simply

export const routing = RouterModule.forRoot(appRoutes);

Considering that your app.module.ts is already acquainted with ProjectManagerComponent and DesignerComponent from their respective modules. All you need to do now is guide it on where to locate them.

Within your app.module.ts, you would include:

// Other imports
    import {routing} from './app.routes;'
    @NgModule({
      imports:[routing, /*Other Modules*/],
    })

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

Shade within the autocomplete

Is there a way to make the color property warning work on my autocomplete element at all times, rather than just on focus? Any suggestions or workarounds? Check out this code sandbox for reference. I really want the warning color to be visible constantly ...

An error notification received from the command "jspm install jquery"

As I follow the tutorial on the jspm.io site, everything goes smoothly until I reach step 3. When I try to execute jspm install jquery, an error message pops up. The error reads: warn Error on getOverride for jspm:github, retrying (2). ReferenceError: ui ...

Issue with Angular 13 Sass module failing to import specified file during compilation

After upgrading a legacy app to Angular 13, I encountered an issue where certain stylesheets were not being added correctly to the compiled styles.css. This was working fine in Angular 12 with webpack under version 5 and node-sass. I suspect this change i ...

Display additional input field using Jquery when text is entered in the textbox

Is there a way to display the input field #f_past_data when the text field #f_past_farmaco is filled out? The field #f_past_farmaco is for entering text. I attempted the following solution but it did not work as expected. $('label[for=f_past_data], ...

What is the most effective method for building this item?

Looking to create an object, let's call it "car": function car(name, speed, options){ this.name = name; this.speed = speed; this.options = options; } When it comes to the "options", I thought of using an array: var carMustang = new car("Musta ...

Analyzing XML markers

Extracting specific values from XML tags We are looking to extract and display only the tags that contain the words "sports" and "secure" within the <str name="word">WORD</str> tag in the following XML: XML <response> <lst name ...

Creating a compact, production-ready code using the webapp generator in Gulp

I recently used the webapp generator to scaffold a project, but encountered an issue where the project only worked when accessed through localhost and not when opening the files directly in the browser with a file scheme. The URL http://localhost:9000/ cor ...

Modifying the content of the front-end HTML file according to the data retrieved from express-session

I've been working on creating a login page for my web application using express-session. So far, I've successfully implemented the functionality to validate login credentials. After confirming a valid login, I execute the following code within t ...

What is the method for configuring Vue to utilize a value other than the value property in form fields?

I am facing a unique challenge. Consider this: <select name="screw[type]" v-model="form.screw.type"> <option value="My value" ><?php _e('My value', 'fiam'); ?></option> //[...] Now, in another part of my ...

Contrasts between the storage of data in a static function versus a static object

Trying to figure out the best way to reset a react class component back to its initial state, I came across two different implementations. In my own version, I created an object with initial values and set the component's state equal to it: // My imp ...

The onLoad event of the <picture /> element is not consistently being triggered

I'm encountering an issue where the onLoad event on the picture element is not consistently firing. I have tried adding the onload event listener to both the picture and image elements, but sometimes they both fire and other times neither of them do. ...

Relocating JavaScript scripts to an external file on a webpage served by Node.js' Express

When using Express, I have a route that returns an HTML page like so: app.get('/', function(req, res){ return res.sendFile(path.resolve(__dirname + '/views/index.html')); }); This index.html file contains multiple scripts within t ...

Express.JS failing to save data to file when using NeDB

Currently, I am developing a bulk import feature for my personal password manager and I have encountered a problem. The issue arises when trying to import an array of passwords using the forEach() method to iterate through each one. After calling the inse ...

The young ones whose height is 80% that of their taller parent's

Achieving the Desired Height In order to set a div with 80% of the height of its parent element without a defined height, I am aiming for a responsive effect. The Layered Layout Issue Within my layout consisting of five layers - .header, .site, .contain ...

Why do I keep getting errors in TypeScript when I manipulate DOM elements using getElementsByClassName(), even though my application still functions properly?

I am dealing with an Angular2 application. Unfortunately, I have had to resort to using the following code within a component method (I know it's not ideal, but...): let confirmWindowDOM = document.getElementsByClassName('modal')[0]; confir ...

Ionic application encountering 'push' property error in MQTT only when used within an if statement

Being new to Ionic and MQTT, I could really use some help with an issue I am facing. In my development environment of Ionic CLI PRO 4.3.1, I am attempting to navigate to a new page when a message is received from an MQTT topic. However, I am encountering a ...

Why isn't the customer's name a part of the CFCustomerDetails class?

Currently, I am utilizing the cashfree-pg-sdk-nodejs SDK to integrate Cashfree payment gateway into my application. Upon examining their source code, I noticed that the CFCustomerDetails class does not include the customerName attribute. https://i.stack.i ...

Angular 5 introduces a bespoke directive that allows for element repetition within the framework

Looking to create a directive that contains an array of elements, and when the directive is bound to any element, that element will repeat the number of times equal to the length of the array. For example, if the array has 3 elements, the element will re ...

Tips for increasing the size of a textarea

I'm attempting to extend a textarea by adjusting the margin-top property, but it doesn't seem to be working as intended. Here is the code snippet in question: #sqlcontainerLoggedInPage2 { margin-top: 60px; } <div class="container-fluid" i ...

Learn the process of extracting a particular value from JSON data and displaying it in HTML by utilizing AngularJS's ng-repeat directive

As a newcomer to angularjs, I am encountering difficulties retrieving and displaying a specific value from a json file in order to showcase it on my view page using angularjs ng-repeat for image source. My goal is to repeat the json file based on a particu ...