ng2-url-2-require-brunch

Brunch plugin to change Angular 2's templateUrl: '...' and styleUrls: ['...', ..., '...'] declarations into template: require('...') and styles: [ require('...'), ..., require('...')], so that ng2 components can be compiled with the typescript-related plugins available for Brunch.

Install

npm install --save-dev ng2-url-2-require-brunch

Configuration

exports.config = {
  plugins: {
    ng2Url2Require: {
      ngFolders: [/^app/]
    }
  }
}

ngFolders

Folders containing ng components to be processed (default: [/^app/], so most ng2 developers won't actually need to include any configuration).

Usage

ng2-url-2-require-brunch is meant to be used together with typescript-brunch and inline-css-brunch. The former is (obviously) necessary for typescript compilation, the latter compiles component templates and styles as strings that can be required.

ng2-url-2-require-brunch must logically be applied before Typescript compilation. Please beware that, as long as Brunch neglects to implement a plugin order execution feature, dev dependencies must be specified in the right order within your package.json. The plugin's name has been chosen so that it naturally appears before Typescript's (npm install --save-dev will set your dev dependencies into alphabetical order).

package.json:

"devDependencies": {
"@angular/cli": "1.6.5",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"@types/phoenix": "0.0.4",
"auto-reload-brunch": "2.7.1",
"babel-brunch": "6.1.1",
"brunch": "^2.10.10",
"clean-css-brunch": "2.10",
"codelyzer": "^4.0.1",
"environment-brunch": "^1.0.0",
"inline-css-brunch": "^2.0.0",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"javascript-brunch": "^2.10.0",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"ng2-url-2-require-brunch": "^1.0.0",
"protractor": "~5.1.2",
"sass-brunch": "^2.10",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3",
"typescript-brunch": "^2.3.0",
"uglify-js-brunch": "2.10",
"css-brunch": "^2.10"
}

brunch-config.js:

plugins: {
    ng2Url2Require: {
      ngFolders: [/^app/]
    },
    inlineCss: {
      html: true,
      passthrough: [/^node_modules/, 'css/*.css']
    },
    brunchTypescript: {
      ignoreErrors: false
    }
},

[Since in this example the ng components are in the default folder, ng2Url2Require could be omitted]

As for the urls in your ng components, you can use both simple and double quotes as well as backticks, but they must be contained within a single line.