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

Angular 2 - 404 traceur не найден

Я следил за стартовым руководством и немного расширился для предыдущей версии angular 2. Я обновил мою версию и все изменил. Когда я запускаю веб-сервер, теперь получаю ошибку 404 для traceur... Ошибка 404 для traceur

Вот моя структура проекта: Структура проекта

Релевантные файлы:

Index.html:

    <html>
<head>
    <title>Kinepolis HR-tool</title>

    <base href="./">

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Kinepolis HR tool">
    <meta name="author" content="Jeffrey Devloo!">

    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
    <!-- CSS for PrimeUI -->

    <!-- 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>
<my-app>Loading...</my-app>
</body>

</html>

systemjs.config.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);

tsconfig.json

    {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

Возможной проблемой может быть введите описание изображения здесь это бойкотирует мои успехи.

4b9b3361

Ответ 1

Проблема заключалась в том, что одна из моих служб была недействительной. Я добавил конструктор в качестве одного из последних методов демонстрации целей, и он отказался загружать.

Итак, для тех, кто когда-либо сталкивался с этой ошибкой, откройте ошибку и проверьте файлы, на которые ссылаются ошибки. Проблема НЕ в том, что он не находит трассировку, но он не может загружать файл.

Ответ 2

Я получил эту проблему, следуя учебнику Angular Heroes. Это было вызвано неправильным расположением импорта angular -in-memory-web-api в файле systemjs.config.js. Правильное расположение должно быть:

'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'

и удалите packages.angular-in-memory-web-api

см. https://github.com/angular/quickstart/commit/541bdc5f634e1142860c56cace247234edfaf74b

Ответ 3

В случае, если это помогает кому-либо, оба раза, когда я сталкивался с этой проблемой, это было вызвано многострочными комментариями (см., например, ответ Picci здесь).

Ответ 4

У меня возникла такая же ошибка при миграции с RC4 на RC6.

Для моего проекта мне пришлось обновить файл systemjs.config.js. Я прекратил ссылаться на корневые файлы index.js и начал ссылаться на файлы core.umd.js в /bundles.

После этого: пример

Ответ 5

В моем случае у меня даже не было traceur в качестве зависимости в node_modules, и приложение работало нормально, но внезапно начало запрашивать traceur после добавления библиотеки, которая не нуждалась в traceur.

Решение заключалось в том, чтобы ссылаться на недавно добавленные библиотеки из bundles папок вместо src (или папки по умолчанию) в system.config.js и указывать версию файлов .umd.js. Кроме того, мне пришлось удалить запись main из раздела packages.

Причина заключается в том, что загрузка модулей umd из папок bundle не вызывает транспилятор traceur, поскольку предполагает, что библиотечный модуль уже в правильном формате. В противном случае он может предположить, что код написан в es2015, и ему необходима транспиляция, поэтому он вызывает traceur.

Я столкнулся с этой проблемой traceur после попытки подключения к экземпляру Firebase из отлично запускаемого приложения "Tour of Heroes" с помощью AngularFire2. Я попробовал все ответы здесь, но ни один из них не помог, поэтому я googled, пока не нашел этот github issue.

Ответ 6

Я потратил до 3 часов, пытаясь понять, что я сделал неправильно в своих кодах, я смог узнать, что "Комментирование раздела моих кодов вызвало проблему".

Так любезно убедитесь, что вы не комментируете какие-либо из ваших кодов вне области компонента

Ответ 7

Проблема в системе. Я думаю:

Существует регулярное выражение, которое используется для обнаружения импортных операторов:

var esmRegEx = /(^\s*|[}\);\n]\s*)(import\s*(['"]|(\*\s+as\s+)?[^"'\(\)\n;]+\s*from\s*['"]|\{)|export\s+\*\s+from\s+["']|export\s*(\{|default|function|class|var|const|let|async\s+function))/; 

Это регулярное выражение будет обнаруживать импортные заявления в многострочных комментариях и вызывать эту ужасную ошибку. Я открыл здесь проблему:

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

Ответ 8

@Coquelicot Получил аналогичный ответ, но я думал, что я все равно отвечу, так как у меня есть немного более подробная информация. У меня обычно нет проблем с использованием многострочных комментариев, но если я поставлю оператор импорта внутри одного, то я получу эту точную ошибку. Простое размещение котировок вокруг оператора импорта избавило меня от этой ошибки. Очень странно.

Ответ 9

Из-за изменения версии он выдает ошибку 404. для решения этой проблемы нам нужно сделать ниже изменений в файле systemjs.config.js:

  • замените npm:angular-in-memory-web-api/ на npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js. на карте.

  • удалите код ниже в пакетах:

    'angular-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
    }
    

Ответ 10

Я получил эту ошибку при запуске проекта quickstart с угловым4 на asp.net mvc. изменение "es2015" на "commonjs" внутри tsconfig.json решило мою проблему.

Ответ 11

У меня такая же проблема, после того, как я поступил в Google для этого случая, я решил это, изменив: Основная проблема: main: 'index.js' должен быть изменен на main: 'bundles/core.umd.js'

packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

= > main: 'bundles/core.umd.js'

packages: {
    '@angular/core': {
        main: 'bundles/core.umd.js'
    },
    '@angular/compiler': {
        main: 'bundles/compiler.umd.js'
    },
    '@angular/common': {
        main: 'bundles/common.umd.js'
    },
    '@angular/platform-browser': {
        main: 'bundles/platform-browser.umd.js'
    },
    '@angular/platform-browser-dynamic': {
        main: 'bundles/platform-browser-dynamic.umd.js'
    },
    '@angular/http': {
        main: 'bundles/http.umd.js'
    }
}

Примечание. Мои карты:

map: {
    '@angular': 'node_modules/@angular',
    'rxjs': 'node_modules/rxjs'
}

Ответ 12

У меня была такая же проблема, и я не мог загрузить один из моих файлов. Я открыл файл, и все было правильно.

Проблема заключалась в том, что у меня был фрагмент комментария в том же файле. В фрагменте содержится это ключевое слово " класс экспорта". Несмотря на то, что он был прокомментирован, он был проанализирован Angular.

Убедитесь, что в ваших комментариях нет ключевых слов экспорт класса, и удалите временный код с комментариями, чтобы проверить, работает ли он без него.

Ответ 13

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

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

Ответ 14

Сначала вы должны скомпилировать файлы TypeScript с помощью

$ tsc 

команды. Если вы запускаете приложение вне node envirnoment, вы должны скомпилировать TypeScript файлы вручную.

Также проверьте tsconfig.json - если версия script установлена ​​как ES6 для Angular 2.0

Ответ 15

Для меня случилось, что сотрудник удалил файл TypeScript, что означало, что старый *.js файл больше не нужен (поскольку наш источник управления игнорирует эти файлы). Если ошибка traceur ссылается на файл *.js, который вам не нужен, удалите файл.

Ответ 16

У меня была эта точная проблема, которая была устранена путем исправления имени файла.

Ответ 17

Я думаю, что первое, что вам нужно сделать, это проверить, загружен ли трассир! Я встретил эти проблемы, и это означало мне несколько часов на поиск. Но я обнаружил, что в моем каталоге node_modules нет трассировки. Поэтому я попробовал npm install traceur установить traceur.Then обновить systemjs.config.js, добавив строку типа 'traceur':'npm:traceur/bin/traceur.js'. К счастью, эта проблема была решена. Надеюсь, это поможет вам!