Angular2 RC1 意外令牌 <

Question

我正在努力使 angular 教程中的快速启动项目适应 asp.net5 站点。

到目前为止，它确实看起来应该可以正常工作...我按照教程并从那里获取了代码（调整路径以匹配我的 asp 网站中的路径）。但是我一直收到这个 "Unexpected Token <" 错误，这是非常误导的...

我发现了一些使用 beta9 的示例，但我更喜欢运行最新版本的 angular2 (rc1)，所以我已经坚持了几个小时了.. .

无论如何，这是我的项目文件的样子：

index.html:

<html lang="">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Trail Running Life</title>
        <base href="/">
        <link rel="stylesheet" href="/css/bootstrap.css">
        <link rel="stylesheet" href="/css/site.css">
</head>
<body>

    <app>
        Loading...
    </app>


    <script src="/lib/jquery.js"></script>
    <script src="/lib/bootstrap.js"></script>       

    <script src="/lib/es6-shim.js"></script>
    <script src="/lib/zone.js"></script>
    <script src="/lib/Reflect.js"></script>
    <script src="/lib/system.src.js"></script>
    <script src="/system.config.js"></script>

    <script>       
      System.import('app').catch(function(err){ console.error(err);  });
    </script>
</body>
</html>

system.config.js:

(function (global) {

    // map tells the System loader where to look for things
    var map = {
        'app': 'app', // 'dist',
        'rxjs': 'lib',
        '@angular': 'lib/angular2'
    };

    // 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' }
    };

    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] = { 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);

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

bootstrap(AppComponent);

app.component.ts

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

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

这是我的文件夹结构（lib 文件夹是通过 gulp 命令生成的）：

非常感谢任何帮助！

Answer 1

您遗漏了现在以 @angular 名称发布的整个 Angular 2 个 RC 模块。您有名称为 angular2 的模块，它与 Angular 2 beta 相关，并且在 RC1 版本中已重命名为 @angular。此更改的详细信息已记录在案 here。您还可以看到您正在通过 system.config.js 脚本中的 packageNames 数组引用这些模块。

通过将它们添加到您的 package.json 文件来确保您正在获取依赖项：

"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",
  "es6-shim": "^0.35.0",
  "reflect-metadata": "^0.1.3",
  "rxjs": "5.0.0-beta.6",
  "zone.js": "^0.6.12",

  "angular2-in-memory-web-api": "0.0.7",
  "bootstrap": "^3.3.6"
},

并且它们与您的 gulp 构建一起部署在您的 lib 文件夹中。

Answer 2

您是否在运行 NPM 安装步骤时遇到此错误？这可能是 NPM 缓存代理问题。如果您使用的是不支持 NPM 包命名空间（例如：“@angular”）的稍旧的 Nexus，您将收到与您的错误类似的错误。

npm ERR! Unexpected token <

Can't install when behind an npm proxy such as Nexus or Artifactory #706

Answer 3

您收到此错误，因为 system.config.js 没有足够的（或有错误的）信息来构建静态 .js 文件的正确路径。它需要 Javascript 文件，但从您的网络服务器得到 HTML 响应。

再看看 Developers tools (Chrome) Network 对 JS 文件的 XHR 响应，会发现您需要添加哪些映射到 system.config.js。

构建后您的应用程序文件位于何处？这是 'app' 文件夹吗？或 'app/dist'?...

更新

试试这个：

(function (global) {

    // map tells the System loader where to look for things
    var map = {
        'app': 'app', // 'dist',
        'rxjs': 'lib',
        '@angular': 'lib/@angular'
    };

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: 'main'},
        'rxjs': { main: 'rx' }
    };

    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' };
    });

    var config = {
        defaultJSExtensions: true,
        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);

可选：您可以对整个配置对象使用 defaultJSExtensions: true；
可选：为@angular 包指明默认文件{main:'index'}；
主要原因：您映射到 angular 的错误文件夹。而不是'@angular'：'lib/angular2' 应该使用'@angular'：'lib/@angular'。但是，如果您在 angular2 文件夹中有 @angular.rc1 文件（只保留旧文件夹名称），那么请使用您的映射，但尝试使用此可选更新。他们可以提供帮助。

Angular2 RC1 意外令牌 <

Angular2 RC1 Unexpected Token <

typescript

visual-studio-2015

asp.net5

angular