没有findangular2 – 404 traceur

我已经遵循了起始指南,并扩展了以前的angular度2版本。 我已经更新了我的修订,并相应地改变了一切 当我运行Web服务器时,我现在收到traceur的错误404 … 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" ] } 

可能的问题可能是 在这里输入图像说明 这是抵制我的进步。

遵循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

问题是我的一项服务是无效的。 我已经添加了构造函数作为演示目的的最后一种方法之一,它拒绝加载。

所以对于那些会遇到这个错误的人来说,打开这个错误并检查引用的文件是否有错误。 问题不是他没有发现traceur,而是他无法加载文件。

如果它帮助任何人,两次我遇到过这个问题,这是由多行注释引起的(见Picci 在这里的答案为例)。

从RC4移植到RC6时,我遇到了同样的错误。

对于我的项目,我不得不更新systemjs.config.js文件。 我停止引用根index.js文件,并开始引用/ bundles中的core.umd.js文件。

以下为例 :

在我的情况下, 我甚traceur没有把traceur作为traceur中的依赖 node_modules ,而且应用程序工作正常,但是在添加一个不需要traceur的库之后,突然间开始询问traceur

解决的办法是从bundles文件夹中引用新添加的库,而不是system.config.jssrc (或默认文件夹),并指定文件的.umd.js版本。 另外,我必须从packages部分删除main条目。

其原因在于,从bundle文件夹加载umd模块不会触发traceur转换器,因为它假设库模块已经是正确的格式。 否则,可能会认为代码是在es2015编写的,需要进行编译,以便调用traceur

在尝试从AngularFire2的帮助下完美运行的“Tour of Heroes”应用程序连接到Firebase实例后,我遇到了这个traceur问题。 我尝试了所有的答案,但没有一个帮助,所以我google了,直到我发现这个github 问题 。

我花了3个小时,试图弄清楚我的代码有什么问题,我能够发现“评论我的一段代码导致了这个问题”。

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

问题出在system.js我想:

有一个正则expression式,用来检测import语句:

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

这个正则expression式会检测多行注释中的import语句,并导致这个可怕的错误。 我在这里开了一个问题:

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

@Coquelicot给了一个类似的答案,但我想我会回答,因为我有一点点细节。 我通常不会有任何使用多行注释的问题,但是如果我把一个import语句放在一个里面,那么我会得到这个确切的错误。 只要在import声明中加上引号就可以消除我的错误。 很奇怪。

由于版本更改,会引发404错误。 要解决这个问题,我们需要在systemjs.config.js文件中做下面的修改:

  1. replacenpm:angular-in-memory-web-api/npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js 在地图上。

  2. 在软件包中删除以下代码:

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

在asp.net mvc上运行angular4 quickstart项目时出现此错误。 在tsconfig.json中将“es2015”改为“commonjs”解决了我的问题。

我有同样的问题,在我为这个案例search后,然后我解决了改变: 核心问题:主要:'index.js'必须改为主:'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' } 

我有同样的问题,它不能加载我的文件之一。 我打开文件,一切正常。

问题是我有一个片段在同一个文件中注释掉。 片段包含此关键字“ 导出类 ”。 即使它被注释掉了,它也被Angularparsing了。

确保你的注释中没有“ 导出类 ”关键字,并且删除临时注释的代码,只是为了检查它是否工作。

这个错误背后有多重原因,

1)有时在app.component.ts文件的顶部提到注释
2)指向不正确的umd文件
3)如果您使用的是ts(Typescript)版本,请在config.js文件中提及transpiler选项,或者使用transpiler将所有.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); 

首先,你应该编译你的TypeScript文件

 $ tsc 

命令。 如果您在节点环境外运行应用程序,则应手动编译TypeScript文件。

另外检查tsconfig.json – 如果脚本版本设置为Angular 2.0的ES6

对我来说,发生了什么事是一个同事删除了一个TypeScript文件,这意味着我有一个旧的* .js文件不再需要(因为我们的源代码pipe理忽略这些文件)。 如果traceur错误引用了不需要的* .js文件,请删除该文件。

我有这个确切的问题,这是通过更正文件的名称解决。

我认为你应该做的第一件事是检查你是否有下载traceur!我遇到了这个问题,它标志着我几个小时search.But我发现没有traceur在我的node_modules目录。 所以我试试npm install traceur来安装traceur。然后更新systemjs.config.js ,添加一行'traceur':'npm:traceur/bin/traceur.js' 。 幸运的是,这个问题已经解决了。希望这可以帮助你!