添加腳本角CLI項目

如何添加索引文件的腳本文件與angular-cli創建的angular2項目：添加腳本角CLI項目

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>CourseTests</title> 
    <base href="/"> 

    {{#unless environment.production}} 
    <script src="/ember-cli-live-reload.js" type="text/javascript"></script> 
    {{/unless}} 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 
</head> 
<body> 
<course-tests-app>Loading...</course-tests-app> 


{{#each scripts.polyfills}} 
<script src="{{.}}"></script> 
{{/each}} 
<script> 
    System.import('system-config.js').then(function() { 
     System.import('main'); 
    }).catch(console.error.bind(console)); 
</script> 


</body> 
</html>

例如，如何添加angular2的HTTP腳本？

它也會如果有人解釋這段代碼是如何工作是非常讚賞：

{{#unless environment.production}} 
    <script src="/ember-cli-live-reload.js" type="text/javascript"></script> 
    {{/unless}}

來源

2016-06-10 Shafayat Alam

是的，我敢肯定，它的角CLI –

的index.html文件不應該進行修改。

有三個文件你應該編輯（隨着時間的推移應該會變得更容易）。

angular-cli-build.js在/
system-config.ts在/src/
它的需要在

在angular-cli-build.js組件文件，（不包括node_modules）的文件路徑添加到vendorNpmFiles陣列。

在system-config.ts，使用map對象別名的文件，並packages定義模塊的它是類型（global，cjs等），主文件，和defaultExtension（如果需要）。

在您需要它的文件中，只需使用import語句即可設置。

@angular/http已包含給你。要導入它，請使用import { Http } from '@angular/http';。

您的問題的第二部分，即cli在您運行時用於刷新頁面的重新加載腳本ng serve，並且您將更改爲.ts文件。由於#unless部分，它不會出現在生產中（ng serve --prod或ng build --prod）。

爲了舉例，下面您可以找到如何導入名爲h5webstorage的LocalStorage庫。

angular-cli-build.js：

vendorNpmFiles: [ 
    'systemjs/dist/system-polyfills.js', 
    'systemjs/dist/system.src.js', 
    'zone.js/dist/**/*.+(js|js.map)', 
    'es6-shim/es6-shim.js', 
    'reflect-metadata/**/*.+(js|js.map)', 
    'rxjs/**/*.+(js|js.map)', 
    '@angular/**/*.+(js|js.map)', 

    'h5webstorage/**/*.+(js|ts|js.map)' 
]

/src/system-config.ts：

/** Map relative paths to URLs. */ 
const map: any = { 
    'h5webstorage': 'vendor/h5webstorage' 
}; 

/** User packages configuration. */ 
const packages: any = { 
    'h5webstorage': { 
    main: 'index.js', 
    format: 'cjs', 
    defaultExtension: 'js' 
    } 
};

你想使用它的文件

import { LocalStorage, WEB_STORAGE_PROVIDERS } from 'h5webstorage';

來源

2016-06-10 17:44:19 delasteve

將如何我改變了包含的「polyfills」？即在這個'{{#each scripts.polyfills}}'這個tenplate中使用的腳本變量定義在哪裏？ – jbandi

添加腳本角CLI項目

回答

相關問題