Question

我有一个全新的Angular（rc1）安装。我想我刚刚创造了通常的“你好”的东西＆＃39;但是，当我从浏览器启动应用程序时，我在浏览器控制台上收到以下错误

有人可以解释一下我做错了什么吗？我必须有一些错误，因为其他更复杂的东西在我的机器上与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);

Answer 1

我找到了原因。在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 { 
}

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

Answer 2

我发现此错误出现在带有导入/导出语句的多行注释中。如果我们将语句转换为某种不正确的形式或将语句放在单行注释中，我们将修复错误。

示例：

/**
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
*/

Answer 3

对于其他收到此错误并且代码中没有评论的人。我遇到了这个错误并通过仔细检查我的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' },

并且错误消失了。

Answer 4

你不需要在包部分中定义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'。它工作正常。

check this out

Answer 5

我发现在某些情况下，这是因为在systemjs.config.js文件中没有声明ts转换器。在System.config函数中添加：

    transpiler: 'ts',
    typescriptOptions: {
        tsconfig: true
    },
    meta: {
        'typescript': {
            "exports": "ts"
        }
    },

并在地图值中添加如下的ts地图：

    map: {
        'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js',
        'typescript': 'npm:typescript@2.0.2/lib/typescript.js'
    },

Answer 6

我认为问题出在system.js

中

导入状态由正则表达式检测，即使import-statement在多行注释块中也会产生结果

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

Answer 7

在我的情况下，该问题与system.config.js从src或其他子文件夹导入新库而不是从umd导入bundles这一问题有关tracer自动触发，希望转换一些es2015代码。

查看完整的答案here，希望它可以帮助某人。

Answer 8

此错误背后有多种原因，

1）有时在app.component.ts文件上提到的评论
2）指向不正确的umd文件
3）如果您使用的是ts（Transcript）版本，请在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);

Angular2：应用启动时的错误＆＃34; http：// localhost：3000 / traceur 404（未找到）＆＃34;

8 个答案: