Question

所以我遇到了以角度2显示我的第一个组件的问题。我遵循了这个post to setup typescript. 我按照5分钟快速入门指南here on Angular website 让我的第一个组件工作。我没有在控制台中收到错误或任何内容，但我确实看到在浏览器中加载....有谁知道我做错了什么？

package.json文件

{
  "name": "budget_calculator",
  "version": "1.0.0",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.1",
    "@angular/compiler":  "2.0.0-rc.1",
    "@angular/core":  "2.0.0-rc.1",
    "@angular/http":  "2.0.0-rc.1",
    "@angular/platform-browser":  "2.0.0-rc.1",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
    "@angular/router":  "2.0.0-rc.1",
    "@angular/router-deprecated":  "2.0.0-rc.1",
    "@angular/upgrade":  "2.0.0-rc.1",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.10",
    "bootstrap": "^3.3.6"
  }
}

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';

import { Navigation } from './components/nav.component';

bootstrap(Navigation);

nav.component.ts

import {Component} from '@angular/core';

@Component({
    selector: 'my-app',
    template: '<h1>Angular 2 is present</h1>'
})

export class Navigation {

}

的index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Load libraries for Angular 2-->
        <script src="node_modules/core-js/client/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>
            System.config({
                packages: {
                    app: {
                        format: 'register',
                        defaultExtension: 'js'
                    }
                }
            });
            System.import('./app/main').then(null, console.error.bind(console));
        </script>
    </head>

    <body>
        <header>
            <my-app>
                Loading.....
            </my-app>
        </header>
    </body>
</html>

项目结构

node
node_modules
src
   -> main
     -> webapp
        -> node_modules
        -> app
            -> components
                - nav.component.js.map
                - nav.component.d.ts
                - nav.component.ts
                - nav.component.js
            - main.d.ts
            - main.js
            - main.js.map
            - main.ts
            - index.html

Javascript控制台错误

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (app, line 0)
[Error] Error: invoke@http://localhost:8080/BudgetCalculator/node_modules/zone.js/dist/zone.js:323:34
    runGuarded@http://localhost:8080/BudgetCalculator/node_modules/zone.js/dist/zone.js:230:54
    http://localhost:8080/BudgetCalculator/node_modules/zone.js/dist/zone.js:206:40


Error loading http://localhost:8080/BudgetCalculator/app

(anonymous function) (index.html:19)
invoke (zone.js:323)
run (zone.js:216)
(anonymous function) (zone.js:571)
invokeTask (zone.js:356)
runTask (zone.js:256)
drainMicroTaskQueue (zone.js:474)
g (shim.min.js:8:10178)
(anonymous function) (shim.min.js:8:10300)
k (shim.min.js:8:14323)

Answer 1

您需要使用systemjs映射包@angular/core，@angular/common ...等。否则，它怎么知道在哪里找到它们？

创建一个名为systemjs.config.js

的新文件

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // 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 ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

然后，在index.html中，导入您创建的文件：

<script src="systemjs.config.js"></script>
<script>
  System.import('app').catch(function(err){ console.error(err); });
</script>

请注意，您应该从index.html

中删除以下内容

System.config({
    packages: {
        app: {
             format: 'register',
             defaultExtension: 'js'
        }
    }
});

上面的代码取自页面最底部的angular2 quick start page。

Angular 2和Eclipse - 无法加载资源：服务器响应状态为404

1 个答案: