【问题标题】:Angular2 RC1 Unexpected Token <Angular2 RC1 意外令牌 <
【发布时间】:2016-05-12 02:25:44
【问题描述】:

我正在尝试适应从 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命令生成的):

非常感谢任何帮助!

【问题讨论】:

    标签: typescript visual-studio-2015 angular asp.net5


    【解决方案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 构建一起部署在您的 lib 文件夹中。

    【讨论】:

    • 谢谢,但这些是我的 package.json 中的那些。当我在电脑前时,我会发布更新拉里。我只是将 angular 2 文件夹名称保留在我的 lib 文件夹中
    【解决方案2】:

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

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

    构建后您的应用文件在哪里?这是“应用程序”文件夹吗?还是'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);
    
    1. 可选:您可以将defaultJSExtensions: true 用于整个配置对象;
    2. 可选:为@angular 包指明默认文件{main:'index'}
    3. 主要原因:您为 Angular 映射到错误的文件夹。而不是 '@angular': 'lib/angular2' 应该使用 '@angular': 'lib/@angular'。但是,如果您在 angular2 文件夹中有 @angular.rc1 文件(仅保留旧文件夹名称),那么请使用您的映射但尝试使用此可选更新。他们可以提供帮助。

    【讨论】:

    • 哦,没想到...所以你认为这与 404 有关?
    • 没错,我也有同样的问题。
    • 很遗憾,没有错过 xhr 请求。它正确地调用了我的 core.js 和 platform-b​​rowser-dynamic.js(都来自角度)以及我自己的 main.js 和 app.component.js ......任何 xhr 请求都没有 404
    • 我刚刚检查了每个调用...事实证明 core 和 platform-b​​rowser-dynamic 在没有扩展名的情况下被调用...因此它没有返回正确的结果。我想知道为什么它不这样做,根据systemjs文档,添加defaultExtension应该就足够了......
    • 泽维尔,没有帮助吗?您对此还有其他问题吗?
    【解决方案3】:

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

    npm 错误!意外的令牌

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

    【讨论】:

    • 在运行时,npm install 没有问题
    猜你喜欢
    • 1970-01-01
    • 2017-08-06
    • 1970-01-01
    • 1970-01-01
    • 2016-03-27
    • 1970-01-01
    • 1970-01-01
    • 2016-04-04
    • 1970-01-01
    相关资源
    最近更新 更多