Angular 2.0 encountered an unexpected value from the module 'AppModule' which appears to be an '[object Object]'

Every time I attempt to load my angular version 2.0 application, I encounter the following error: (index):21 Error: Error: Unexpected value '[object Object]' imported by the module 'AppModule'

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { searchComponent } from './search.Component'; 
import { landingComponent } from './landing.Component'; 

export const routes: Routes = [
{
    path: '',
    component: searchComponent
},
{
    path: 'search',
    component: searchComponent
}];
export const routedComponents = [searchComponent, landingComponent];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { landingComponent } from './landing.Component'; 
import { searchComponent } from './search.Component'; 
import { routes, routedComponents } from './app.routing';
import { homeScript } from './Services/homeScript';

@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routes
],
declarations: [
    landingComponent,
    searchComponent,
    routedComponents
],
providers: [
    homeScript
],
bootstrap: [landingComponent]

})
export class AppModule { }

Type script for booting

///<reference path="./../typings/globals/core-js/index.d.ts"/>
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './appModule';

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(success => console.log(`Bootstrap success`))
  .catch(error => console.log('GUY  ' + error));

If I exclude 'routes' from the imports, the landing page loads without any errors. My suspicion lies within the routing, as omitting 'routes' in the AppModule allows the landing page to load correctly. Despite several attempts, I have been unable to pinpoint the root of the issue. Any assistance on this matter would be greatly appreciated.

Answer №1

One common error is the inclusion of routedComponents in the declarations section, which causes an exception since it is not a Directive, Component or Pipe. To resolve this issue, simply remove routedComponents from the declarations array within your module.

Answer №2

To update the import array, simply exclude "routes" and include "routing" as shown below:

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing
]

Answer №3

Ensure that your modules are accurately defined with @NgModule and double-check the spelling of your classes to ensure they align correctly.

It should be noted that this information pertains to the most recent release of Angular 2.

For further discussions on this topic, refer to the following thread: Angular 2 Release "Unexpected value 'ElementRef' imported by the module"

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

Troubleshooting deployment issues of an Angular 5 and ASP.NET Core 2.1 application on an nginx server

Trying to get my Angular 5 application deployed on Digital Ocean Ubuntu 16.4 Nginx, but running into some issues. I can successfully access the API endpoints: http:://ipaddress/api/values However, I am facing problems with the Angular website itself: T ...

Obtain data from the DOM using ng-select in Angular 10

In my Angular 10 project, I have certain views where I utilize ng-select to showcase and obtain data. The QA team has tests in place that depend on element id and DOM value, specifically designed for basic select elements. With a simple select, we are able ...

What steps can be taken to properly set up routing in Angular 4 in a way that organizes feature-modules routes as children in the

Organizational layout of projects: /app app.module.ts app.routing.ts : : /dashboardModule /manage-productModule manage-product.module.ts manage-product.routing.ts Within 'app.routing.ts' [ { path : '&a ...

Observer function simulated by SinonStub

I am currently testing express middleware using sinon.js My goal is to verify that it sends a specific JSON response and prevents the request from moving on to the next middleware or request handler. const middleware = (req: Request, res: Response, nex ...

Patiently waiting for the component variable to be assigned through subscription

I am facing an issue with two calls in my component. The second call depends on the result from the first call. In the first call, I set the value for my component variable "locked". The second call should only be executed when the result is true, meaning ...

Exploring the inner components of an entity without the need for external tools

I am currently enhancing TypeScript usage in a project by implementing generics. The challenge I am facing involves dealing with a complex object retrieved from the backend, which consists of a class with numerous attributes, most of which are classes them ...

Synchronization Problem with Custom Validator in Angular Custom Form Control

Implementing a custom control component that includes both ControlValueAccessor and Validator interface functionalities. Unfortunately, this custom control is experiencing difficulties in properly displaying errors from the consumer component's valid ...

Angular - The 'options' property is not found in the 'HTMLOptionElement' type

Currently, I am attempting to modify the choices in a dropdown menu based on the selection made from another dropdown. This problem led me to come across a helpful resource on a website called "Form Select Change Dynamic List Option Elements Tutorial". How ...

I am puzzled by this error in Typescript: "Why does the element have an 'any' type when the Object type lacks an index signature?"

Looking to extract an array of keys from an object with nested properties, my current code: public static getKeys(obj: Object) { let keys: string[] = []; for (let k in obj) { if (typeof obj[k] == "Object" && obj[k] !== null) { ...

Ensuring that all observables within a for loop have completed before moving on to the next block of code

Here is a scenario where the following code snippet is used: getPersons().subscribe( persons => { for (const person of persons) { getAddress(person.id).subscribe( address => { person.addres ...

Utilizing Angular for enhanced search functionality by sending multiple query parameters

I'm currently facing an issue with setting up a search functionality for the data obtained from an API. The data is being displayed in an Angular Material table, and I have 8 different inputs that serve as filters. Is there a way to add one or more s ...

Using jest in typescript to simulate HttpRequest body and InvocationContext in @azure/functions

I have the following function and I am trying to write a test for it, but I'm having trouble figuring out how to mock HttpRequest import { app, HttpRequest, HttpResponseInit, InvocationContext } from "@azure/functions"; export async function ...

Is it possible to detach keyboard events from mat-chip components?

Is there a way to allow editing of content within a mat-chip component? The process seems simple in HTML: <mat-chip contenteditable="true">Editable content</mat-chip> Check out the StackBlitz demo here While you can edit the content within ...

The type 'EventTarget & HTMLTextAreaElement' does not contain the property 'files'

When trying to call a method in React TypeScript on the onChange Event of a MUI Input field, an error is encountered. The error message received is: Type '(event: { target: { files: any[]; }; }) => void' is not assignable to type 'Chang ...

How to customize toggle icon in Angular Material mat-slide-toggle

I'm currently using Angular6 to design my user interface. The default style of the mat-slide-toggle button is shown below: https://i.stack.imgur.com/tIqus.png However, I would like the toggle button to have the appearance of the material-icons togg ...

Creating a new object in Typescript with properties that are a subset of another object's properties, determined by an array

The title I wrote might be a bit complicated, so let me clarify my intentions below. Imagine I have a specific type for a document that contains some data: type Doc<TData extends {}> = { data: TData; } In addition, there is a function where I can ...

The orderBy filter seems to be malfunctioning

I'm utilizing ngx-pipes from this webpage: https://www.npmjs.com/package/ngx-pipes#orderby Specifically, I am using the orderBy pipe. However, when I implement the orderBy pipe in my HTML, the information is not being ordered correctly (from minor t ...

Error: Missing provider for MatBottomSheetRef

While experimenting in this StackBlitz, I encountered the following error message (even though the MatBottomSheetModule is imported): ERROR Error: StaticInjectorError(AppModule)[CountryCodeSelectComponent -> MatBottomSheetRef]: S ...

Maximizing the efficiency of enums in a React TypeScript application

In my React application, I have a boolean called 'isValid' set like this: const isValid = response.headers.get('Content-Type')?.includes('application/json'); To enhance it, I would like to introduce some enums: export enum Re ...

Set up the hardware back button to respond to the current route condition in Ionic 4

Upon launching my Ionic4 application, users are directed to a login page where they can input their credentials. Once logged in successfully, they are redirected to the tabbed interface ion-tabs. The login URL is set to localhost:8100/#/login. The reques ...