Question

我正在尝试使用角度教程中的quickstart项目来使用asp.net5站点。

到目前为止，它看起来确实应该正常工作......我按照教程从那里获取代码（调整路径以匹配我的asp网站中的代码）。但是我一直得到这个＆＃34;意想不到的令牌＆lt;＆＃34;错误，这是误导......

我发现一些使用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。您还可以通过packageNames脚本中的system.config.js数组看到您正在引用这些模块。

确保通过将依赖项添加到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 build将它们部署在你的lib文件夹中。

Answer 2

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

npm ERR！意外的标记＆lt;

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

Answer 3

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

再次查看开发人员工具（Chrome）网络对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'：'lib / angular2'应该使用'@angular'：'lib / @ angular'。但是如果你在angular2文件夹中有@ angular.rc1文件（只保留旧文件夹名称），那么请使用你的映射但尝试使用这个可选更新。他们可以提供帮助。

Angular2 RC1意外令牌＆lt;

3 个答案: