Angular 2 - 404 traceur not found

2019-01-14 01:00发布

站内问答 / Angular
1049 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条回答
ら.Afraid
2楼-- · 2019-01-14 01:18

I got this issue when following the Angular Heroes tutorial. It was caused by invalid location of the angular-in-memory-web-api import, in the systemjs.config.js file. The correct location should be : 

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

and remove packages.angular-in-memory-web-api

see https://github.com/angular/quickstart/commit/541bdc5f634e1142860c56cace247234edfaf74b

查看更多
0人赞 添加讨论(0) 举报
贪生不怕死
3楼-- · 2019-01-14 01:20

Because of version change it throws 404 error. to resolve this issue we need to do below modifications in systemjs.config.js file:

  1. replace npm:angular-in-memory-web-api/ with npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js. in map.

  2. remove below code in packages:

    'angular-in-memory-web-api': {
    main: './index.js',
    defaultExtension: 'js'
}
查看更多
0人赞 添加讨论(0) 举报
贪生不怕死
4楼-- · 2019-01-14 01:26

There are multiple reason behind this error,

1)Sometimes comments mentioned on top of app.component.ts file
2)pointing to incorrect umd file
3)If you are using ts(Typescript) version, please mention the transpiler options in config.js file as below or compile your all .ts file to .js file using transpiler and then reference .js file in code:

(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);
查看更多
0人赞 添加讨论(0) 举报
smile是对你的礼貌
5楼-- · 2019-01-14 01:28

I experienced this same error while migrating from RC4 to RC6.

For my project, I had to update the systemjs.config.js file. I stopped referencing the root index.js files, and started referencing the core.umd.js files in /bundles.

Following this: example

查看更多
0人赞 添加讨论(0) 举报
劳资没心，怎么记你
6楼-- · 2019-01-14 01:28

I think the first thing you should do is to check whether you have download the traceur!I have met this problems and it token me several hours to search.But I found there is not a traceur in my node_modules directory. So I have try npm install traceur to install traceur.Then update the systemjs.config.js,adding a line like 'traceur':'npm:traceur/bin/traceur.js'. Fortunately,this problem was resolved.Hope this can help you !

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