Angular2:启动应用程序"http://localhost:3000/traceur 404(未找到)"时出现错误; [英] Angular2: error at startup of the app "http://localhost:3000/traceur 404 (Not Found)"

查看:62
本文介绍了Angular2:启动应用程序"http://localhost:3000/traceur 404(未找到)"时出现错误;的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个全新的Angular(rc1)安装. 我想我刚刚创建了通常的"Hello something"应用程序,但是,当我从浏览器启动该应用程序时,在浏览器控制台上出现以下错误

I have a brand new installation of Angular (rc1). I think I have just created the usual 'Hello something' app but, when I launch the app from browser, I get the following error on the browser console

有人可以向我解释我做错了什么吗?我肯定有问题,因为其他更复杂的功能可以在我的计算机上完美地与rc1配合使用.

Can anybody explain me what I have done wrong? I must have something wrong since other much more complex things work perfectly with rc1 on my machine.

预先感谢

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

推荐答案

我找到了原因.在app.component.ts的开头,我评论了一个愚蠢的AppComponent的早期版本,例如

I found the reason. At the beginning of app.component.ts I had commented an earlier version of the silly AppComponent, something like

/*

import { AnotherComponent } from './anotherComponent.component'
// some other code

}*/
import { Component } from '@angular/core';

@Component({
  selector: 'm2t-app',
  template: `
        Hello something
        `,
  directives: []
})
export class AppComponent { 
}

删除文件开头的注释已解决了问题.

Removing the comment at the beginning of the file has solved the problem.

这篇关于Angular2:启动应用程序"http://localhost:3000/traceur 404(未找到)"时出现错误;的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆