Angular2:启动应用程序时出错"http:// localhost:3000/traceur 404(Not Found)"
我有一个全新的Angular(rc1)安装.我想我刚刚创建了通常的'Hello something'应用程序但是,当我从浏览器启动应用程序时,我在浏览器控制台上收到以下错误
谁能解释一下我做错了什么？我必须有一些错误,因为其他更复杂的东西在我的机器上与rc1完美配合.
提前致谢
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'm2t-app',
template: `
Hello something
`,
directives: []
})
export class AppComponent {
}
main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
的index.html
<html>
<head>
<title>MEAN2 Training Class</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 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>
<m2t-app>Loading...</m2t-app>
</body>
</html>
systemjs.confing.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);
Pic*_*cci 34
我找到了原因.在app.component.ts的开头,我评论了一个愚蠢的AppComponent的早期版本,类似于
/*
import { AnotherComponent } from './anotherComponent.component'
// some other code
}*/
import { Component } from '@angular/core';
@Component({
selector: 'm2t-app',
template: `
Hello something
`,
directives: []
})
export class AppComponent {
}
删除文件开头的注释已解决了该问题.
- 我也通过删除注释块来消除traceur错误.我不明白的是评论块怎么会导致错误？似乎`/***/`这是TS(在VS代码中)而不是`/**/`的块注释的语法.但是,在使用上述任何一种情况时,我的错误仍然存在 (4认同)
小智 16
我发现此错误出现在带有导入/导出语句的多行注释中.如果我们将语句转换为某种不正确的形式或将语句放在单行注释中,我们将修复错误.
例:
/**
import { Component } from '@angular/core'; // generate error
export class TestClass { }; // generate error
// import { Component } from '@angular/core'; // correct
// export class TestClass { }; // correct
impot { Component } from '@angular/core'; // correct
export clas TestClass { }; // correct
*/
对于其他收到此错误并且在代码中没有注释的人.我遇到了这个错误,并通过仔细检查我的systemjs.config.js文件解决了这个问题.
虽然您的systemjs.config.js文件中可能没有这个确切的问题,但它确实证明/ traceur 404(Not Found)错误可能来自您的systemjs.config.js文件.
我有
var packages = {
'app_spa': { main: 'app.component.ts', defaultExtension: 'ts' },
然后我改成了
var packages = {
'app_spa': { main: 'app.component.js', defaultExtension: 'js' },
并且错误消失了.
小智 5
你不需要在包部分中定义angular-in-memory-web-api.删除包中的定义;
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
而不是'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'在地图部分定义 .它工作正常.