CODEWITHSUNDEEP
angularrouter
Mahdi Jadaliha
Mahdi Jadaliha

Reputation: 1977

angular 2 router error: router_1.provideRouter is not a function

I get error router_1.provideRouter is not a function when I use provideRouter function in bootstrap.

angular2-polyfills.js:349 Error: router_1.provideRouter is not a function(…)

here is my boot.ts code:

import {bootstrap}                     from 'angular2/platform/browser';
import {AppComponent}                  from './app.component';
import {Dashboard1Component}           from './dashboard1.component'
import {TextAreaComponent}             from './textArea.component'
import { provideRouter }               from 'angular2/router';
const router =[
  { path: 'link1', component: TextAreaComponent },
  { path: 'link2', component: Dashboard1Component }
];

bootstrap(AppComponent,[provideRouter(router)]).catch(err => console.error(err));;

and here is my script in index.html to load app and libs without using system.config.js:

<!-- Angular 2 beta parts -->
<script src="http://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="http://code.angularjs.org/tools/typescript.js"></script>
<script src="http://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
<script src="http://code.angularjs.org/2.0.0-beta.17/Rx.js"></script>
<script src="http://code.angularjs.org/2.0.0-beta.17/angular2.dev.js"></script>
<script src="http://code.angularjs.org/2.0.0-beta.17/router.dev.js"></script>


<!-- 2. Configure SystemJS -->
<script>
  System.config({
    transpiler: 'typescript',
    typescriptOptions: { emitDecoratorMetadata: true },
    packages: {'components': {defaultExtension: 'ts'}}
  });
  System.import('components/boot')
        .then(null, console.error.bind(console));
</script>

Note that I don't have router_1 variable anywhere in my code. I appreciate guidance. thanks.

Upvotes: 2

Views: 3025

Answers (2)

T_coder
T_coder

Reputation: 151

This fixed my problem, as someone else stated, the modules are in bundles so you have to update: systemjs.config.js 

var map = {
    '@angular/router':  'node_modules/@angular/router'
}

also the app.routes.ts

import { provideRouter }    from '@angular/router';
import { RouterConfig }     from  '@angular/router';

Upvotes: 0

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657841

provideRouter was introduced with the new router shipped with RC.3 and was not available in beta.17

See also https://angular.io/docs/ts/latest/guide/router.html

Upvotes: 1

Related Questions