CODEWITHSUNDEEP
angular
Shafayat Alam
Shafayat Alam

Reputation: 730

Add script in angular-cli project

How do I add a script file in the index file in an angular2 project created with 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>

For example , how do I add angular2's http script?

It would also be very much appreciated if someone explains how this block of code works:

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

Upvotes: 0

Views: 3324

Answers (1)

delasteve
delasteve

Reputation: 2727

The index.html file should not be modified.

There are three files you should be editing (it should get easier as time goes on).

  1. angular-cli-build.js in /
  2. system-config.ts in /src/
  3. The component file it's needed in

In the angular-cli-build.js, add the file path (excluding node_modules) to the vendorNpmFiles array.

In system-config.ts, use the map object to alias your file, and packages to define the type of module it is (global, cjs, etc), the main file, and defaultExtension (if needed).

In the file you need it in, simply use the import statement and you should be set.

The @angular/http is already included for you. To import it, use import { Http } from '@angular/http';.

The second part of your question, that is the reload script the cli uses to refresh your page when you are running ng serve and you make a change your .ts files. It won't be there in production (ng serve --prod or ng build --prod) due to the #unless part.

For the sake of examples, below you can find how to import a LocalStorage library called h5webstorage.

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'
  }
};

The file you want to use it in.

import { LocalStorage, WEB_STORAGE_PROVIDERS } from 'h5webstorage';

Upvotes: 3

Related Questions