2017-03-15 34 views
1

我一直在使用Angular2和JSPM(v17),但唯一能讓它工作的方法是配置打字稿來編譯我的模塊爲commonjs。然而,在這樣做時,我總是看到每個文件以下警告:如何在JSPM中使用Angular2?

TypeScript [Warning] transpiling to CommonJS, consider setting module: "system" in typescriptOptions to transpile directly to System.register format

當我設置模塊system我得到以下運行時錯誤:

TypeError: Cannot read property 'forRoot' of undefined

正在被從該位拋出代碼:

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 is not a function

圍繞我AppComponent

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

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

顯然,任何角度進口回來的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,但後來我看到以下運行時錯誤:

Can't add property ng, object is not extensible

commonjs唯一路要走還是我想念一個設置?

回答

2

Guy Bedford

Yes this was a change in SystemJS 0.20 where named exports for non-ES modules are no longer supported, in order to align with how interop will work in NodeJS between ES modules and CommonJS, which is to only provide compatibility with the default import form - import module from 'module' (equivalent to import {default as module} from 'module').

要包括CommonJS的模塊,命名爲出口,我需要一個覆蓋添加到每個角庫,包括那名CommonJS的任何其他第三方庫。

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

現在,它似乎是最好的只是設置打字稿使用commonjs作爲模塊系統。