Question

我遇到了Browserify Angular配置文件的问题，其中有require()个HTML模板。我试图制作stringify或browserify-ng-html2js 在transform()中，但在这种情况下，我在gulp文件中有多个转换调用，如果没有错误，我就无法完成。链接给予者错误也。

APP.js：

import angular from 'angular';
import appModule from './config/config'

angular.bootstrap( document, [ appModule.name ] );

Config.js：

import angular from 'angular';
import uiRouter from 'angular-ui-router';

const app = angular.module( 'app', [ uiRouter ] );

app.config(( $stateProvider, $urlRouterProvider, $locationProvider ) => {
  $urlRouterProvider.other( '/' );

  $stateProvider
    .state( 'todos', {
      url: '/',
      template: require( '../views/todos.html' )
    } )
    .state( 'about', {
      url: '/about',
      template: require( '../views/about.html' )
    } );

  $locationProvider.html5Mode( true );
});

export default app;

和Gulp Browserify任务：

/** Browserify TASK **/
gulp.task( 'browserify', function () {

  let bundler = browserify({
    entries: [ config.sourceDir + 'app.js' ],
    debug: true
  });

util.log( '-> Compile JS...' );

  //Grab files
  return bundler
  .transform( 'babelify', { presets: [ "es2015", "react" ] } )
  .bundle()
  .on('error', function (err) {
      console.error(err);
      this.emit('end');
    })
  .pipe( source( 'bundle.js' ) )
  .pipe( buffer() )
  .pipe( sourcemaps.init({ loadMaps: true }) )
    .pipe(uglify())
  .pipe( sourcemaps.write( './' ) )
  //Dest
  .pipe( gulp.dest( config.buildDir ) )
} );

现在，当我尝试使用Browserify APP时出现错误：

 Error: Cannot find module 'todos/todos.html'

任何提示和帮助将不胜感激:)谢谢和问候！

PS。我尝试过：

  .transform( stringify, {
    appliesTo: { includeExtensions: [ 'html', 'htm', 'jsp' ] },
    minify: true
  } )

但问题仍然存在。

Answer 1

好的我解决了这个问题：有两种方法可以解决这个问题：

首先是通过browserify要求（）HTML文件，不要像JS一样使用它们，我们需要安装一个变换 - ＆gt; npm i -D html2js-browserify并将其附加到gulpfile：

.transform( 'html2js-browserify' )

第二个选项是将所有视图复制到public / static目录中我们在express中设置以提供所有静态文件，并使用templateUrl: <path-to-template-inside-public-dir>我希望它能帮助任何人。此致！

将html模板解析为客户端JS。 Angular + Browserify + Babel + ES2015 + Gulp

1 个答案: