AngularClass/angular2-webpack-starter

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

Elyor Latipov

@elyor0529

I have question

Can I impl select2 for angular2-webpack-starter statup package?

rvalimaki

@rvalimaki

@elyor0529 I don't think I understood the question. So do you want to use Select2 with your own application, that you have created with angular2-webpack-starter, or do you wan't to modify angular2-webpack-starter seed to include Select2?

Never used Select2, but I do use some jQuery with Angular2, though I am usually trying to avoid that as much as I can

So, the preferred way would be to search a proper Angular2 alternative for Select2

saurabh agrawal

@saurabh531

Hi All, Has anyone configured this starter project for angular universal? I am trying to configure it but I am not very familiar with webpack. any input would be a great help here.

rvalimaki

@rvalimaki

@elyor0529 ...annnnnnnd there you go: https://www.npmjs.com/package/angular2-select2

Elyor Latipov

@elyor0529

@rvalimaki hmm

@rvalimaki thx I trying now

rvalimaki

@rvalimaki

Not tested that though, but hopefully that works. I need similar function soon myself in my own project.

Elyor Latipov

@elyor0529

) k

rvalimaki

@rvalimaki

Oh well, seems to be an empty repository. No code...

@elyor0529 check this instead: http://valor-software.com/ng2-select/

Elyor Latipov

@elyor0529

@rvalimaki thx man

Jimit Ndiaye

@jimitndiaye

@JoshElias

Is this an appropriate way to use sass?
```
@Component({
...
// webpack.config.common
{
test: /.scss$/,
exclude: /node_modules/,
loader: 'style-loader!css-loader!sass-loader'
}

// inside component
SampleComponent ],
styles: [ require( "./sample.component.scss") ]
})
`` I'm getting an error that I'm getting the following errorExpected 'styles' to be an array of strings.`

Jimit Ndiaye

@jimitndiaye

@JoshElias Your problem is that you're using style-loader for ALL scss files. Style loader actually loads the css by adding it to your <head> tag in your html document. If you're trying to assign it to an inline style as you're doing in your component, you can't use style-loader. Instead you need something like to-string-loader or raw-loader since the styles array expects strings
eg:

      // all css required in src/app files will be merged in js files
      {
        test: /\.scss$/,
        exclude: /\app.(ios|md|wp).scss$/,//helpers.root('src/app'),
        loader: 'raw!postcss!sass'
      },

Jimit Ndiaye

@jimitndiaye

i came across some recent changes in angular2-webpack-starter (might have been angular2-seed) that demonstrated HMR which rc5 and ngrx/store but I can't seem to find it again. Does anyone have a source/example I can look at?
cc: @gdi2290

matthew harwood

@matthewharwood

if you have a component and inject a directive into the componenet, is it possible to append that directive attribute to the host element? e.g:

app.component.ts

@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  styleUrls: [
    './app.style.css'
  ],
  directives: [
    MhScroll
  ]

index.html

<body>

<app mh-scroll>
loading...
</app>
</body>

this totally mh-scroll works if I append teh directive to the inner component template but not the host itself.

Anselm

@anselmhou

Hi experts, just notice the latest updates on the project that the path: 'detail', loadChildren: () => System.import('./+detail') instead of previous using es6-promise. So we are now mixing SystemJS and webpack now ...?

Artem

@Ledzz

Hello to all! Can you help me please? I've justed forked the angular2-webpack-starter repo and trying to make stylus compilation work.
I've added stylus loader to webpack.common.js:

{
    test: /\.styl$/,
    exclude: /node_modules/,
    loader: 'raw-loader!stylus-loader'
}

and changed app.component.ts:

styles: [
    require('./app.style.styl')
],

It works. But if I use HMR (I start the server like npm run server:dev:hmr) it doesn't reload when I delete some lines in stylus file. For example:

I add the following code:

body
    background red

Result: app updates and changes the background.

I remove two lines added.
Result: I got messages in console, but app does not update.
In console I don't see lines about stylus changes.
And if I reload manually I see the changes.
Why this happens?

Shahmir Noorani

@shahmirn

hey guys. I'm trying to update my code to use webpack2, simiar to the repo, and I'm getting:

ERROR in [default] C:/dev/RO.View.Dashboard/View/Slb.Prism.RO.View.Dashboard/node_modules/@types/protractor/index.d.ts:1
844:12
Subsequent variable declarations must have the same type. Variable '$' must be of type 'JQueryStatic', but here has typ
e 'cssSelectorHelper'.

Bnaya Peretz

@Bnaya

any planes to update the project to awesome-typescript-loader@2 ?

Navin Saini

@sumedha-navin

Uncaught ReferenceError: jQuery is not defined when using angular2 with webpack. Why I am getting this error even though I added following line into vendor.ts
import "jquery";
as well as defined into webpack.common.js file like this:

new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery',
"window.jQuery": 'jquery',
"window.$": 'jquery',
"window.jquery": 'jquery'
})

Philip

@Phildev318RoR

Path errors when Distributing my angularw-webpack-starter app

Justin Murphy

@jmurphzyo

This message was deleted

Justin Murphy

@jmurphzyo

This message was deleted

Justin Murphy

@jmurphzyo

any idea why this part is not compiling correctly? <%= webpackConfig.htmlElements.headTags %>

I am just getting the plan text part. Webpack isn't injecting anything.

Femi

@fadeojo

describe is showing as not defined in vscode

for the .spec.ts files

I figure it’s because its not imported in teh file

so is there a place where describe is globally imported?

anotherjsguy

@kuldeepkeshwar

can anybody help me out with this issue angular/universal#525

sammichelson

@sammichelson

@jmurphzyo in your webpack config under plugins are you including the HtmlElementsPlugin plugin?

Elvis Begović

@elvisbegovic

Do someone know a angular2 component to show folder and file in different view like an File Explorer ?

Smithi

@smith64fx

hey guys, i just created this issue: AngularClass/angular2-webpack-starter#937

I'm interested in creating a native iOS/Android App starting from the angular2-webpack-starter

No extra functions, just a native app that behaves same like the web app.

Marian

@bitflut

Hey everyone, can someone help me with a very basic question? I want to include a 3rd party javascript file (that can be consumed via a commonJS or ES2016 import). I'm including it successfully in my vendor.ts file and can see that webpack correctly compiles it. Now, when I try to import it in my TypeScript file, it gives me an error "Cannot find module".

Marian

@bitflut

If I use commonJS syntax instead of ES6 it works. I don't understand why, though 😱 Any hint very appreciated.