添加脚本角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}}

是的，我敢肯定，它的角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';

将如何我改变了包含的“polyfills”？即在这个'{{#each scripts.polyfills}}'这个tenplate中使用的脚本变量定义在哪里？ – jbandi

添加脚本角CLI项目

相关推荐