Protractor +Cucumber Error: CompositeParserException: Parser errors in angular 2

Question

I get this error **CompositeParserException: Parser errors : (2:1): expected: #EOF, #Language, #TagLine, #FeatureLine, #Comment, #Empty, got 'Given I am on the "home"'** when I run protractor conf.js. I am referring this https://github.com/protractor-cucumber-framework/protractor-cucumber-framework to configure cucumber. These are the versions used

"protractor-cucumber-framework": "^3.1.2", "@angular/core": "2.4.10",protractor:5.1.2

Here is my sample code.

// e2e/conf.js
    exports.config = {
    framework: 'custom',  // set to "custom" instead of cucumber.
    frameworkPath: require.resolve('protractor-cucumber-framework'), 
    seleniumAddress: 'http://localhost:4444/wd/hub',
    specs: ['test/e2e/cucumber/*.feature'],
    capabilities: {
    'browserName': 'firefox',    
    },
    baseUrl: 'http://localhost:8100/#/',

    // cucumber command line options
    cucumberOpts: {
     require: ['test/e2e/cucumber/*.js'],   // require step definition files before executing features
    tags: [],                      // <string[]> (expression) only execute the features or scenarios with tags matching the expression
    strict: true,                  // <boolean> fail if there are any undefined or pending steps
    format: ["pretty"],            // <string[]> (type[:path]) specify the output format, optionally supply PATH to redirect formatter output (repeatable)
    dryRun: false,                 // <boolean> invoke formatters without executing steps
    compiler: []                   // <string[]> ("extension:module") require files with the given EXTENSION after requiring MODULE (repeatable)
    },

    onPrepare: function () {
    browser.manage().window().maximize(); // maximize the browser before executing the feature files
    },

    resultJsonOutputFile: './test/e2e/results.json'
    }

    //e2e/cucumber/sample.feature
    Feature: The Demontrator Dashboard has 2 views, Detail view and Custom view
    Scenario: I  want to have 2 tabs with Displayed text "Detail View" and 
    "Custom  View" on the homepage 
    Given I am on the "home"
    And I click on the "Detail View" tab
    Then the detail view page is displayed
   And I click on the "Custom View" 
   Then the custom view page is displayed

//e2e/cucumber/home.js
'use strict';

module.exports = function worldView() {
    return {
        url: "#/",
        getFieldByName: function (name) {
            var mapping = {
                "Detail View": 'input[href="#/detailView"]',
                "Custom View": 'input[href="#/customlView"]'
            };

            return mapping[name];
        }
    };

}();
    //e2e/cucumber/detailView.js
    'use strict';
    module.exports = function home() {
    return {
    url: "#/detailView"
    };
    }();