# Compile a several page (HBS & JS) when building app using GRUNT, GRUNT-BROWSERIFY

**URL:** <https://discuss.emberjs.com/t/compile-a-several-page-hbs-js-when-building-app-using-grunt-grunt-browserify/17625>\
**Category:** Build Issues\
**Created:** [March 11, 2020, 3:01pm UTC](https://discuss.emberjs.com/t/compile-a-several-page-hbs-js-when-building-app-using-grunt-grunt-browserify/17625 "2020-03-11T15:01:31Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Volodymyr\_Smal-Stots](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/volodymyr_smal-stots/32/16967_2.png) [@Volodymyr\_Smal-Stots](https://discuss.emberjs.com/u/Volodymyr_Smal-Stots)\
**Post date:** [March 11, 2020, 3:01pm UTC](https://discuss.emberjs.com/t/compile-a-several-page-hbs-js-when-building-app-using-grunt-grunt-browserify/17625/1 "2020-03-11T15:01:31Z")

</div>

There is `sign-in` route in my project and I need to compile the route like a several file/s

- app
  - routes
    - sign-in.js

  - templates
    - sign-in.hbs

I am using `babel-plugin-ember-modules-api-polyfill`, because there are imports like that `import { inject as service } from @ember/service` in the `sign-in` route. The plugin transform their , for example, to`Ember.Service`

After compilation, when I open `dist/sign-in.js` in browser I get an error

 ![image](https://us1.discourse-cdn.com/flex019/uploads/emberjs_public/original/3X/6/9/693e66e79b232aadf3546a5d43a88d429bf11350.png)

It because there are not any entities (Service, Mixin, Component, etc) in `Ember ` object

But when I run `ember s` and open application in Browser, I can get, for example `Ember.Service`

Do you know, how to import `Service`, `Controller`, `Component` and all Ember Classes like these?

Thanks.

Gruntfile config:

```nohighlight
grunt.loadNpmTasks('grunt-browserify');
     .../
      browserify: {
        loginPage: {
          options: {
            browserifyOptions: {
              debug: true,
            },
            transform: [
              "browserify-handlebars",
              ["babelify", {
              "presets": ['@babel/preset-env'],
              "plugins": ['@babel/proposal-class-properties', 'babel-plugin-ember-modules-api-polyfill']
            }]],
            extensions: ['.js', '.hbs']
          },
          files: {
            'dist/sign-in.js': ['app/routes/sign-in.js', 'app/templates/sign-in.hbs']
          }
        },

```

---

<div class="post-metadata">

**Author:** ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)\
**Post date:** [March 11, 2020, 6:12pm UTC](https://discuss.emberjs.com/t/compile-a-several-page-hbs-js-when-building-app-using-grunt-grunt-browserify/17625/2 "2020-03-11T18:12:37Z")

</div>

Hi @Volodymyr_Smal-Stots! Any reason in particular you’re hand compiling with Grunt instead of using ember-cli to build? This is highly unconventional and these modules aren’t really meant to be used in this way.