AngularClass/angular2-webpack-starter

An Angular 2 Webpack Starter kit featuring Angular 2, Router, TypeScript, and Webpack by AngularClass

Vadim Fedorenko

@meiblorn

It could be useful, because I am getting No Directive annotation found on Alert error when write like so directives: [Alert]

Vadim Fedorenko

@meiblorn

Here's a little example:

app.component.ts

import {Alert} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
    selector: 'app',
    providers: [],
    directives: [Alert],
    pipes: [],
    styles: [require('./app.component.scss')],
    template: require('./app.component.html')
})
export class App  {

Alert component

@Component({
  selector: 'alert',
  directives: [NgIf, NgClass],
  template: ALERT_TEMPLATE
})
export class Alert implements OnInit {
.....

Browser logs:

browser_adapter.js:76 EXCEPTION: No Directive annotation found on Alert

Env: angular2-webpack-starter & ng2-bootstrap.

Vadim Fedorenko

@meiblorn

I posted question on stackoverflow: http://stackoverflow.com/questions/35971299/angular2-exception-no-directive-annotation-found-on-alert

nodecraic

@webworkio

hey, if anyone has any remote remote , designer, DevOps or Sysadmin jobs they can post them at http://webwork.io

Maciej Kowalski

@fkowal

hmm that is strange

Hsinchang

@mkjeff

ng2-bootstrap need to upgrade to ng2 beta.9. Currently, I use local source files of ng2-bootstrap, waiting for npm update. seem like typescript emit different annotation meta?

Stanislav Kiryukhin

@KorsaR-ZN

Hi, please tell me how to include the CSS file from the node_modules

Sam Jones

@ollwenjones

@meiblorn in another library, we keep bumping into the 'No Directive annotation found' error, and it's almost always an angular version conflict between the project and a dependency. See schippie's explanation https://github.com/justindujardin/ng2-material/issues/38#issuecomment-195772602

looks like someone answered the SO question correctly though.

Aleš

@fxck

anyone used lodash along webpack?

Sam Jones

@ollwenjones

yes

I have in vendor.js

import 'lodash';

in my service:

import * as _ from 'lodash';

not confident the former is necessary to make it work, but it should ensure that lodash gets bundled in vendor.js instead of main.js

also had to install typings for it

Sam Jones

@ollwenjones

in typings.json ambientDependencies

"lodash": "github:DefinitelyTyped/DefinitelyTyped/lodash/lodash.d.ts"

Aleš

@fxck

ok @ollwenjones and what if you wanted to import only one function, say lodash/merge

import ‘lodash'; does not complain, and _.merge is there

import ‘lodash/merge'; does not complain, but _.merge is not there

import merge from ‘lodash/merge'; complains that Cannot find module 'lodash/merge’, same with import { merge } or import * as merge

Sam Jones

@ollwenjones

ah, that is trickier... I'm not pro at TypeScript imports... I wonder if there are some examples in this starter for RxJS though... just a sec.

Aleš

@fxck

here it works https://github.com/reactjs/redux/blob/master/examples/real-world/reducers/index.js#L2 but they are using babel, not typescript

Sam Jones

@ollwenjones

seems like the version of lodash they are importing would have to have some exported member 'merge' at that location.

sorry once again I know just enough to be not very helpful

I would have guessed import * as merge from 'lodash/merge' would have worked... except you don't want a bare object merge you want _.merge

is lodash/merge the actual location in node_modules? ~~doesn't seem to be in my case~~

yes it is, nevermind

Sam Jones

@ollwenjones

and it even has module.exports = merge;

Aleš

@fxck

yea

it should work

Sam Jones

@ollwenjones

I wonder if it's a bug in the ts-loader?

mine Cannot find module 'lodash/merge'.

Sam Jones

@ollwenjones

@fxck maybe not ideal, but as a workaround an old fashioned webpack require call works:

var merge = <any>require('lodash/merge');

Ross Patterson

@rpatterson

How can I get npm run test to fail (exit code >0) if test coverage is too low?

Nathan Smith

@nathasm

Is there a way to fix/avoid all Duplicate identifier errors on master?

Mika I.

@mikatalk

Hey this is a nice project, seems really well put together for a beginner like me :P

any idea what this could be from? http://i.imgur.com/yOZ4c1f.png

Jamie Spittal

@Spittal

@mikatalk There’s an issue for that

AngularClass/angular2-webpack-starter#436

Mika I.

@mikatalk

oh thanks

would by chance know of an example repo to get started with webpack/typescript and ThreeJS?

Jamie Spittal

@Spittal

Sorry, I don’t.

Ross Patterson

@rpatterson

How can I get npm run test to fail (exit code >0) if test coverage is too low?

Anyone?

Nathan Smith

@nathasm

Are there examples of how to add a .js based project to starter? Something like primeng? When I add the typings file to tsconfig.json but during compile I get a bunch of warnings like:

WARNING in ./~/primeng/components/datagrid/datagrid.js
Cannot find source file 'datagrid.ts': Error: Cannot resolve 'file' or 'directory' ./datagrid.ts in /Users/nsmith/projects/cohortable/node_modules/primeng/components/datagrid

Anas R. Firdousi

@afirdousi

I created an extra folder called "data" within assets folder. It's not being copied in the final output and hence I am not able to reference anything from that folder.

Anyone knows how to solve this ?

Aleš

@fxck

so, with 4.0.0, what providers go here https://github.com/AngularClass/angular2-webpack-starter/blob/master/src/main.browser.ts only angular2’s, or 3rd party as well

it’s little confusing

and which go here https://github.com/AngularClass/angular2-webpack-starter/blob/master/src/main.browser.ts#L25

Aleš

@fxck

oups, the first link was supposed to be https://github.com/AngularClass/angular2-webpack-starter/blob/master/src/platform/browser/providers.ts

Jamie Spittal

@Spittal

I believe they are split up so you can have deps that are browser specific y’know things that inject DOM and window stuff

then there is the file that just bootstraps the stuff from the browser platform

but if you have providers for example a web worker you might want to bootstrap that with some other platform dependancies.

Where communities thrive

People

Repo info

Activity