Tăng gấp đôi với các lớp nhập từ mô-đun Angular 2 với Typescript 1.7

Question

Tôi đang gặp khó khăn trong việc hiểu cách nhập các lớp từ Mô-đun trong TypeScript, đặc biệt cho Angular 2 trong Visual Studio 2015 (cập nhật 1) với TypeScript 1.7.

Mọi nơi trong tài liệu hướng dẫn 2 Tôi thấy các câu lệnh nhập như: import {Component} from 'angular2/core';. Các tệp này nằm trong số node_modules/angular2/*. Điều gì làm cho chỉ angular2/* hoạt động?

Tôi chỉ có thể loại bỏ các lỗi trong Visual Studio khi tôi có đường dẫn tương đối từ thư mục ứng dụng như: ./../node_modules/angular2/platform/browser';. Này sửa chữa các Visual Studio xây dựng sai sót, nhưng khi tôi cố gắng và chạy các ứng dụng với System.import('app/boot') tôi nhận được một loạt các lỗi như thế này:

system.src.js:1049 GET http://localhost:8080/node_modules/angular2/platform/browser 404 (Not Found)

Một vấn đề khác là việc có thể sử dụng những câu như: import {SearchComponent} from './Components/Search/search.component'; trong Visual Studio, nhưng sau đó khi tôi chạy nó có rất nhiều lỗi GET tại system.src.js:2476.

Tôi nghĩ rằng việc đặt defaultExtension: 'js' cho System.config nên đã giải quyết vấn đề đó.

CẬP NHẬT Dưới đây là tất cả các file mà tôi nghĩ là có liên quan:

views/home/index.html

<script src="node_modules/es6-shim/es6-shim.js"></script> 
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
<script src="node_modules/systemjs/dist/system.src.js"></script> 
<script src="node_modules/rxjs/bundles/Rx.js"></script> 
<script src="node_modules/angular2/bundles/angular2.dev.js"></script> 
System.config({ 
     packages: { 
      app: { 
       format: 'register', 
       defaultExtension: 'js' 
      } 
     } 
    }); 
System.import('app/app') 
    .then(null, console.error.bind(console)); 

test.csproj

<TypeScriptToolsVersion>1.7</TypeScriptToolsVersion> 
<TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators> 
<TypeScriptModuleResolution>Node</TypeScriptModuleResolution> 
<TypeScriptTarget>ES5</TypeScriptTarget> 
<TypeScriptJSXEmit>None</TypeScriptJSXEmit> 
<TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled> 
<TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny> 
<TypeScriptModuleKind>CommonJS</TypeScriptModuleKind> 
<TypeScriptRemoveComments>False</TypeScriptRemoveComments> 
<TypeScriptOutFile /> 
<TypeScriptOutDir /> 
<TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations> 
<TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError> 
<TypeScriptSourceMap>True</TypeScriptSourceMap> 
<TypeScriptMapRoot /> 
<TypeScriptSourceRoot /> 

typings/tsd.d.ts

export * from './../node_modules/angular2/core'; 
export * from './../node_modules/angular2/common'; 
export * from './../node_modules/angular2/http'; 
export * from './../node_modules/angular2/router'; 
export * from './../node_modules/angular2/platform/browser'; 

cấu trúc File:

app/ 
    app.ts 
    components/ 
    models/ 
    services/ 
node_modules/ (npm install using Angular 2 quickstart's package.json) 
    angular2/ (not all the files listed) 
     bundles/ (not all the files listed) 
      angular2.dev.js 
     platform/ 
     src/ 
     ts/ 
     typings/ 
     common.d.ts 
     core.d.ts 
     http.d.ts 
     router.d.ts 
    es6-module-loader/ 
    es6-promise/ 
    es6-shim/ 
    rxjs/ 
    systemjs/ 
    zone.js/ 
    typescript/ (not sure if this needs to be here) 

Tôi không quen với nguyên cảo, có thể có được một lỗi gây ra bởi các hệ thống mô-đun nguyên cảo khác nhau? Angular 2 đề nghị System.config được thiết lập với format: 'register' nhưng https://www.npmjs.com/package/angular2 nói rằng các tập tin có thể được tiêu thụ bằng cách sử dụng CommonJs.

Với những tập tin này, tôi nhận được hai giao diện điều khiển lỗi:

app.ts:1 Uncaught ReferenceError: require is not defined(anonymous function) @ app.ts:1 
angular2-polyfills.js:143 Uncaught TypeError: Cannot read property 'split' of undefined 

Answer 1

Làm thế nào để tập tin HTML của bạn tải 2 thư viện góc? Nó phải là đơn giản như

<script src="path/to/my/libs/angular2.dev.js"></script>

Bạn sẽ nhận thấy tập tin có chứa toàn bộ các thư viện 2 góc xây dựng/nối. Bạn không nên trỏ trang web của mình vào các tệp nguồn thô.

SystemJS biết điều gì angular2/core có nghĩa là vì thư viện được xây dựng xác định ý nghĩa của mẫu đó. Mặc dù nó có vẻ là một số cấu trúc thư mục (mà nó có thể là trong thư viện chưa xây dựng) nó thực sự chỉ là một số tên cho một mô-đun xây dựng thư viện.Tìm kiếm văn bản này trong thư viện được xây dựng và bạn sẽ thấy nó được xác định:

System.register("angular2/core", ...

Answer 2

Các đường lượn sóng màu đỏ ít có lẽ vì tsconfig.json của bạn. Ít nhất đó là những gì gây ra vấn đề cho tôi. Vấn đề tôi gặp phải là tôi đã sử dụng cả hai tệp [] và loại trừ []. Điều này không hoạt động như mong đợi và không phải là cấu hình hợp lệ.

tôi giải quyết vấn đề này nhưng tôi vẫn có "ReferenceError chưa gặp: yêu cầu không được định nghĩa" vấn đề.

Answer 3

"Tôi giải quyết vấn đề này nhưng tôi vẫn có 'ReferenceError chưa gặp: yêu cầu không được định nghĩa' vấn đề."

systemjs có thể được cấu hình để sử dụng yêu cầu định dạng:

System.config({ 
    packages: { 
    app: { // must be replaced 
     format: 'amd' 
    } 
    } 
}); 

nhưng nếu nó là ở đầu ra trình biên dịch mã nguyên cảo của riêng bạn có thể được thiết lập trong tsconfig:

{ 
    "compilerOptions": { 
    ... 
    "module": "system" 
    ... 
    } 
} 

trong tập tin cấu hình visual studio của bạn nó có thể có nghĩa là:

<TypeScriptModuleKind>system</TypeScriptModuleKind> 

Answer 4

Tôi phải thực hiện một vài chỉnh sửa đối với quy trình 5 phút ckstart để làm cho nó hoạt động với MAMP.

Bạn phải thông báo cho SystemJS nơi tìm các mô-đun tùy chỉnh của mình, nhưng bạn không thể đặt baseURL để làm điều đó. Việc thiết lập baseURL dường như làm hỏng độ phân giải mô-đun cho các mô-đun nút (như góc cạnh). Thay vào đó, hãy thêm cấu hình này vào cấu hình systemjs của bạn:

map: { 
    app: 'path/to/app/folder' 
}, 

Nhưng đừng thay đổi câu lệnh nhập góc. Đó là không đường, họ tên mô-đun và systemjs nên giải quyết chúng chỉ tốt nếu bạn đã bao gồm angular2.dev.js trong một thẻ script đầu, như bạn có.

Bạn cũng có thể phải bao gồm:

///<reference path="../node_modules/angular2/typings/browser.d.ts"/> 

ở đầu app.ts của bạn (hoặc bất cứ nơi nào bạn gọi bootstrap)

Answer 5

Sau đây làm việc cho tôi.

System.config({  
      transpiler: 'typescript', 
      typescriptOptions: { emitDecoratorMetadata: true }, 
      packages: {  
      app: { 
       defaultExtension: 'ts' 
      } 
     } 
     }); 

Tôi cũng bao gồm các nguyên cảo int header

<script src="https://code.angularjs.org/tools/typescript.js"></script>