angularclass / angular2-conventions-loader

Allow default for `@Component` metadata for Angular 2

---

Angular 2 Conventions Loader

Allow defaults for @Component metadata for Angular 2

npm install @angularclass/conventions-loader --save-dev loader options

// default values
selectorPrefix = '';
cssExtension   = '.css';
htmlExtension  = '.html';
'-component' is removed from selector generated by className

{
  test: /\.ts$/,
  loaders: [
    'ts-loader',
    '@angularclass/conventions-loader'
  ]
},

Given this simple Component example app.js

@Component({})
export class App {
}

Webpack will change the code app.js

@Component({
  selector: "app",
  styles: [require("./app.css")],
  template: require("./app.html")
})
export class App {
}

this is assuming you have corresponding files next to the component. You may overwrite the selector at anytime by providing one. If the selector and the component file name does not match then the corresponding css/template file with the selector will be injected.

Credits

Sean Larkin from the Webpack team TheLarkInn/angular2-template-loader

---

enjoy — AngularClass

##AngularClass

Learn AngularJS, Angular 2, and Modern Web Development from the best. Looking for corporate Angular training, want to host us, or Angular consulting? [email protected]

---

Apache-2.0

angular2-conventions-loader's Issues

Optional selector convention

In ionic applications you don't need to put selectors on page components otherwise stuff will be broken when you open that page on device.

So, there need to be a callback function, which can detect whether selector option is required or not

@pipe names

auto name pipes

Add @Component ?

I dont kow, if this is a good idea. But there is the convention to suffix the files with .component.ts. This means that we can also add the @component decorator

Feature request: Selector prefix

The convention recommends to use prefixes for selector. Would be awesome to have a setting for this.

E.g. when I use the query "selectorPrefix=my" the selector for the AppComponent class becomes "my-app"

Less and Sass support

Hi,

I really like the idea and I would like to see support for less and sass.

Sourcemap support?

Hi,

does it support with sourcemap? I guess so, because it runs before typescript compiler. Is this right?

Do not load "template: " for @Directive

Hi all, I just verified that this module wrongly includes the "template: " property in @directive classes, throwing an error on webpack compilation:

 /home/mc128k/node/etiquette-client/node_modules/ng2-select/components/select/off-click.ts:4:13
    Argument of type '{ template: string; selector: string; }' is not assignable to parameter of type 'DirectiveMetadataType'.
  Object literal may only specify known properties, and 'template' does not exist in type 'DirectiveMetadataType'.
[default] Checking finished with 1 errors

Here is the code that caused the issue:

@Directive({
  selector: '[offClick]'
})

As you can read, it's found in the ng2-select component

Seems not working with async routes

Hi, I am trying this with Webpack 2 (which supports async routes through loadChildren), and it seems that files in the async components are not "patched" by this module; html and css must be specified manually. Maybe it's a limitation and not a bug, in this case just close this request. Just wanted to inform you guys.

Prefix for @Component

Hi,

I would like to have another feature ;) ... I am too lazy to write imports for all types, therefore I just use

import * as Ng2 from '@angular/core';

Can you add something like a prefix for @component and @directive?

[Windows ]Can't resolve '.home.html'

Running angular2-seed I ran into the issue noted at https://github.com/AngularClass/angular2-seed/issues/6

I had to change the require lines generated to the following
line 147: metadata = 'template: require("./' + lastFileName + htmlExtension + '"),\n' + metadata;
line 163: metadata = 'styles: [require("./' + lastFileName + cssExtension + '")],\n' + metadata;

as before it was simply appending . to the start of all file names causing an issue, I'm not sure if this is windows specific as I have no other environments to test on