Подтвердить что ты не робот

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 chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);
4b9b3361

Ответ 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 { 
}

Удаление комментария в начале файла решило проблему.

Ответ 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
*/

Ответ 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' },

и ошибка исчезла.

Ответ 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' в разделе карты. он отлично работает.

проверьте это

Ответ 5

Я нахожу в некоторых случаях, это потому, что ts transpiler не объявлен в файле systemjs.config.js. Добавьте это в функцию System.config:

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

и в значении карты добавьте ts map следующим образом:

    map: {
        'ts': 'npm:[email protected]/lib/plugin.js',
        'typescript': 'npm:[email protected]/lib/typescript.js'
    },

Ответ 6

Я думаю, что проблема заключается в system.js

Import-Statemtents ограничены регулярным выражением, которое даст результаты даже в том случае, если import-statement находится в блоке многострочного комментария

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

Ответ 7

В моем случае проблема связана с system.config.js импортированием новых библиотек из src или других подпапок вместо импорта umd из bundles, и таким образом tracer запускался автоматически, надеясь перекрыть некоторые es2015.

Посмотрите полный ответ здесь, надеюсь, что это может помочь кому-то.

Ответ 8

Существует много причин этой ошибки,

1) Иногда комментарии упоминаются поверх файла app.component.ts
2) указание на неправильный файл umd
3) Если вы используете версию ts (Transcript), укажите параметры транспилятора в файле config.js, как указано ниже, или скомпилируйте весь файл .ts в файл .js, используя transpiler, а затем укажите файл .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);