logo标签列表

意外的标记出现：export。

javascriptangulartypescriptsystemjs
3
作为一个新手Angular程序员，我试图将之前的 Angular 2.0.0-beta17 web 应用程序升级到 Angular 2.3.0。现在我在加载/启动应用程序时遇到了问题。
我的设置如下：
出于解决方案目的，目前我复制了所有的 node_modules 到 web 目录中，因此不应该缺少任何文件。
(web directory)
├── index.html
├── js
│   ├── boot.js
│   ├── boot.js.map
│   ├── feedback-form.component.js
│   ├── feedback-form.component.js.map
│   ├── feedback-form.service.js
│   ├── feedback-form.service.js.map
│   ├── lib
│   │   └── *all node modules*
│   ├── ui-molecule.component.js
│   └── ui-molecule.component.js.map
└── views
    ├── feedback-form.html
    └── ui-molecule.html

package.json

每次更改 package.json 后，我都会丢弃并重新构建模块文件夹，因此它是最新的。

{
  "name": "FeedbackFormWebApp",
  "version": "0.0.1",
  "author": "Martin Labuschin",
  "description": "...",
  "repository": "...",
  "license": "MIT",
  "devDependencies": {
    "@angular/core": "2.3.0",
    "systemjs": "0.19.41",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.35.2",
    "reflect-metadata": "0.1.8",
    "rxjs": "5.0.0-rc.4",
    "zone.js": "^0.7.2",
    "gulp": "^3.9.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-typescript": "3.1.3",
    "gulp-webserver": "^0.9.1",
    "del": "2.2.2",
    "@angular/router": "3.3.0",
    "@angular/common": "2.3.0",
    "@angular/platform-browser": "2.3.0",
    "@angular/platform-browser-dynamic": "2.3.0",
    "@angular/http": "2.3.0",
    "@angular/compiler": "2.3.0",
    "typescript": "2.1.4",
    "minimatch": "3.0.2",
    "graceful-fs": "^4.0.0"
  }
}

index.html（仅脚本部分）：

我根据我的文件/目录结构设置了路径。

<script type="text/javascript" src='/js/lib/es6-shim/es6-shim.min.js'></script>
<script type="text/javascript" src="/js/lib/rxjs/bundles/Rx.min.js"></script>
<script type="text/javascript" src="/js/lib/zone.js/dist/zone.min.js"></script>
<script type="text/javascript" src="/js/lib/reflect-metadata/Reflect.js"></script>
<script type="text/javascript" src='/js/lib/systemjs/dist/system.src.js'></script>

<script type="text/javascript">
  System.config({
    packages: {
      js: {
        format: 'register',
        defaultExtension: 'js'
      }
    },
    paths: {
      '@angular/*': 'js/lib/@angular/*/index.js',
      'rxjs/*': 'js/lib/rxjs/*.js'
    }
  });
  System.import('js/boot').catch(function(err){ console.error(err); });
</script>

boot.ts（已由我的gulpfile成功转换为js）尝试在第1行加载angular-core。

import '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Http, Response, Headers } from '@angular/http';

import { FeedbackFormComponent } from './feedback-form.component';

platformBrowserDynamic().bootstrapModule(FeedbackFormComponent);

在 System.import (index.html) 之前的所有内容 似乎 都已经准备就绪。 加载了 lib 文件，没有出现 404 等错误。但是我一直收到以下错误：

> (index):28 Error: (SystemJS) Unexpected token export  SyntaxError:
> Unexpected token export
>       at eval (<anonymous>)
>       at e.invoke (http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:15094)
>       at n.run (http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:12458)
>       at http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:10100
>       at e.invokeTask (http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:15723)
>       at n.runTask (http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:13076)
>       at a (http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:9146)
>       at XMLHttpRequest.invoke (http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:16876)
>   Evaluating http://localhost:8000/js/lib/@angular/core/index.js  Error
> loading http://localhost:8000/js/lib/@angular/core/index.js as
> "@angular/core" from http://localhost:8000/js/boot.js
>       at eval (<anonymous>)
>       at e.invoke (http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:15094)
>       at n.run (http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:12458)
>       at http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:10100
>       at e.invokeTask (http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:15723)
>       at n.runTask (http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:13076)
>       at a (http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:9146)
>       at XMLHttpRequest.invoke (http://localhost:8000/js/lib/zone.js/dist/zone.min.js:1:16876)
>   Evaluating http://localhost:8000/js/lib/@angular/core/index.js  Error
> loading http://localhost:8000/js/lib/@angular/core/index.js as
> "@angular/core" from http://localhost:8000/js/boot.js

我已经在Google和Stackoverflow上搜索了几个小时，但是没有找到解决这个问题的方法。你能告诉我如何解决吗？非常感谢您的帮助！如果需要，我可以提供代码库，请问您是否需要呢？
你的模块 ts 在哪里？ - anshuVersatile
没有名为ts的模块。这个模块没有被创建或者被引用。请问你期望它被放在哪里或者被用在什么地方？ - Martin Labuschin
你不应该移动 node_modules。这样会破坏路径。 - Roman C
没有损坏的路径。所有文件都已正确加载（根据我的检查器）。此外，我只是将模块文件夹从应用程序根目录复制到Web文件夹中，而没有移动它。 - Martin Labuschin
bootstrapModule命令需要传递模块类而不是组件类。 - anshuVersatile
这似乎是下一个问题。我会调查一下。到目前为止谢谢。 - Martin Labuschin
1个回答
4

从错误堆栈跟踪可以看出，解析@angular/core/index.js失败。当您转换自己的源文件时，Angular被部署为具有ES5语法的ES2015模块。您必须使用纯ES5版本，我建议使用部署的UMD文件。

请按照以下方式更新您的systemjs.config.js：

// map tells the System loader where to look for things
map: {
  // our app is within the app folder
  app: 'app',

  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',

或者使用现有的工作设置（例如 Angular 快速入门），这是一个很好的起点。或者使用 angular-cli，这对于长期来看更好。

来源：https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js

目前看起来不错。但是我也以同样的方式添加了http和platform-browser-dynamic，因为检查器显示它需要这些。但现在它在这里出现了问题：(index)：33错误：（SystemJS）无法读取未定义的__platform_browser_private__属性。 - Martin Labuschin
在 RC 版本中，他们引入了 NgModules，所以我建议您使用 angular-cli 重新开始并运行。然后迁移您以前的 .ts 文件。我指出了为什么会发生错误，但保持当前设置并不是有效的做法。 - André Werlang
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接