我正试图根据在http://angular.io找到的快速入门设置angular 2.我完全按照指南中的描述复制了每个文件,但当我运行npm start并打开浏览器选项卡时,我会看到"加载…"控制台中出现以下错误:

Uncaught SyntaxError: Unexpected token <                        (program):1
     __exec @ system.src.js:1374
Uncaught SyntaxError: Unexpected token <          angular2-polyfills.js:138
    Evaluating http://localhost:3000/app/boot
    Error loading http://localhost:3000/app/boot

这是我的app.component.ts:

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `<h1>My First Angular 2 App</h1>`
})
export class AppComponent {

}

我的boot.ts:

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';

bootstrap(AppComponent);

我的index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular 2 Quick Start</title>

    <script src="node_modules/es6-shim/es6-shim.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

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

    System.import('app/boot')
        .then(null, console.error.bind(console));
    </script>
</head>
<body>
    <my-app>Loading...</my-app>
</body>
</html>

我的package.json:

{
    "name": "angular2-quickstart",
    "version": "0.1.0",
    "scripts": {
        "tsc": "tsc",
        "tsc:w": "tsc -w",
        "lite": "lite-server",
        "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
    },
    "license": "MIT",
    "dependencies": {
        "angular2": "2.0.0-beta.0",
        "systemjs": "0.19.6",
        "es6-promise": "^3.0.2",
        "es6-shim": "^0.33.3",
        "reflect-metadata": "0.1.2",
        "rxjs": "5.0.0-beta.0",
        "zone.js": "0.5.10"
    },
    "devDependencies": {
        "concurrently": "^1.0.0",
        "lite-server": "^1.3.1",
        "typescript": "^1.7.3"
    }
}

最后是我的tsconfig.json:

{
    "compilerOptions": {
        "target": "ES5",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
    },
    "exclude": [
        "node_modules"
    ]
}

提前感谢您的帮助.

推荐答案

试着更换这个

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

用这个

System.config({
        packages: {
            app: { // must match your folder name
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });

我试图对他们的快速入门应用稍微不同的文件夹 struct ,但遇到了相同的问题.我发现"packages"对象上的属性名称必须与父文件夹匹配.

Angular相关问答推荐

在Angular中将路由解析器提供程序和组件提供程序相结合

如何在HTML外部项目中使用Web组件(以17角创建)

未在ng bootstrap 模式中设置表单输入

在Angular 为17的独立零部件中使用@NGX-平移

从Angular 前端访问ASP.NET Core 8 Web API时出现CORS错误

nx serve正在忽略@angular/localize/init的导入"

除非将 signal.set 作为间隔的一部分调用,否则Angular 信号效果不会执行

PrimeNG 避免在同一位置使用不同键的 cogo toast 重叠

如何在 Angular 中创建通用的可重用组件

如何将我的数组数据转换为逗号分隔的字符串

如何在Angular Material2中获取活动选项卡

ngx-bootstrap modal:如何从模态中获取返回值?

请添加@Pipe/@Directive/@Component 注解

如何在 Angular 4 中使用 Material Design 图标?

由于时区,Angular 4 日期管道显示错误的日期 - 如何解决这个问题?

ConnectionBackend 没有提供程序

检测指令中输入值何时更改

在 Angular 2 中使用 store (ngrx) 有什么好处

无法绑定到 target,因为它不是div的已知属性

找不到@angular/common/http模块