CODEWITHSUNDEEP
angularroutessystemjs
dewwwald
dewwwald

Reputation: 297

Angular2 [email protected] throwing a systemjs related error

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

Upvotes: 0

Views: 58

Answers (1)

dewwwald
dewwwald

Reputation: 297

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);

Upvotes: 1

Related Questions