2016-06-10 1 views
0

Как добавить файл сценария в индексном файле в angular2 проекта, созданного с angular-cli:Добавить скрипт в угловых 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> 

Например, как добавить скрипт HTTP angular2 в?

Было бы также очень признателен, если кто-то объясняет, как этот блок кода работает:

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

да, я уверен, что это угловой кли –

ответ

3

Файл index.html не должен быть изменен.

Существует три файла, которые вы должны редактировать (со временем это должно стать проще).

  1. angular-cli-build.js в /
  2. system-config.ts в /src/
  3. компонент файла это необходимо в

В 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. Его не будет на производстве (ng serve --prod или ng build --prod) из-за части #unless.

Для примера, ниже вы можете найти, как импортировать библиотеку LocalStorage под названием 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' 
    } 
}; 

Файл, который вы хотите использовать его в

import { LocalStorage, WEB_STORAGE_PROVIDERS } from 'h5webstorage'; 
+1

Как бы Я меняю «полиполки», которые включены? т. е. где определена переменная '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' ', которая используется в десятичной форме, подобной этой' – jbandi

Смежные вопросы