Angular2 Rc4 到 Rc5 迁移 : traceur issue

Question

将我的 Angular cli 项目从 Rc4 迁移到 Rc5 时，我在控制台中看到“traceur 404”

我关注了这篇文章:https://www.barbarianmeetscoding.com/blog/2016/08/13/updating-your-angular-2-app-from-rc4-to-rc5-a-practical-guide/

app.module.ts

import {NgModule}      from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {CommonModule} from '@angular/common';
import {HttpModule} from '@angular/http';
import {FormsModule} from '@angular/forms';

import {AppComponent}  from './app.component';
import {MainComponent} from "./components/main/main.component";
import {AlertHeatmapComponent} from "./components/alert-heatmap/alert-heatmap.component";
import {ProductFamilyComponent} from "./components/product-family/product-family.component";
import {FiltersComponent} from "./components/filters/filters.component";

import {TAB_DIRECTIVES, DROPDOWN_DIRECTIVES} from "ng2-bootstrap/ng2-bootstrap";
import {MarkAsSafePipe} from "./components/main/shared/mark-safe.pipe";

import {Ng2SliderComponent} from "ng2-slider-component/ng2-slider.component";

@NgModule({
  imports: [ // module dependencies
    BrowserModule,
    CommonModule,
    HttpModule,
    FormsModule
  ],
  declarations: [ // components and directives
    AppComponent,
    MainComponent,
    AlertHeatmapComponent,
    ProductFamilyComponent,
    FiltersComponent,

    TAB_DIRECTIVES,
    DROPDOWN_DIRECTIVES,

    MarkAsSafePipe,

    Ng2SliderComponent
  ],
  entryComponents: [AppComponent],
  bootstrap: [AppComponent], // root component
  providers: [] // services
})
export class AppModule {
}

ma​​in.ts

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {enableProdMode} from '@angular/core';
import {environment} from './app/';
import {AppModule} from "./app/app.module";

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

系统配置.ts

"use strict";

// SystemJS configuration file, see links for more information
// https://github.com/systemjs/systemjs
// https://github.com/systemjs/systemjs/blob/master/docs/config-api.md

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map:any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap',
  'underscore': 'vendor/underscore/underscore.js',
  'd3': 'vendor/d3/d3.js',
  'c3': 'vendor/c3/c3.js',
  'jquery': 'vendor/jquery/dist',
  'ng2-slideable-directive': 'vendor/ng2-slideable-directive',
  'ng2-styled-directive': 'vendor/ng2-styled-directive',
  'ng2-slider-component': 'vendor/ng2-slider-component',
  'webui-popover': 'vendor/webui-popover/dist',
  'jquery-mousewheel': 'vendor/jquery-mousewheel/jquery.mousewheel.js',
  'malihu-custom-scrollbar-plugin': 'vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.js',
  'angular2-resizable': 'vendor/angular2-resizable'
};

/** User packages configuration. */
const packages:any = {
  'ng2-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ng2-bootstrap.js'
  },
  'underscore': {
    format: 'cjs'
  },
  'd3': {
    format: 'cjs',
  },
  'c3': {
    format: 'cjs'
  },
  'jquery': {
    main: 'jquery',
    format: 'global',
    defaultExtension: 'js'
  },
  'ng2-slideable-directive': {
    format: 'cjs'
  },
  'ng2-styled-directive': {
    format: 'cjs'
  },
  'ng2-slider-component': {
    main: 'ng2-slider.component.system.js',
    defaultExtension: 'system.js'
  },
  'webui-popover': {
    format: 'cjs',
    main: 'jquery.webui-popover.js'
  }
};

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
 **********************************************************************************************/
const barrels:string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/forms',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',

  // App specific barrels.
  'app',
  'app/shared',

  'app/components/main',
  'app/components/product-family',
  'app/components/alert-heatmap',
  'app/components/filters',

  'app/shared/slider',
  'app/shared/smart-tabs',
  'app/shared/smart-checkbox'
  /** @cli-barrel */
];

const cliSystemConfigPackages:any = {};
barrels.forEach((barrelName:string) => {
  cliSystemConfigPackages[barrelName] = {main: 'index'};
});

/** Type declaration for ambient System. */
declare var System:any;

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js'
  },
  packages: cliSystemConfigPackages
});

// Apply the user's configuration.
System.config({map, packages});

注意: 我见过其他有类似问题的问题，所有建议都删除多行注释，但在这种情况下不起作用。

---

我更新的package.json

{
  "name": "sr-heatmaps",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "postinstall": "typings install",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "angular2-resizable": "^0.3.1",
    "c3": "^0.4.11",
    "core-js": "^2.4.0",
    "d3": "3.5.17",
    "es6-shim": "0.35.1",
    "jquery": "^3.1.0",
    "jquery-mousewheel": ">=3.0.6",
    "malihu-custom-scrollbar-plugin": "^3.1.5",
    "moment": "^2.14.1",
    "ng2-bootstrap": "^1.1.1",
    "ng2-popover": "0.0.7",
    "ng2-slideable-directive": "^1.0.13",
    "ng2-slider-component": "^1.0.9",
    "ng2-styled-directive": "^1.0.5",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.26",
    "ts-helpers": "^1.1.1",
    "underscore": "^1.8.3",
    "webui-popover": "^1.2.13",
    "zone.js": "0.6.12"
  },
  "devDependencies": {
    "angular-cli": "^1.0.0-beta.10",
    "codelyzer": "0.0.20",
    "ember-cli-inject-live-reload": "1.4.0",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "0.13.22",
    "karma-chrome-launcher": "0.2.3",
    "karma-jasmine": "0.3.8",
    "node-sass": "^3.8.0",
    "protractor": "3.3.0",
    "sass": "0.5.0",
    "ts-node": "0.5.5",
    "tslint": "3.11.0",
    "typescript": "1.8.10",
    "typings": "1.3.1"
  }
}

Answer 1

我们可以看看您的package.json吗？如果您使用的是@angular/router-3.0.0.rc2，请将其下拉到rc1，直到移动到 angular2 rc6。上周我因为这个而抓狂了。