错误 404：找不到 @angular/router/bundles/router.umd.js答案

【问题标题】：Error 404: Cannot found @angular/router/bundles/router.umd.js错误 404：找不到 @angular/router/bundles/router.umd.js
【发布时间】：2016-06-25 02:32:46
【问题描述】：

我在 Angular 2 中设置路由，根据他们 website 的文档，一切都是一样的。

这是我在 app.component.ts 中导入的示例

import {Component} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router';

@Component({
  selector: 'my-app',
  templateUrl: 'app/templates/html/app.component.html',
  directives: [ROUTER_DIRECTIVES]
})

export class AppComponent{

}

很遗憾，我收到了这个错误。

我查看了我的文件树，发现@angular/router 中没有bundles 文件夹

这是一个错误吗？我怎样才能解决这个问题？谢谢！

【问题讨论】：

标签： typescript angular angular2-routing angular2-router

【解决方案1】：

这是来自您的 systemjs 文件。

首先你可以映射 ng2 路由器模块，类似于你的应用：

var map = {
    <...>
    '@angular/router':            'node_modules/@angular/router',
    <...>
};

接下来为它手动设置packIndex：

packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };

要修复此错误，请根据您的具体情况调整以下代码。

注意您要使用的不同 ng2 模块和版本以及您的应用名称（如果合适，请更改）：

(function(global) {
    // map tells the System loader where to look for things
    var map = {
        'YourApp':                    'YourApp', // 'dist',
        '@angular':                   'node_modules/@angular',
        '@angular/router':            'node_modules/@angular/router',
        'rxjs':                       'node_modules/rxjs'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'YourApp':                    { main: 'app.js',  defaultExtension: 'js' },
        'rxjs':                       { defaultExtension: 'js' }
    };
    var ngPackageNames = [
        'common',
        'forms',
        'compiler',
        'core',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router-deprecated',
        'upgrade',
    ];
    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    }

    packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };

    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);
    var config = {
        map: map,
        packages: packages
    };
    System.config(config);
})(this);

【讨论】：

【解决方案2】：

路由器包目前没有捆绑包。

所以检查你的 systemjs 配置。我怀疑你忘记了下面这行：

// No umd for router yet
packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };

另见https://github.com/alexzuza/angular2-typescript-systemjs/blob/master/systemjs.config.js#L40

【讨论】：