Angular2：应用程序启动时出错“http：// localhost：3000/trace

发布时间：2020-12-17 08:27:51 所属栏目：安全来源：网络整理

导读：我有一个全新的安装Angular(rc1)。我想我刚刚创建了通常的“Hello something”应用程序，但是，当我从浏览器启动应用程序，我得到以下错误在浏览器控制台任何人可以解释我做错了什么？我必须有一些错误，因为其他更复杂的事情与rc1在我的机器上完美地工作

我有一个全新的安装Angular(rc1)。
我想我刚刚创建了通常的“Hello something”应用程序，但是，当我从浏览器启动应用程序，我得到以下错误在浏览器控制台

任何人可以解释我做错了什么？我必须有一些错误，因为其他更复杂的事情与rc1在我的机器上完美地工作。

提前致谢

app.component.ts

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

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

主要

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，类似

/*

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

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!