Question

如何在使用angular2创建的angular-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}}

Answer 1

不应修改index.html文件。

您应该编辑三个文件（随着时间的推移它会变得更容易）。

angular-cli-build.js

/ 在system-config.ts
/src/

在angular-cli-build.js中，将文件路径（node_modules除外）添加到vendorNpmFiles数组中。

在system-config.ts中，使用map对象为您的文件设置别名，并使用packages定义模块的类型（global，cjs， etc），主文件和defaultExtension（如果需要）。

在您需要的文件中，只需使用import语句即可设置。

@angular/http已包含在内。要导入它，请使用import { Http } from '@angular/http';。

问题的第二部分，即当您运行ng serve并且您对.ts文件进行更改时，cli用于刷新页面的重新加载脚本。由于ng serve --prod部分，它不会出现在制作中（ng build --prod或#unless）。

为了便于举例，您可以在下方找到如何导入名为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';

在angular-cli项目中添加脚本

1 个答案: