我试图根据http://angular.io上的快速入门设置角度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: `
My First Angular 2 App
`
})
export class AppComponent {

}

我的boot.ts:

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

bootstrap(AppComponent);

我的index.html:

    
    

    
    
    
    
    

    


    Loading...

我的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"
    ]
}

在此先感谢您的帮助.

1> 小智..：

---

尝试替换它

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

有了这个

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

我试图在他们的快速入门中应用稍微不同的文件夹结构并遇到同样的问题.我发现"packages"对象上的属性名称必须与父文件夹匹配.

---

是否可以为根目录创建一个包？简而言之,我已将我的`index.html`移动到`app`目录并将`app`设置为webroot.我需要加载`./ boot /`而不是`./ app/boot`

2> 小智..：

---

对于遇到"意外令牌<"错误的人的提示.对我来说,这发生在SystemJS试图检索依赖项(JavaScript文件)而Web服务器返回HTML页面(因此html中意外打开<)时.

通过逐个查看下载的JavaScript文件,我能够在Chrome的网络选项卡上的开发工具中查明这一点,直到我找到了返回HTML的文件.这使我可以轻松解决导入问题.

希望我们可以在某些时候得到更有意义的错误信息 -

---

这是一个完整的答案吗？

---

这应该更高 - 如果您尝试更改节点服务器的行为,让Angular处理404错误而不是节点,这可能是一个问题.

3> dchacke..：

---

我有不同的节点模块的类似问题,来自谷歌.

通常,我会在收到import包后然后尝试使用它时收到错误.

例如,我在加载https://github.com/ngrx/store时遇到了同样的问题.

我检查了我的网络选项卡,结果显示为store.js加载的文件(该模块的主文件)不正确.它请求了store.js,但得到了我的index.html,它以一个"<" 开头,即无效的JavaScript.

我不清楚为什么我的index.html被用来代替实际的JavaScript文件.一种解释可能是SystemJS发出的请求无处可去,我的服务器配置为默认提供index.html.但是,我没有足够的数据来证明这一点.Cum grano salis.

在任何情况下,我通过明确地告诉SystemJS修复它,如果它自己找不到它就会存在.因此,例如,要修复失败import { Store } from '@ngrx/store';,您可以执行以下操作:

System.config({
  packages: {
    src: {
      format: 'register',
      defaultExtension: 'js'
    }
  },
  map: { '@ngrx/store' : '/node_modules/@ngrx/store/dist/store.js' } // <-- this!
});
System.import('src/boot')
      .then(null, console.error.bind(console));

因为该Store模块存在于该文件中.这样,SystemJS就可以找到它,并且可以很好地导入模块.

---

在我的例子中,它是一个简单的`import {...}来自'./ directory /`.我不得不用'./ directory/index'`中的`import {...}替换它.