SystemJS的Angular 2 RC6问题

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

根据ngModule新变化，删除了不推荐的指令，并且对于默认的角度功能，在ngModule中引入了ngModule，因此您必须根据路由文档配置@angular/router RouterModule来配置路由，然后您可以使用RouterModule提供的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 eg 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 {
}