Angular 2 - 404 跟踪器未找到

Question

我遵循了入门指南，并针对之前的 angular 2 版本进行了一些扩展。我已经更新了我的修订版并相应地更改了所有内容。当我运行 Web 服务器时，我现在收到 traceur 错误 404 ...

这是我的项目结构：

相关文件：

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"
  ]
}

一个可能的问题是这是在抵制我的进步。

Answer 1

问题是我的一项服务无效。我已将构造函数添加为用于演示目的的最后方法之一，但它拒绝加载。

所以对于那些曾经遇到过这个错误的人，打开错误并检查引用的文件是否有错误。问题不是他没有找到 traceur，而是他无法加载文件。

Answer 2

我确实遇到了这个问题，该问题已通过更正文件名得到解决。

Answer 3

如果它对任何人有帮助，我两次都遇到过这个问题，它是由多行注释引起的（例如参见 Picci 的回答）。

Answer 4

问题在 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

Answer 5

我在从 RC4 迁移到 RC6 时遇到了同样的错误。

对于我的项目，我必须更新 systemjs.config.js 文件。我停止引用根 index.js 文件，并开始引用 /bundles.

中的 core.umd.js 文件

接着是：example

Answer 6

首先，您应该使用

编译您的 TypeScript 文件

$ tsc

命令。如果你是运行节点环境之外的应用程序，你应该手动编译 TypeScript 文件。

同时检查 tsconfig.json - 如果脚本版本设置为 ES6 for Angular 2.0

Answer 7

我有同样的问题，在我搜索这个案例后，我通过更改解决了它： 核心问题：main:'index.js'必须改为main:'bundles/core.umd.js'

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

=> 主要：'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'
}

Answer 8

我遇到了同样的问题，它无法加载我的文件之一。我打开了文件，那里的一切都是正确的。

问题是我在同一个文件中注释掉了一个片段。代码段包含此关键字“export class”。即使它被注释掉了，它也被 Angular.

解析了

请确保您的评论中没有“export class”关键字，并删除临时注释代码以检查它是否可以在没有它的情况下运行.

Answer 9

在我的情况下 我什至没有 traceur 作为 node_modules 中的依赖项 并且该应用程序运行良好但突然启动在添加不需要 traceur 的库后请求 traceur。

解决方案是从 bundles 文件夹而不是 system.config.js 中的 src（或默认文件夹）引用新添加的库，并指定文件的 .umd.js 版本.另外，我不得不从 packages 部分中删除 main 条目。

背后的原因是从 bundle 文件夹加载 umd 模块不会触发 traceur 转译器，因为它假定库模块已经是正确的格式。否则，它可能会假定代码是用 es2015 编写的，并且需要转译，因此它会调用 traceur。

在 [=27= 的帮助下尝试从完全可运行的 "Tour of Heroes" 应用程序连接到 Firebase 实例后，我遇到了这个 traceur 问题].我尝试了这里的所有答案，但 none 有帮助，所以我用谷歌搜索，直到找到 github issue.

Answer 10

我在学习 Angular 英雄教程时遇到了这个问题。这是由 angular-in-memory-web-api 导入在 systemjs.config.js 文件中的无效位置引起的。正确的位置应该是：

'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

Answer 11

@Coquelicot 给出了类似的答案，但我想我还是会回答，因为我的答案更详细一些。我通常不会对使用多行注释有任何问题，但是如果我在其中放置一个导入语句，那么我就会得到这个确切的错误。简单地在导入语句周围加上引号就为我消除了错误。很奇怪。

Answer 12

此错误背后有多种原因，

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);

Answer 13

由于版本更改，它抛出 404 错误。要解决此问题，我们需要在 systemjs.config.js 文件中进行以下修改：

将 npm:angular-in-memory-web-api/ 替换为 npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js。在地图中。

删除包中的以下代码：

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

Answer 14

我花了长达 3 个小时试图找出我的代码中做错了什么，我能够发现 "Commenting a section of my codes caused the problem"。

所以请确保您没有在组件范围之外评论任何代码

Answer 15

对我来说，发生的事情是一位同事删除了一个 TypeScript 文件，这意味着我不再需要一个旧的 *.js 文件（因为我们的源代码管理忽略了这些文件）。如果 traceur 错误引用了您不需要的 *.js 文件，请删除该文件。

Answer 16

我在 asp.net mvc 上运行 angular4 quickstart 项目时遇到这个错误。在 tsconfig.json 中将 "es2015" 更改为 "commonjs" 解决了我的问题。

Answer 17

我认为你应该做的第一件事是检查你是否下载了 traceur！我遇到了这个问题，它让我花了几个小时 search.But 我发现我的 node_modules目录。所以我尝试 npm install traceur 安装 traceur.Then 更新 systemjs.config.js，添加像 'traceur':'npm:traceur/bin/traceur.js' 这样的行。幸运的是，这个问题是 resolved.Hope 这可以帮助你！

Angular 2 - 404 跟踪器未找到

Angular 2 - 404 traceur not found

http-status-code-404

angular