web-dev-qa-db-ja.com

Angular 2-404 traceur not found

スタートガイドに従って、以前のangular 2バージョンに少し拡張しました。リビジョンを更新し、それに応じてすべてを変更しました。Webサーバーを実行しているときに、トレーサのエラー404 ... Error 404 for traceur

これが私のプロジェクト構造です： Project structure

関連ファイル：

Index.html：

    <html>
<head>
    <title>Kinepolis HR-tool</title>

    <base href="./">

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Kinepolis HR tool">
    <meta name="author" content="Jeffrey Devloo!">

    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
    <!-- CSS for PrimeUI -->

    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function(err){ console.error(err);  });
    </script>
</head>

<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>

</html>

systemjs.config.js

(function(global) {

    // map tells the System loader where to look for things
    var map = {
        'app':                        'app', // 'dist',
        'rxjs':                       'node_modules/rxjs',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        '@angular':                   'node_modules/@angular',
    };

    // 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': { defaultExtension: 'js' },
    };

    var packageNames = [
        '@angular/common',
        '@angular/compiler',
        '@angular/core',
        '@angular/http',
        '@angular/platform-browser',
        '@angular/platform-browser-dynamic',
        '@angular/router',
        '@angular/router-deprecated',
        '@angular/testing',
        '@angular/upgrade',
    ];

    // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
    packageNames.forEach(function(pkgName) {
        packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
    });

    var config = {
        map: map,
        packages: packages
    }

    // filterSystemConfig - index.html's chance to modify config before we register it.
    if (global.filterSystemConfig) { global.filterSystemConfig(config); }

    System.config(config);

})(this);

tsconfig.json

    {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

考えられる問題は enter image description here これは私の進歩をボイコットしています。

angularhttp-status-code-404
36
Jeffrey Devloo

問題は、私のサービスの1つが無効だったことです。目的を示すための最後のメソッドの1つとしてコンストラクターを追加しましたが、ロードを拒否しました。

したがって、このエラーが発生する可能性がある場合は、エラーを開いて、参照ファイルでエラーを確認してください。問題は、彼がトレーサーを見つけられないことではなく、ファイルをロードできないことです。

22
Jeffrey Devloo

Angular Heroesチュートリアルに従うと、この問題が発生しました。これは、systemjs.config.jsファイル内の、angular-in-memory-web-apiインポートの無効な場所が原因でした。場所は次のとおりです。

'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'

packages.angular-in-memory-web-apiを削除します

https://github.com/angular/quickstart/commit/541bdc5f634e1142860c56cace247234edfaf74b を参照

30
Ashish Singh

それが誰かを助ける場合、私がこの問題を経験したことがありますが、それは複数行のコメントが原因です（例についてはPicciの答え here を参照）。

23
Coquelicot

RC4からRC6への移行中にこの同じエラーが発生しました。

私のプロジェクトでは、systemjs.config.jsファイルを更新する必要がありました。ルートのindex.jsファイルの参照を停止し、/ bundlesにあるcore.umd.jsファイルの参照を開始しました。

これに続いて： 例

6
James

私の場合node_modulesの依存関係としてtraceurさえ持っていなかったので、アプリは正常に機能していましたが、突然尋ね始めましたtraceurもtraceurを必要としないライブラリを追加した後。

解決策は、system.config.jsのbundles（またはデフォルトのフォルダー）の代わりにsrcフォルダーから新しく追加されたライブラリーを参照し、.umd.jsバージョンのファイルを指定することでした。また、mainセクションからpackagesエントリを削除する必要がありました。

背後の理由は、umdフォルダーからbundleモジュールをロードしても、ライブラリモジュールがすでに正しい形式であると想定しているため、traceurトランスパイラーをトリガーしないためです。それ以外の場合、コードはes2015で記述されており、traceurを呼び出すためにトランスパイルが必要であると想定される場合があります。

AngularFire2を使用して完全に実行可能な「Tour of Heroes」アプリからtraceurインスタンスに接続しようとすると、このFirebaseの問題に遭遇しました。ここですべての答えを試しましたが、どれも役に立たなかったので、このgithubが見つかるまでグーグルで検索しました issue 。

4
bosch

Asp.net mvcでangular4クイックスタートプロジェクトを実行すると、このエラーが発生しました。 tsconfig.json内で「es2015」を「commonjs」に変更すると、問題が解決しました。

3
MortezaDalil

私はコードで何が間違っていたかを把握しようとして最大3時間費やし、「コードの一部をコメントすると問題が発生した」ことがわかりました。

そのため、コンポーネントの範囲外のコードをコメントしていないことを確認してください

3
Oyebisi Jemil

問題はsystem.js内にあると思います：

インポートステートメントの検出に使用される正規表現があります。

var esmRegEx = /(^\s*|[}\);\n]\s*)(import\s*(['"]|(\*\s+as\s+)?[^"'\(\)\n;]+\s*from\s*['"]|\{)|export\s+\*\s+from\s+["']|export\s*(\{|default|function|class|var|const|let|async\s+function))/;

この正規表現は、複数行コメント内のインポート文を検出し、この恐ろしいエラーを引き起こします。私はここで問題を開きました：

https://github.com/systemjs/systemjs/issues/1408

2
Tobias Gassmann

バージョンの変更により、404エラーがスローされます。この問題を解決するには、systemjs.config.jsファイルで以下の変更を行う必要があります。

  1. 置換npm:angular-in-memory-web-api/ with npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js。マップ内。

  2. パッケージ内の以下のコードを削除します。

    'angular-in-memory-web-api': {
    main: './index.js',
    defaultExtension: 'js'
}
2
manga

@Coquelicotも同様の答えを出しましたが、私の詳細が少しあるので、とにかく答えたいと思いました。通常、複数行のコメントを使用しても問題はありませんが、インポート文をその中に挿入すると、この正確なエラーが発生します。 importステートメントを引用符で囲むだけで、エラーがなくなりました。非常に奇妙な。

2
Brett

同じ問題が発生したため、ファイルの1つを読み込めませんでした。ファイルを開くと、すべてが正しくそこにありました。

問題は、同じファイルでスニペットがコメントアウトされていることです。スニペットには、このキーワード「export class」が含まれていました。コメントアウトされていても、Angularによって解析されました。

コメントに「export class」キーワードが含まれていないことを確認し、一時的にコメントされたコードを削除して、それがなくても機能するかどうかを確認します。

1
gradosevic

このエラーには複数の理由がありますが、

1）app.component.tsファイルの上部にあるコメント
2）間違ったumdファイルを指す
3）ts（TypeScript）バージョンを使用している場合は、config.jsファイルにトランスパイラーオプションを以下のように記載するか、トランスパイラーを使用してすべての.tsファイルを.jsファイルにコンパイルしてからコードで.jsファイルを参照してください：

(function (global) {
    System.config({
        transpiler: 'ts',
        typescriptOptions: {
          tsconfig: true
        },
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@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',
            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
            'angular2' : ''
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main',
                defaultExtension: 'ts'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            }
        }
    });
})(this);
1
dharmesh kaklotar

あなたが最初にすべきことは、トレーサーをダウンロードしたかどうかをチェックすることだと思います！この問題に遭遇し、検索に数時間かかりましたが、node_modulesディレクトリにトレーサーがないことがわかりました。そこで、npm install traceurを試しにtraceurをインストールします。次に、systemjs.config.jsを更新し、'traceur':'npm:traceur/bin/traceur.js'のような行を追加します。幸いなことに、この問題は解決されました。これがあなたのお役に立てば幸いです！

1
Steven

私はこの問題をグーグルで調べた後、同じ問題を抱えていて、変更して解決しました：コアの問題：main： 'index.js'をmain： 'bundles/core.umd.js'に変更する必要があります

packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

=> main： 'bundles/core.umd.js'

packages: {
    '@angular/core': {
        main: 'bundles/core.umd.js'
    },
    '@angular/compiler': {
        main: 'bundles/compiler.umd.js'
    },
    '@angular/common': {
        main: 'bundles/common.umd.js'
    },
    '@angular/platform-browser': {
        main: 'bundles/platform-browser.umd.js'
    },
    '@angular/platform-browser-dynamic': {
        main: 'bundles/platform-browser-dynamic.umd.js'
    },
    '@angular/http': {
        main: 'bundles/http.umd.js'
    }
}

注：私の地図：

map: {
    '@angular': 'node_modules/@angular',
    'rxjs': 'node_modules/rxjs'
}
1
Hieu Tran AGI

最初に、TypeScriptファイルを次のコマンドでコンパイルする必要があります。

$ tsc

コマンド。ノード環境外でアプリケーションを実行している場合、TypeScriptファイルを手動でコンパイルする必要があります。

Tsconfig.jsonも確認してください-スクリプトバージョンがAngular 2.0のES6として設定されている場合

0
Aleksandr Barmin

私にとっては、同僚がTypeScriptファイルを削除したため、古い* .jsファイルが不要になりました（ソース管理ではこれらのファイルが無視されるため）。トレーサーエラーが不要な* .jsファイルを参照している場合は、ファイルを削除します。

0
Clay Lenhart