Angular2 rc4 引导程序

Question

我刚刚将我的angular2应用从RC1更新到了RC4。我按照指南的步骤进行操作，但由于某种奇怪的原因，我的main.ts文件中应用程序的引导没有起作用。以下是我的代码：

import  { bootstrap } from '@angular/platform-browser-dynamic';

import { enableProdMode }    from '@angular/core';

import { APP_ROUTER_PROVIDERS } from './service/routes.service';

import { AppComponent }   from './components/app.component';

enableProdMode();

bootstrap(AppComponent, [
    APP_ROUTER_PROVIDERS,
]); 

我收到了以下错误信息：

[ts] 模块 '"/Users/bradbeighton/Documents/Dev/coffeezan/node_modules/@angular/platform-browser-dynamic/index"' 没有导出成员 'bootstrap'. 导入bootstrap。

"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/forms": "0.2.0",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/router": "3.0.0-beta.1",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.4",

我安装的包与Angular建议的完全相同。所以我很困惑为什么找不到bootstrap模块？另外，我在按照教程设置路由时遇到了另一个问题。

import { provideRouter, RouterConfig }  from '@angular/router';

import { HomeComponent } from '../components/home.component/home.component';';

const routes: RouterConfig = [
  { path: '/home', component: HomeComponent },
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
]; 

我不知道我是太蠢了还是安装了错误的包？请帮忙吗？

编辑：

我的systemjs.config文件很标准，但这是它：

var isPublic = typeof window != "undefined";

/**
 * 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':                        'client', // 'dist',
        '@angular':                   (isPublic)? '@angular' : 'node_modules/@angular',
        'angular2-in-memory-web-api': (isPublic)? 'angular2-in-memory-web-api' : 'node_modules/angular2-in-memory-web-api',
        'rxjs':                       (isPublic)? 'rxjs' : 'node_modules/rxjs',
        'ng-semantic':                (isPublic)? 'ng-semantic' : 'node_modules/ng-semantic'
    };
    // 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' },
        'ng-semantic':                { main: 'ng-semantic', defaultExtension: 'js' }
    };
    var ngPackageNames = [
        'common',
        'compiler',
        'core',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router',
        'router-deprecated',
        'upgrade'
    ];
    // Add package entries for angular packages
    ngPackageNames.forEach(function(pkgName) {
        packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
    });
    var config = {
        map: map,
        packages: packages
    };
    System.config(config);
})(this);

- BradBeighton

---

为了更加安全，删除你的 node_modules 文件夹，更新 package.json 然后再次执行 npm install... - micronyks

@micronyks 很好的想法，但不幸的是我已经尝试过了，但它没有起作用。 - BradBeighton

请问您能分享一下您的 systemjs.config.js 文件吗？ - Sanket

根据错误提示，我认为它找不到那个模块。 - micronyks

@Sanket 我已经编辑了我的问题，并附上了systemjs.config文件。 - BradBeighton

Answer 1

当引用 .umd.js 文件时，您需要使用 bundles。请参考下面的代码块-

  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }

看看这个能否帮到你。

- Sanket