Angular 2 RC6 problems with SystemJS

Question

I'm having some problems getting my app to run after updating to RC6.

I changed my systemjs due to the official example from changelog.

But I still get compile errors like this one: "Module '"D:/Myproject/WebClient/node_modules/@angular/router/index"' has no exported member 'ROUTER_DIRECTIVES'."

It looks like the compiler takes the default index.js file instead the umd package... The compiling is done by gulp task with the following options:

"module": "system", "moduleResolution": "node", "target": "ES5", "experimentalDecorators": true, "emitDecoratorMetadata": true, "allowSyntheticDefaultImports": false I get this errors for router module and forms module.

Router is V3.0.0-rc.2 and forms is V.2.0.0-rc6

Think it is more a problem that my systemJs is not read correctly anyhow.

SystemJS:

var map = {
'app': 'public/app',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'rxjs': 'npm:rxjs',
'symbol-observable': 'npm:symbol-observable',
'moment': 'npm:moment',
'ng2-charts': 'npm:ng2-charts',
'ng2-translate/ng2-translate': 'npm:ng2-translate',
'angular2-highcharts': 'npm:angular2-highcharts',
'highcharts/highstock.src': 'npm:highcharts',
'primeng': 'npm:primeng'
};

var packages = {
'app': { main: 'main', defaultExtension: 'js' },
'rxjs': { main: 'Rx.js',  defaultExtension: 'js' },
'moment': { main: 'moment', defaultExtension: 'js', type: 'cjs'},
'symbol-observable': { main: 'index.js', defaultExtension: 'js' },
'ng2-charts': { main: 'ng2-charts', defaultExtension: 'js' },
'ng2-translate/ng2-translate': { main: 'ng2-translate', defaultExtension: 'js' },
'angular2-highcharts': { main: 'index', defaultExtension: 'js' },
'highcharts/highstock.src': { main: 'highstock.src', defaultExtension: 'js' },
'primeng': { defaultExtension: 'js' }s
};


System.config({
map: map,
packages: packages,
paths: {
    // paths serve as alias
    'npm:': 'node_modules/'
}
//format: 'register'
});

Aynbody any idea? Thanks in advance

Answer 1

As per new change in rc6 deprecated directives are removed and for default angular functionality ngModule is introduced in rc5 so you have to configure RouterModule from @angular/router as per Routing documentation to configure your routes and then you can use directives provided by RouterModule.

Answer 2

You have to remove ROUTER_DIRECTIVES, FORM_DIRECTIVES and CORE_DIRECTIVES from all your components. Instead, create modules for all components. Import BrowserModule in your AppModule and import FormModule for all Modules you need form directives for.

Further information can be found here: https://angular.io/docs/ts/latest/guide/architecture.html

An AppModule looks e.g. like the following:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent}   from './app.component';
// Other imports are removed

@NgModule({
  imports: [BrowserModule, HttpModule, LoginModule, routing],
  declarations: [AppComponent],
  providers: [
    Logger,
    LOG_LOGGER_PROVIDERS,
    AuthenticationService,
    AccountService
  ],
  bootstrap: [AppComponent]

})

export class AppModule {
}