angular - Angular2 の RC6 へのアップグレード、トレーサーが見つかりません

Question

へのアップグレード後RC6、次のエラーが発生します。

zone.js:101 GET http://localhost/traceur 404 (Not Found)
zone.js:484 Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost/traceur
            at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost/vendor/zone.js/dist/zone.js:794:30)
            at ZoneDelegate.invokeTask (http://localhost/vendor/zone.js/dist/zone.js:365:38)
            at Zone.runTask (http://localhost/vendor/zone.js/dist/zone.js:265:48)
            at XMLHttpRequest.ZoneTask.invoke (http://localhost/vendor/zone.js/dist/zone.js:433:34)
        Error loading http://localhost/traceur
        Error loading http://localhost/vendor/@angular/platform-browser-dynamic/index.js as "@angular/platform-browser-dynamic" from http://localhost/main.js ; Zone: <root> ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost/traceur(…) null
zone.js:486 Error: Uncaught (in promise): Error: Error: XHR error (404 Not Found) loading http://localhost/traceur(…)
system.src.js:371 Assertion failed: loading or loaded

コードがないと問題を解決するのは簡単ではないことは理解していますが、誰かが同じエラーを抱えてそれを理解した可能性があります。

既存の投稿で問題が解決しない

更新: system.config.js:

// 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 = {
  "ng2-charts": "vendor/ng2-charts",
  'ng2-bs3-modal': 'vendor/ng2-bs3-modal',
  'angular2-moment': 'vendor/angular2-moment',
  "assets": "assets",
};

/** User packages configuration. */
const packages: any = {
  "ng2-charts": {main: 'ng2-charts.js'},
  "ng2-bs3-modal": {main: 'ng2-bs3-modal.js'},
  "angular2-moment": {main: 'index.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/shared/navbar',
  'app/shared/sidebar',
  'app/shared/footer',
  'app/dashboard',
  'app/docs',
  /** @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 });

更新 2: system.config.js を次のように変更しました。

// 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 = {
  "ng2-charts": "vendor/ng2-charts",
  'ng2-bs3-modal': 'vendor/ng2-bs3-modal',
  'angular2-moment': 'vendor/angular2-moment',
  "assets": "assets",
};

/** User packages configuration. */
const packages: any = {
  "ng2-charts": {main: 'ng2-charts.js'},
  "ng2-bs3-modal": {main: 'ng2-bs3-modal.js'},
  "angular2-moment": {main: 'index.js'}
};

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
 **********************************************************************************************/
const barrels: string[] = [
  // App specific barrels.
  'app',
  'app/shared',
  'app/shared/navbar',
  'app/shared/sidebar',
  'app/shared/footer',
  'app/dashboard',
  'app/docs',
  /** @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: {
    'main': 'main.js',
  },
  packages: cliSystemConfigPackages
});

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

System.config({
  //use typescript for simple compilation (no typechecking)
  //transpiler: 'typescript',
  //typescript compiler options
  //typescriptOptions: {
  //emitDecoratorMetadata: true
  //},
  paths: {
    'npm:': 'vendor/'
  },
  map: {
    'app': './src',

    '@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/forms': 'npm:@angular/forms/bundles/forms.umd.js',
    '@angular/http': 'npm:@angular/http/bundles/http.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/router': 'npm:@angular/router/bundles/router.umd.js',


    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',

    'rxjs': 'npm:rxjs'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

今、私は次のエラーが発生します:

zone.js:101 GET http://localhost/vendor/@angular/common/bundles/common.umd.js/src/directives/core_directives 404 (Not Found)

Answer 1

こんにちは、私は一日中同じ問題を抱えていました。いくつかの異なるリンクを参照した後、system.config.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 = {
    "@angular": "vendor/@angular",
    "rxjs": "vendor/rxjs",
    "typescript": "node_modules/typescript/lib/typescript.js",
    "materialize": "vendor/materialize-css",
    "angular2-materialize": "vendor/angular2-materialize",
    "jquery": "vendor/jquery"
};
/** User packages configuration. */
const packages: any = {
    "materialize": {
        "format": "global",
        "main": "dist/js/materialize",
        "defaultExtension": "js"
    },
    "angular2-materialize": {
        "main": "dist/index",
        "defaultExtension": "js"
    },
    "@angular/core": {
        main: "bundles/core.umd.js" //use the ESM entry point for bundling tools
    },
    "@angular/common": {
        main: "bundles/common.umd.js" //use the ESM entry point for bundling tools
    },
    "@angular/compiler": {
        main: "bundles/compiler.umd.js" //use the ESM entry point for bundling tools
    },
    "@angular/forms": {
        main: "bundles/forms.umd.js"
    },
    "@angular/http": {
        main: "bundles/http.umd.js"
    },
    "@angular/platform-browser": {
        main: "bundles/platform-browser.umd.js" //use the ESM entry point for bundling tools
    },
    "@angular/platform-browser-dynamic": {
        main: "bundles/platform-browser-dynamic.umd.js" //use the ESM entry point for bundling tools
    },
    "@angular/router": {
        main: "bundles/router.umd.js" //use the ESM entry point for bundling tools
    },
};
////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * 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"
    /** @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",
        "jquery": "node-modules/jquery",
        "materialize-css": "node-modules/materialize-css",
        "angular2-materialize": "node_modules/angular2-materialize",
        "main": "main.js"
    },
    packages: cliSystemConfigPackages
});
// Apply the user"s configuration.
System.config({ map, packages });

Answer 2

適用された変更を確認する簡単な方法は、次のリンクにあります: https://reviews.angular.io/R4:4f2bc6690486610c5736ce67ead984ba7ff1ce8d

Answer 3

これを解決したかどうかわかりません。しかし、私のために働いた修正に出くわしました。実際には回避策であるため、修正は少し少なくなります。

https://github.com/angular/angular/issues/10881

どうやらAngularがNgModuleファイルを解析する際に、複数行のコメントの問題があるようです。移行するとき、参照用に古い main.ts を a 内にコピーしました/* */。これらの行を取り出して、完全に実行しました。