如何解决 ParseError：导入 UpgradeAdapter 时，“import”和“export”可能只出现在“sourceType：module”中？答案

【问题标题】：How do I solve ParseError: 'import' and 'export' may appear only with 'sourceType: module' when importing UpgradeAdapter?如何解决 ParseError：导入 UpgradeAdapter 时，“import”和“export”可能只出现在“sourceType：module”中？
【发布时间】：2017-01-24 22:20:54
【问题描述】：

我正在尝试将现有的 anguar.js 应用程序升级到 angular 2，遵循 https://angular.io/docs/ts/latest/guide/upgrade.html。

该应用程序已经使用 Typescript 编写，我们正在使用 browserify 和 tsify 来编译和捆绑该应用程序。

在使用 npm 安装 angular 2 依赖项并尝试引导混合应用程序后，browserify 给我以下错误：

/my-project/node_modules/@angular/upgrade/static.js:8
export { downgradeComponent } from './src/aot/downgrade_component';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

只有添加以下代码后才会出现错误：

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';
import {UpgradeModule} from '@angular/upgrade/static';

platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
    upgrade.bootstrap(document.documentElement, ['sagaDesktopApp']);
});

这是我的tsconfig.json：

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "suppressImplicitAnyIndexErrors": true
    }
}

非常感谢任何帮助。

【问题讨论】：

标签： angularjs angular typescript browserify tsify

【解决方案1】：

我已经重现了这个问题。这与@angular/upgrade 中有一个static.js 文件有关，当Browserify 尝试解析@angular/upgrade/static 时，它会解析为：

node_modules/@angular/upgrade/static.js

但是，它的意图是解决：

node_modules/@angular/upgrade/static/package.json

static 目录中的 package.json 包含一个 main 条目，供 Browserify 等非 ES6 捆绑器使用。

Browserify 模仿 Node's module resolution mechanism 并且它应该在目录之前检查文件，因此要解决此问题，请在导入后附加一个斜杠：

import { UpgradeModule } from '@angular/upgrade/static/';

Browserify 将首先检查目录并将package.json 解析为捆绑包。

如果您有兴趣，在this Tsify issue 中有更多关于package.json 文件的main/module 事物的信息。

【讨论】：

非常感谢！附加斜线修复它:-)