0

Angular2 systemjs configuration fails when I add router to the config:

var map = { 'app': 'app', // 'dist', '@angular': 'core/@angular', '@angular/router': 'core/@angular/router', 'angular2-in-memory-web-api': 'core/angular2-in-memory-web-api', 'rxjs': 'core/rxjs' }; // packages tells the System loader how to load when no filename and/or no extension var packages = { 'app': { main: 'main.js', defaultExtension: 'js' }, '@angular/router': { main: 'index.js', defaultExtension: 'js' }, 'rxjs': { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, };

The error is:

Error: TypeError: router_1.provideRouter is not a function(…)

What is the proper config?

I changed the systemjs config to no longer specify router. Now I can confirm that the entire folder is being copied over.

my code in app/config/app.routes.ts is:

import { RouterConfig, provideRouter } from '@angular/router'; import { HomeComponent } from '../components/home/home.component'; export const routes: RouterConfig = [ { path: 'who', component: HomeComponent } ]; export const APP_ROUTER_PROVIDER = [ provideRouter(routes) ];

Then in app/main.ts I have:

import { bootstrap } from '@angular/platform-browser-dynamic'; import { LayoutComponent } from './components/layout/layout.component'; import { APP_ROUTER_PROVIDER } from './config/app.routes'; bootstrap(LayoutComponent, [ APP_ROUTER_PROVIDER ]) .catch(err => console.error(err));

This seem correct to me as all the tutorial code is there.

My project structure is as follow:

node_modules/ public_html/ - app/ - index.html - system.config.js typings/ tsconfig.json typings.json
Improve this question
8
  • 2
    can you check correct version of router is copied in core folder? Commented Jul 31, 2016 at 13:26
  • If I may ask, how do I check that? @ArpitAgarwal Commented Jul 31, 2016 at 19:32
  • Scratch that. Yes it is /core/@angular/router.umd.js. I think I need to have it set to be index? Commented Aug 1, 2016 at 4:58
  • 1
    yes you need to copy full folder as you are point ot index but i Think you can worked with UMD as well by removing any entires you added and let router come from UMD like other angular depencies. Have a look at package.json and in very last line you will see version downloaded or run npm ls @angular/router Commented Aug 1, 2016 at 6:29
  • 1
    See the comments here stackoverflow.com/q/38701605/652850 may be missing typings install Commented Aug 1, 2016 at 16:25

1 Answer 1

Reset to default
1

I made two crucial mistakes to cause this issue.

  1. Updated to latest angular dependencies without reconfiguring or rebuilding.
  2. My typings and other project config was moved around.

I fixed the above issue by moving the config to the same folder. /public_html. And installing node modules there.

This caused an issue where things was broken. I reconfigured according to the latest ng tutorial (Quick start). Now one issue was remaining. I had to upgrade rxjs to "rxjs": "^5.0.0-beta.10" and reinstall again. And then install its dependency and see bellow as I added it to systemjs:

npm install [email protected] --save-dev

The only remaining thing now is that the core file is no longer created. So i referenced the node_modules directly as in the tutorial.

The html:

<script src="/node_modules/core-js/client/shim.min.js"></script> <script src="/node_modules/zone.js/dist/zone.js"></script> <script src="/node_modules/reflect-metadata/Reflect.js"></script> <script src="/node_modules/systemjs/dist/system.src.js"></script>

The systemjs:

/** * System configuration for Angular 2 samples * Adjust as necessary for your application needs. */ (function(global) { // map tells the System loader where to look for things var map = { 'app': 'app', // 'dist', '@angular': 'node_modules/@angular', '@angular/router': 'node_modules/@angular/router', 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 'symbol-observable': 'node_modules/symbol-observable', 'rxjs': 'node_modules/rxjs' }; // packages tells the System loader how to load when no filename and/or no extension var packages = { 'app': { main: 'main.js', defaultExtension: 'js' }, 'rxjs': { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, 'symbol-observable': { main: 'index.js', defaultExtension: 'js' }, }; var ngPackageNames = [ 'common', 'compiler', 'core', 'forms', 'http', 'platform-browser', 'platform-browser-dynamic', 'router', 'router-deprecated', 'upgrade', ]; // Individual files (~300 requests): function packIndex(pkgName) { packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; } // Bundled (~40 requests): function packUmd(pkgName) { packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; } // Most environments should use UMD; some (Karma) need the individual index files var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; // Add package entries for angular packages ngPackageNames.forEach(setPackageConfig); var config = { map: map, packages: packages }; System.config(config); })(this);
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.