Question

我一直在使用Angular2和JSPM（v17），但我能够让它工作的唯一方法是配置typescript来将我的模块编译为commonjs。但是，在这样做时，我总是会看到每个文件的以下警告：

TypeScript [警告]转换为CommonJS，考虑设置模块：＆＃34; system＆＃34;在typescriptOptions中直接转换为System.register格式

当我将模块设置为system时，我收到以下运行时错误：

TypeError：无法读取属性＆＃39; forRoot＆＃39;未定义的

从这段代码中抛出了什么：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
    { path: '', redirectTo: '/login', pathMatch: 'full' },
];

@NgModule({
    imports: [RouterModule.forRoot(appRoutes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

如果我从项目中删除路由模块，我最终会看到以下错误：

core_1.Component不是函数

围绕我的AppComponent：

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<h1>hello world</h1>`,
})
export class AppComponent { }

显然，任何Angular导入都会以null的形式返回。

这是我的tsconfig.json：

{
    "compilerOptions": {
        "target": "es2016",
        "module": "system",
        "moduleResolution": "node",
        "inlineSourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [
            "es2016",
            "dom"
        ],
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true
    },
    "exclude": [
        "jspm_packages"
    ]
}

我还尝试将所有@angular个包的格式覆盖到esm，但后来我看到以下运行时错误：

无法添加属性，对象不可扩展

commonjs是唯一可行的方法，还是我错过了设置？

Answer 1

来自Guy Bedford：

是的，这是SystemJS 0.20的更改，其中非ES的命名导出不再支持模块，以便与互操作方式保持一致将在ESJ模块和CommonJS之间的NodeJS中工作提供与默认导入表单的兼容性 - 导入模块来自＆＃39;模块＆＃39; （相当于导入{默认为模块}来自＆＃39;模块＆＃39;。）

要将CommonJS模块包含在命名导出中，我需要为每个角度库添加覆盖，包括任何其他常见的第三方库。

"meta": {
  "*.js": {
    "esModule": true
  }
}

目前，最好只设置typescript以使用commonjs作为模块系统。

如何在JSPM中使用Angular2？

1 个答案: