Загрузка модуля npm в приложение AngularJS с gulp inject и без тега <script>в index.html - PullRequest
Новая
       24

Загрузка модуля npm в приложение AngularJS с gulp inject и без тега <script>в index.html

0 голосов
/ 23 сентября 2019

Si Я унаследовал приложение Angular 1.5 и хочу добавить модуль NPM, ui-router-breadcrumbs Страница github здесь

Проблема, которую я имею, состоит в следующем: 

Usage

import the modules required for ui-router-breadcrumbs. It is necessary to include ngSanitize and 
ui.router for ui-router-breadcrumbs to work


  <link rel="stylesheet" href="../ui-router-breadcrumbs.min.css">

  <script src="angular/angular.min.js"></script>
  <script src="angular-sanitize/angular-sanitize.min.js"></script>
  <script src="angular-animate/angular-animate.min.js"></script>
  <script src="../ui-router-breadcrumbs.min.js"></script>

В частности, в моем index.html нет тегов, поскольку они обрабатываются (одним из многих) файлами gulp.Я попытался запустить gulp inject из командной строки, но файл <script src="../ui-router-breadcrumbs.min.js"></script> не отображается index.html при перезагрузке страницы.Я не могу выяснить, как загрузить это, так как я предполагаю, что процедура gulp должна добавить его, как это, похоже, было сделано для всех других модулей npm.

Вот мой index.html: 

<!doctype html>
<html data-ng-app="ldirPT">
  <head>
    <meta charset="utf-8">
    <title ng-bind="$state.current.title"></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css({.tmp/serve,src}) styles/vendor.css -->
    <!-- bower:css -->
    <!-- run `gulp inject` to automatically populate bower styles dependencies -->
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css({.tmp/serve,src}) styles/app.css -->
    <!-- inject:css -->
    <!-- css files will be automatically insert here -->
    <!-- endinject -->
    <!-- endbuild -->
  </head>
  <body>
    <!--[if lt IE 10]>
      <p class="browsehappy">Denne applikasjonen krever en moderne nettleser for &aring; fungere - vennligst oppgrader til siste versjon av din foretrukne nettleser</p>
    <![endif]-->

    <div ng-if="loadedTranslations" data-ui-view></div>

    <!-- build:js(src) scripts/vendor.js -->
    <!-- bower:js -->
    <!-- run `gulp inject` to automatically populate bower script dependencies -->
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
    <!-- inject:js -->
    <!-- js files will be automatically insert here -->
    <!-- endinject -->

    <!-- inject:partials -->
    <!-- angular templates will be automatically converted in js and inserted here -->
    <!-- endinject -->
    <!-- endbuild -->

  </body>
</html>

и gulp.inject, которые, по моему мнению, должны выполнять эту работу: 

'use strict';

var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');

var $ = require('gulp-load-plugins')();

var wiredep = require('wiredep').stream;
var _ = require('lodash');

gulp.task('inject', ['scripts', 'styles'], function () {
    var injectStyles = gulp.src([
        path.join(conf.paths.tmp, '/serve/app/**/*.css'),
        path.join('!' + conf.paths.tmp, '/serve/app/vendor.css')
    ], {read: false});

    var scriptList = [
        path.join(conf.paths.src, '/app/**/*.module.js'),
        path.join(conf.paths.src, '/app/**/*.js'),
        path.join('!' + conf.paths.test, '/app/**/*.spec.js'),
        path.join('!' + conf.paths.src, '/app/**/*.mock.js')
    ];

    if (conf.paths.frontend !== 'static') {
        scriptList.push('!' + conf.paths.src + '/app/mockApi/**/*');
    }
    if (conf.frontend !== 'dynamic') {
        scriptList.push('!' + conf.paths.src + '/app/mockDynamicApi/**/*');
    }

    var injectScripts = gulp.src(scriptList)
        .pipe($.angularFilesort()).on('error', conf.errorHandler('AngularFilesort'));

    var injectOptions = {
        ignorePath: [conf.paths.src, path.join(conf.paths.tmp, '/serve')],
        addRootSlash: false
    };

    return gulp.src(path.join(conf.paths.src, '/*.html'))
        .pipe($.inject(injectStyles, injectOptions))
        .pipe($.inject(injectScripts, injectOptions))
        .pipe(wiredep(_.extend({}, conf.wiredep)))
        .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
});

Как получить скрипт для загрузки?Я не могу использовать angular.module('myApp', ['uiBreadcrumbs']) в любом месте с первым доступным scrpt?

Извините за мое невежество.

...