使用Angular 1.x與TypeScript 1.5和SystemJS

我試圖在TypeScript 1.5.3和SystemJS中使用Angular 1.x。 index.html頁面設置爲System.import('bootstrapper')，這應該開始啓動。使用Angular 1.x與TypeScript 1.5和SystemJS

bootstrapper.ts被編譯到bootstrapper.js和罰款，只要工作，它不使用的角度（即做只是console.log()工程確定）現在

，我想進口和使用的角度來引導它。我已經完成了jspm install angular，並且我還使用tsd安裝了一些角度類型。這些類型在bootstrap.ts文件的頂部被引用。

不幸的是import angular from 'angular'不能編譯，我得到Module "angular" has no default export。我的問題是：

爲什麼import angular from 'angular'沒有編譯？尋找在angular.d.ts文件I看到declare module 'angular'{ export = angular; }，如果正確地明白是從一個變量（在上面的分型文件中定義）的模塊角默認出口declare var angular: angular.IAngularStatic
我注意到，這樣做import 'angular'編譯，然後我可以實際引用angular並做例如angular.module(...)，但我不認爲我正確理解這是如何工作的。不應該import 'angular'做一個「裸導入」，即僅爲其副作用運行模塊？如果是這樣的話，那麼這是否意味着該導入實際上在全球範圍內註冊angular？

我敢肯定，我不明白模塊/類型定義文件如何在Typescript中工作，在此先感謝解釋。

來源

2015-09-01 adrian h.

[...]如果我理解正確的話，是從模塊角可變

都能跟得上的默認出口，這不是發生了什麼。如果有意義，Angular會將整個名稱空間導出爲導出。

import angular from 'angular'正嘗試從模塊導入default。

你想要的是import * as angular from 'angular';，它將整個導出作爲變量導入。

來源

2015-09-01 17:11:55 thoughtrepo

只需要注意，'import angular'不會嘗試導入名爲'angular'的東西，它試圖將一個名爲'default'的東西導入到名爲'angular'的綁定中。 – loganfsmyth

@loganfsmyth謝謝，把它和大括號混在一起，謝謝 – thoughtrepo

不知道我明白了。你是說'export = angular'中的'angular'是指在d.ts文件中定義爲'define module angular'的模塊，而不是上面聲明爲'declare var angular：angular.IAngularStatic'的變量。或者是指變量，但變量是一個接口類型，它以某種方式將該接口導出爲一個名稱空間？如果這是這種情況，那麼我猜'聲明var x'實際上並不創建一個變量，它只是'module.interface'的別名？ –

首先，以下是我使用AngularJS 1的首選方式。5打字稿和SystemJS： index.html

<script src="jspm_packages/system.js"></script> 
<script src="config.js"></script> 

<script> 
    SystemJS.import('app') 
    .then(function (app) { 
     app.bootstrap(document); 
    }) 
    .catch(function (reason) { 
     console.error(reason); 
    }); 
</script>

app/main.ts

import angular from 'angular'; 

const app = angular.module('app', []); 

export function bootstrap(target: Element | Document) { 
    angular.bootstrap(target, [app.name], { strictDi: true }); 
}

tsconfig.json

{ 
    "compilerOptions": { 
     "module": "system", 
     "allowSyntheticDefaultImports": true, 
     .... 
    } 
}

config.js（裝載機配置，簡化的）

SystemJS.config({ 
    transpiler: "typescript", 
    packages: { 
    "app": { 
     main: "main.ts", 
     defaultExtension: "ts", 
     meta: { 
     "*.ts": {loader: "typescript"} 
     } 
    } 
    } 
});

注：

如果您正在使用JSPM 0.17指定"plugin-typescript"，不"typescript"爲裝載機和transpiler或只是運行$ jspm init，並選擇一個transpiler。
您可以將角度導入爲默認值，但仍會在全局範圍內註冊。
您收到語法錯誤的原因是因爲angular及其angular.d.ts聲明文件包含CommonJS樣式export =聲明以允許使用基於模塊和全局名稱空間。爲了獲得最大的兼容性，SystemJS在運行時將其插入到默認導出中。
TypeScript編譯器需要知道這一點。這可以通過設置"module": "system"和/或指定"allowSyntheticDefaultImports": true來完成。爲了闡述和明確，我做了兩件事。

來源

2016-05-30 03:06:40

使用Angular 1.x與TypeScript 1.5和SystemJS

回答

相關問題