Angular 2 - 404 traceur not found

2019-01-14 01:00发布

站内问答 / Angular
1050 17 5

I've followed the starting guide and expanded a little upon for a previous angular 2 version. I've updated my revision and changed everything accordingly. When I am running the web server I now receive the error 404 for traceur... Error 404 for traceur

Here is my project structure: Project structure

Relevant files :

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's 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"
  ]
}

A possible issue could be enter image description here this is boycotting my progress.

17条回答
贼婆χ
2楼-- · 2019-01-14 01:12

I've had the same issue and it couldn't load one of my files. I opened the file and everything was correctly there.

The problem was that I've had a snippet commented out in the same file. Snippet contained this keyword "export class". Even though it was commented out, it was parsed by Angular.

Make sure that you don't have "export class" keywords in your comments, and delete the temporary commented code just to check if it works without it.

查看更多
0人赞 添加讨论(0) 举报
Summer. ? 凉城
3楼-- · 2019-01-14 01:14

In my case I didn't even had traceur as a dependency in node_modules and the app was working fine but all of a sudden started to ask for traceur after adding a library that didn't need traceur either.

The solution was to reference the newly added libraries from bundles folders instead of src (or default folder) in system.config.js and specifying the .umd.js version of files. Also, I had to remove the main entry from the packages section.

The reason behind is that loading the umd modules from the bundle folders does not trigger the traceur transpiler as it assumes the library module is already in the correct format. Otherwise, it may assume that the code is written in es2015 and it needs transpilation so it invokes traceur.

I came across this traceur issue after trying to connect to a Firebase instance from a perfectly runnable "Tour of Heroes" app with the aid of AngularFire2. I tried all the answers here but none of them helped, so I googled until I found this github issue.

查看更多
0人赞 添加讨论(0) 举报
趁早两清
4楼-- · 2019-01-14 01:14

The problem is within the system.js I think:

There is a regex, which is used to detect import-statements:

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

This regex will detect import-statements within multiline-comments and cause this horrible error. I have opened an issue here:

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

查看更多
0人赞 添加讨论(0) 举报
萌系小妹纸
5楼-- · 2019-01-14 01:14

I have the same issue, after I googled for this case, then I solved it by changed: Core issue: main: 'index.js' must be changed to 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'
    }
}

Note: My maps:

map: {
    '@angular': 'node_modules/@angular',
    'rxjs': 'node_modules/rxjs'
}
查看更多
0人赞 添加讨论(0) 举报
【Aperson】
6楼-- · 2019-01-14 01:16

For me, what happened is a co-worker deleted a TypeScript file, which meant I had an old *.js file no longer needed (since our source control ignores these files). If the traceur error references a *.js file you don't need, delete the file.

查看更多
0人赞 添加讨论(0) 举报
我想做一个坏孩纸
7楼-- · 2019-01-14 01:17

At first, you should compile your TypeScript files with 

$ tsc

command. If you are running application outside the node envirnoment, you should compile TypeScript files manually.

Also check tsconfig.json - if script version is set as ES6 for Angular 2.0

查看更多
0人赞 添加讨论(0) 举报
上一页 1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)