代码之家  ›  专栏  ›  技术社区  ›  Martin Labuschin

意外的令牌导出

  •  3
  • Martin Labuschin  · 技术社区  · 8 年前

    作为新的Angular新手,我正在尝试将我以前工作的Angural 2.0.0-beta17 web应用程序升级到Angular2.3.0。现在我在加载/启动应用程序时遇到了问题。

    (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行加载角度核心。

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

    系统之前的一切。导入(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上搜索了几个小时,但在这个案例中,类似问题的解决方案都不起作用。如何解决这个问题?提前非常感谢!

    注:如有必要,我可以提供存储库。请随便问!

    1 回复  |  直到 8 年前
        1
  •  4
  •   André Werlang    8 年前

    从错误堆栈跟踪中可以看出,它无法解析 @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 quickstart),这是一个很好的开始。或者使用angular cli,从长远来看这更好。

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