SystemJS 的 Angular 2 RC6 问题答案

【问题标题】：Angular 2 RC6 problems with SystemJSSystemJS 的 Angular 2 RC6 问题
【发布时间】：2016-09-01 10:16:34
【问题描述】：

我在更新到 RC6 后让我的应用程序运行时遇到了一些问题。

由于官方示例from changelog，我更改了我的systemjs。

但我仍然会遇到这样的编译错误： "模块 '"D:/Myproject/WebClient/node_modules/@angular/router/index"' 没有导出的成员 'ROUTER_DIRECTIVES'。"

看起来编译器采用默认的 index.js 文件而不是 umd 包...编译是由 gulp 任务完成的，具有以下选项：

"module": "system", "moduleResolution": "node", "target": "ES5", "experimentalDecorators": true, "emitDecoratorMetadata": true, "allowSyntheticDefaultImports": false 我收到路由器模块和表单模块的此错误。

Router是V3.0.0-rc.2，forms是V.2.0.0-rc6

认为我的systemJs无论如何都没有正确读取是一个问题。

系统JS：

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

有人知道吗？提前致谢

【问题讨论】：

标签： angular systemjs

【解决方案1】：

根据 rc6 中的新更改，已弃用的指令已被删除，并且默认角度功能 ngModule 在 rc5 中引入，因此您必须根据 Routing 文档从 @angular/router 配置 RouterModule 以配置您的路线，然后您可以使用RouterModule提供的指令。

【讨论】：

谢谢，其他外部包还有一些问题，但基本上它在删除所有指令的情况下运行。

【解决方案2】：

您必须从所有组件中删除 ROUTER_DIRECTIVES、FORM_DIRECTIVES 和 CORE_DIRECTIVES。相反，为所有组件创建模块。在您的AppModule 中导入BrowserModule 并为您需要表单指令的所有模块导入FormModule。

更多信息可以在这里找到：https://angular.io/docs/ts/latest/guide/architecture.html

AppModule 看起来像像下面这样：

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

【讨论】：