Angular 2 problems with RC6 with SystemJS

Question

I am having problems starting my application after upgrading to RC6.

I changed my system language due to an official example from the change log .

But I still get compilation errors like this: “Module” “D: / Myproject / WebClient / node_modules / @ angular / router / index” 'does not have exported elements “ROUTER_DIRECTIVES”. "

It seems that the compiler accepts the default index.js file instead of the umd package ... Compilation is performed using the gulp task with the following parameters:

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

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

Think that this is more of a problem since my system does not read correctly.

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

Don't know what idea? thanks in advance

Answer 1

According to the new change in rc6, obsolete directives are deleted and by default angular ngModule functionality is introduced in rc5, so you need to configure RouterModule from @angular/router according to Routing to configure routes, and then you can use directives provided by RouterModule .

Answer 2

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

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

AppModule looks like for example:

 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 { }