The Angular 2 application encountered issues following an upgrade to version 2.0.0-rc.1

I recently attempted to update my project to version 2.0.0-rc.1, but encountered this Exception that I cannot seem to resolve. After running ng serve, there are no errors reported, yet in the dist folder /vendor/@angular/router-deprecated directory exists. Any insights on what I might be overlooking?

"http://localhost:4200/vendor/@angular/router-deprecated Failed to load resource: the server responded with a status of 404 (Not Found)
zone.js:461 Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/@angular/router-deprecated
        at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:4200/vendor/zone.js/dist/zone.js:769:30)
        at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:356:38)
        at Zone.runTask (http://localhost:4200/vendor/zone.js/dist/zone.js:256:48)
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:423:34)
    Error loading http://localhost:4200/vendor/@angular/router-deprecated as "@angular/router-deprecated" from http://localhost:4200/app/account.js ; Zone: <root> ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/@angular/router-deprecated(…)consoleError @ zone.js:461
zone.js:463 Error: Uncaught (in promise): Error: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/@angular/router-deprecated(…)consoleError @ zone.js:463
http://localhost:4200/vendor/@angular/router-deprecated Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:4200/traceur Failed to load resource: the server responded with a status of 404 (Not Found)"

Below is the section where routing takes place:

import {Component, provide, Optional, Inject, NgZone} from '@angular/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router-deprecated';
/*import {CliRouteConfig} from './route-config';*/


import {BgtPulseRegisterSimple} from './register-simple/register-simple';
import {BgtPulseLogin} from './login/login';

@Component({
  selector: 'account-app',
  providers: [
    ROUTER_PROVIDERS,
    provide('UserService', { useClass: UserService }),
    provide('NotificationService', { useClass: NotificationServiceMock }),
    provide('RoutingService', { useClass: RoutingServiceMock })
  ],
  template: `
    <h2>Account</h2>
    <nav>
      <a [routerLink]="['Login']" class="nav-login">Login</a>
      <a [routerLink]="['RegisterSimple']" class="nav-register-simple">Register Simple</a>

    </nav>
    <hr>
    <div style="margin:20px; border:1px solid #ccc;">
      <router-outlet></router-outlet>
    </div>
  `,
  directives: [ROUTER_DIRECTIVES, RegisterSimple, FormElements],
  pipes: []
})

@RouteConfig([
  { path: '/login', name: 'Login', component: Login },
  { path: '/register-simple', name: 'RegisterSimple', component: RegisterSimple }

])


export class AccountApp {

  private userStore: any;
  private userState: any = null;

  constructor(
    private ngZone: NgZone,
    @Optional() @Inject('UserStore') UserStore: any
  ) {
    let userData = {
      general: {
        userNodeID: 123,
        username: 'Max.m',
        firstname: 'Max',
        lastname: 'Mustermann',
        salutation: 'Mr',
        birthdate: '23.12.1988'
      },
      address: {
        street: 'Musterstraße',
        houseNumber: '4',
        postCode: '4020',
        city: 'Linz',
        countryCode: 'AT'
      },
      contact: {
        phone: '0123456789',
        email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc919d84bc91889hn89ewnt90dkw0dpncbjdpq">[email protected]</a>',
        newsletter: true
      },
      payment: {
        accountHolderName: 'Max Mustermann',
        bic: 'AT65232323',
        iban: 'AT9837272727272'
      },
      culture: {
        currency: 'EUR',
        language: 'de',
        oddFormat: 'Decimal'
      }
    }

    this.userStore = UserStore;

    this.ngZone.runOutsideAngular(() => {
      this.ngZone.run(() => {
        this.userStore.dispatch({ type: 'USER_LOGIN', data: userData });
      });
    });
  }
}

Answer №1

It seems that router-deprecated is no longer being supported...

After doing some research, I was able to fix my routes by using "angular-cli": "1.0.0-beta.6"

I found this article really helpful in figuring it out... it's a different approach compared to what I was previously doing

Hopefully, this information proves useful to others as well

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

Challenges with promises in Angular Firebase Realtime DB

Having some difficulties with Angular and Firebase Realtime DB. In my database service, I created a function like this: getAllProject() { return firebase.database().ref('project').once('value').then((snapshot) => { if (snapsh ...

A Typescript generic that creates a set of builder function interfaces

Consider a Typescript interface: interface Product { url: URL; available: boolean; price: number; } We need to create a generic type that can produce a builder type based on any given interface: interface ProductSteps { url: (data: unknown) => ...

An error occurred while attempting to post via HTTP: Unexpected TypeError encountered. The properties 'caller' and 'arguments' are restricted function properties and cannot be accessed in this particular context

Attempting to perform a POST request in angular 2 using the following code: let headers = new Headers({'Content-Type': 'application/json'}); let options = new RequestOptions({ headers: headers }); this._http.post(this._healthFromContro ...

Unable to execute dockerfile on local machine

I'm currently attempting to run a Dockerfile locally for a Node TypeScript project. Dockerfile FROM node:20-alpine EXPOSE 5000 MAINTAINER Some Dev RUN mkdir /app WORKDIR /app COPY ./backend/* /app RUN npm i CMD ["npm","start"] However, I encoun ...

Using Angular, we can make an HTTP call and map the response to an

I have a function that fetches information from a REST API in this format: getProducts(category: string): Observable<IProduct[]> { let url = `/rest/getproducts?category=${category}`; return this._http.get<IProduct[]>(url); } The dat ...

Why is FileList.item giving me an error?

Why am I getting an error saying the item property of a FileList variable is not a function? To clarify, I retrieve all files from a file input and store them in an array as type FileList successfully: files: any = []; onImageSelect(files: any = FileList ...

Unable to send HTTP requests to the Ocelot Gateway service from an Angular pod within a Kubernetes cluster

I have a unique setup where my ASP.NET CORE 6.0 application utilizes Ocelot as an entry point for various microservices, all deployed on Kubernetes. Additionally, I have an Angular Application that makes RESTFUL API calls to the backend. The challenge I am ...

Karma Test Error: Disconnected due to lack of communication within a 60000 millisecond timeframe

Executing the "ng test" command for Unit Testing in an Angular project is resulting in some errors. Chrome Headless 120.0.6099.130 (Windows 10) ERROR Disconnected , because no message in 60000 ms. Chrome Headless 120.0.6099.130 (Windows 10): Executed 404 ...

What is the best approach to locally extending a global interface in TypeScript?

Can someone explain the concept of extending a global interface locally as mentioned in this GitHub post? I find it difficult to grasp the idea due to lack of explanation in the post. The post in question is as follows. you can extend a global interface ...

Populating a table with JSON information

Embarking on my Angular journey, I decided to populate a table with data from a JSON file. To my surprise, the table didn't quite match my expectations. Let's dive in. This is the table code: <table class="table table-sm table-bordere ...

How to fix the issue of not being able to pass arguments to the mutate function in react-query when using typescript

Currently, I am exploring the use of react-query and axios to make a post request to the backend in order to register a user. However, I am encountering an error when attempting to trigger the mutation with arguments by clicking on the button. import React ...

Typescript - Stripping multiple characters from the start and end of a string/Retrieving attributes of a JSON list element

My challenge involves a string like the following : "{"element":"634634"}" My goal is to eliminate {"element":" which remains constant, as well as the final character "}. The only variable component is 634634. How can I achieve this? Alternatively, can ...

Refreshing Firebase tokens

Currently, I am utilizing Firebase for authentication within my React application. Additionally, I have an Express server that provides a REST API. This API includes a middleware function that utilizes firebase-admin to verify the idToken sent from my app ...

Angular predictive text selection menu

I'm trying to implement an input field with autocomplete functionality. The goal is to have the input field display dropdown values retrieved from a database as I type in it. I've been attempting to achieve this using angular material, but so far ...

Angular: Keeping array bindings synchronized and up-to-date

I am working on a project that involves managing a list of items using a service. I need an angular component to display these items and update in real-time whenever changes occur. The list is quite extensive, so I prefer updating it based on change event ...

Splitting the div into two columns

I've encountered various solutions to this issue, but when I integrate an Angular2 component inside the divs, it fails to function properly. Here is my progress so far: https://i.stack.imgur.com/qJ8a9.jpg Code: <div id="container"> <div ...

Angular 2 repeatedly pushes elements into an array during ngDoCheck

I need assistance with updating my 'filelistArray' array. It is currently being populated with duplicate items whenever content is available in the 'this.uploadCopy.queue' array, which happens multiple times. However, I want to update ...

Is casting performed by <ClassName> in typescript?

According to the Angular DI documentation, there is an example provided: let mockService = <HeroService> {getHeroes: () => expectedHeroes } So, my question is - can we consider mockService as an instance of HeroService at this point? To provide ...

What causes the distinction between resolve("../....") and resolve("foo")?

Because of various node versions and incompatible ABIs, I have to load a C++ addon relatively since they are located in different locations with different ABI versions. However, the issue I am facing is quite simple. Why do these two calls produce differe ...