Angular4 Error: router_deprecated_1.RouteConfig is not a function

Question

I have an App I made locally using the new router from Angular 4 but routes don't work in Plunker with it, rather, you have to use the old deprecated router in order for routes to work properly in Plunker. I'm porting my app from my local machine to Plunker for a DEMO and everything works fine except routing. This is the error I get on the console:

Error: (SystemJS) TypeError: router_deprecated_1.RouteConfig is not a function

Don't know what is wrong. Could someone help plz?. Here are the files where the deprecated router gets implemented:

SystemJS Config File

var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest'){
  angularVersion = ''; //picks up latest
}
else {
  angularVersion = '@' + window.AngularVersionForThisPlunker;
}


System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    target: "es5",
    module: "commonjs",
    strict: true,
    sourceMap: false,
    noImplicitAny: true,
    moduleResolution: "node",
    experimentalDecorators: true,
    emitDecoratorMetadata: true,
    lib:[
            "es2015",
            "dom"
    ]
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {

    'app': './src',
    '@angular/core': 'npm:@angular/core'+ angularVersion + '/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
    '@angular/common/http': 'npm:@angular/common' + angularVersion + '/bundles/common-http.umd.js',
    '@angular/compiler': 'npm:@angular/compiler' + angularVersion  + '/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
    '@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
    '@angular/router-deprecated': 'npm:@angular/router-deprecated',

    '@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
    '@angular/common/http/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-http-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
    'tslib': 'npm:tslib@1.6.1',
    'rxjs': 'npm:rxjs',
    'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

Index.html

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <script type="text/javascript" charset="utf-8">
      window.AngularVersionForThisPlunker = 'latest'
    </script>
    <title>DEMO APP</title>
    <link rel="stylesheet" href="style.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <app-root></app-root>
  </body>

</html>

main.ts

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from './app';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
import { provide } from '@angular/core';


platformBrowserDynamic().bootstrapModule(AppModule, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy})
]);

app.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms"; 
import { APP_BASE_HREF } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http'; 

import { AppComponent } from './app.component';
import { PostsComponent } from './app.postsComponent';
import { CommentsComponent } from "./app.commentsComponent";
import { NewPostComponent } from "./app.newPostComponent";
import { DirectiveComponent } from "./app.directiveComponent";
import { NotFoundComponent } from "./app.notFoundComponent";
import { CounterDirective } from "./app.counter.directive";

import { DataService } from './data.service';
import { SortPipe } from "./app.sortPipe";


@NgModule({
    declarations: [
        SortPipe,
        AppComponent,
        PostsComponent, 
        CommentsComponent,
        NewPostComponent, 
        NotFoundComponent,
        DirectiveComponent,
        CounterDirective
    ],
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule, 
        HttpModule
    ], 
    providers: [
        DataService,
        { provide: APP_BASE_HREF, useValue: '/' }
    ],
    bootstrap: [AppComponent]
})


export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated';

import { AppComponent } from './app.component';
import { PostsComponent } from './app.postsComponent';
import { CommentsComponent } from "./app.commentsComponent";
import { NewPostComponent } from "./app.newPostComponent";
import { DirectiveComponent } from "./app.directiveComponent";
import { NotFoundComponent } from "./app.notFoundComponent";
import { CounterDirective } from "./app.counter.directive";

@Component({
  selector: 'app-root',
    directives: [ROUTER_DIRECTIVES],
  template: `     <div class="header">
                    <div class="navbar navbar-default" role="navigation">
                      <div class="container">
                        <div class="navbar-header">

                          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                          </button>

                          <a class="navbar-brand" routerLink="/">Training App</a>
                        </div>

                        <div class="collapse navbar-collapse" id="js-navbar-collapse">

                          <ul class="nav navbar-nav">
                            <li><a [routerLink]="['/PostsComponent']">Posts</a></li>
                            <!---<li><a [routerLink]="['/NewPostComponent']>New Post</a></li>
                            <li><a [routerLink]="['/DirectiveComponent']">Directives</a></li>--->
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                  <router-outlet></router-outlet>
                `,
})

@RouteConfig([
  {path: '/', as: 'PostsComponent', useAsDefault: true, component: PostsComponent}
])

export class AppComponent {

}

Here's the Plunker where the problem can be seen:

DEMO App Plunker

Look @ src/main.ts, then @ src/app.component.ts

Routing has changed a lot, to check latest stable version read [this document Routing & Navigation](https://angular.io/guide/router), Cheers!! — Madhu Ranjan, Oct 16 '17 at 13:30
Angular4 has a new routing module but it doesn't work with Plunker. Only the old deprecated router Angular4 has works on Plunker. That's why I was asking for help to see if someone could spot where I'm wrong on my Plunk. — Jose Vasconcellos, Oct 16 '17 at 21:15
In the link I shared there is very detailed example in [Plunker](https://angular.io/generated/live-examples/router/eplnkr.html).. — Madhu Ranjan, Oct 16 '17 at 21:20
I reconfigured my App the way it's on your example, very good example by the way, but for some reason the default route when I open the app for the first time is NOT '/' but rather '/pHMsBwZCZERq25yq' which takes me to the 'Not Found' page directly. On your example I get this on the console: NavigationStart(id: 1, url: '/'), which takes you the your app's homepage. Mine looks like this: NavigationStart(id: 1, url: '/pHMsBwZCZERq25yq') not sure what I need to change here. — Jose Vasconcellos, Oct 17 '17 at 16:22

Madhu Ranjan · Answer 1 · 2020-08-31T18:36:28.903

0

Basically base href plays a crucial role with routing,

when we run application in Plunker we need to set base href like below so that it sets it correctly,

<script>document.write('<base href="' + document.location + '" />');</script>

I have updated your Plunker to fix issue,

edited Aug 31 '20 at 18:36

answered Oct 17 '17 at 16:23

Madhu Ranjan

17,334
7
60
69

Angular4 Error: router_deprecated_1.RouteConfig is not a function

1 Answers1