The name 'XXX' is nowhere to be found

I encountered an error stating "Cannot find name 'Calendar Component'" while attempting to add a route to a component from another module in my app.module.ts file.

Below is the content of my app.module.ts file:

// Importing Modules //
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {RouterModule, Routes} from '@angular/router';

import { CalendarModule } from './scripts/calendar/calendar.module';

// Importing Components //
import { AppComponent } from './app.component';

// Declaration of Routes //

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    CalendarModule,
    BrowserModule,
    NgbModule.forRoot(),
    RouterModule.forRoot([
      {
           path: 'calendar', component: CalendarComponent
      }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

and here is the content of my calendar.module.ts file:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { CalendarComponent } from './calendar.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule
  ],
  declarations: [CalendarComponent],
  exports: [CalendarComponent]
})
export class CalendarModule { }

Although I've declared and exported the calendar component in my calendar.Module.ts file (note: calendar.component.ts exists but has been omitted for clarity), my app module seems unable to recognize the component I'm trying to pass in the routes array. Any insights on why this might be happening?

For reference, I am working with Angular v5.2.0

Answer №2

To include the calendar component in your Angular application, you need to insert an import statement in the app.module.ts file.

import { CalendarComponent } from '[location of calendar component]';

It's important to distinguish between TypeScript imports and Angular's ngModule imports array:

import { .. } from '@angular/..' refers to typescript imports, allowing you to utilize identifiers declared in a typescript file located at '@angular/..' (typically index.ts in that directory).

imports: [ module1, module2, ... ]
specifies a list of modules whose exported components, directives, and pipes will be accessible to templates within the current module.

Modules operate within their own scope, meaning that variables, functions, classes, etc., declared in a module are only visible internally unless explicitly exported. Similarly, to utilize entities exported from another module, they must be imported using appropriate syntax. Blockquote

For further insights, please refer to this link.

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

Creating Blobs with NSwag for multipart form data

The Swagger documentation shows that the endpoint accepts multipart form data and is able to receive form data from a client. However, the TypeScript client generated by NSwag appears to be unusable as it only accepts Blob. uploadDoc(content:Blob): Observ ...

Enhance Ng2-smart-table with a custom rendering component

I am attempting to implement a custom Renderer component in my ng2-smart-table, but I keep encountering the following error message. No component factory found for undefined. Have you added it to @NgModule.entryComponents? at…, …} What's baf ...

Having trouble with accessing properties like `d3.svg()`, `d3.scale()` and other features of d3js within an Angular 2 environment

Struggling to incorporate d3.js into angular2. Below is the command I used to install d3 in Angular2: npm install --save d3 install --save-dev @types/d3 This is how my package.json appears: { "name": "my-app", "version": "0.0.0", "license": "M ...

Problem encountered during NextJS build: ReferenceError - 'window' is undefined

While I am in the process of developing my app, I have encountered a perplexing issue with a ReferenceError: window is not defined. This error seems to be happening even though I am utilizing 'use client' "use client"; import React, { u ...

React Testing Library - Screen debug feature yields results that may vary from what is displayed in the

Greetings to all who come across this message. I have developed a tic-tac-toe game in typescript & redux with a 3x3 grid, and now I am facing some challenges while trying to write unit tests for it. Consider the following game board layout where X represen ...

Exploring ways to retrieve the chosen value from a personalized dropdown menu in React?

I'm currently utilizing styled components along with typescript to retrieve the selected option value of a customized dropdown. However, I am encountering an issue where the value does not update as expected. Interestingly, when I remove the opacity f ...

Developing custom events in an NPM package

Developing a basic npm package with signalr integration has been my recent project. Here's how it works: First, the user installs the package Then, the package establishes a connection using signalr At a certain point, the server triggers a function ...

Using React with Typescript: How to pass a function as a prop to a child component and call it from within

I am trying to pass a function as a prop to a child component so that the child can call it. Here is my parent component: interface DateValue { dateValue: string; } const Page: React.FC = () => { const dateChanged = (value: DateValue) => { ...

Attempting to leverage the combination of mocha, ES6 modules, and ts-node while utilizing the --experimental-loader option

I've been attempting to make the ts-node option --experimental-loader function alongside mocha, but so far I haven't had any success. Before I started compiling ES6 modules, running mocha tests was as simple as: "test": "nyc --reporter=html mocha ...

Error in TypeScript when accessing object using string variable as index

Currently, I am facing a challenge in my project where I am dynamically generating routes and managing them in an Elysia(~Express) application. The issue arises when TypeScript's type checking system fails to index an object using a string variable. S ...

Error message: Angular encountered a SyntaxError when parsing JSON data due to an unexpected character at the beginning of the data

Encountering SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data After validating the JSON, it was discovered that the error lies in: let json = JSON.stringify(user); let params = "json="+json; // The error se ...

Access a router and showcase a new URL in the browser using Angular 2

When using the router.navigate method to navigate to a specific path, it is possible to display a different URL in the browser than the one being navigated to. For example, if I want to navigate to the path /open/quote using this.router.navigate(['/o ...

Manually Enroll Node Module

Question: I am tackling a challenge in my TypeScript project where I need to interact with multiple APIs that are not available locally on my computer, but exist on the web. The code compiles without issues on my local machine as I have all the API declar ...

The issue I'm encountering in Angular 2 with Angular Material is the inability to delete specific items from a mat

I successfully created a table in Angular 2 using angular material. I have implemented two methods: transferSelectedRows, which moves selected rows from the table to the Selected Rows section, and removeSelectedRows, which should delete the corresponding l ...

The Radio Button's value appears in a distinct way on Ionic Angular

I am currently working with the Ionic framework and I am trying to display data values on radio buttons. However, I am facing difficulties in retrieving the correct value and setting it appropriately. index.html <td> <label>{{learn ...

``Implementing a method to save the output of an asynchronous request in a global variable for future manipulation

It's been a week and I still can't figure this out. Being new to front-end development, I'm struggling with storing the response from subscribe in a global variable for future use. ngOnInit(): void { this.http.get<APIResponse>('ur ...

What is the best way to retrieve the final entry from a JSON file while using json server with Angular?

I'm currently working with a JSON file where I am making post requests followed by get requests. My goal is to retrieve the latest record in each get request after submitting a post request. For example: [ { "id": 1, "title&qu ...

issue with mat-select in a dialog not functionering correctly

In my current project, I am working on implementing a feature that requires the user to select an option from a drop-down menu and confirm their choice by clicking an "OK" button. To achieve this functionality, I am utilizing Angular Material. However, I h ...

Exploring TypeScript: Determining the data type of an object key within the object

Apologies for the vague title, I'm struggling to articulate my problem which is probably why I can't find a solution! Let me illustrate my issue with a snippet of code: type Type<T> = { key: keyof T, doStuff: (value: T[typeof key]) =& ...

Launching a website by running ng serve on an EC2 instance running Ubuntu 16.04

I have been trying to work on this Git project, but I'm facing issues in getting the website to function properly on my server. Oddly, everything seems to be working fine on my Mac. Despite not encountering any error messages, I am unable to access t ...