AngularClass/NG6-starter

Starter for Angular + ES6 + Webpack

Sergey Protko

@fesor

@T-G-G AngularClass/NG6-starter#143

T-G-G

@T-G-G

@fesor You sir are a legend!!

Arturo Romero

@arturoromeroslc

Hello Friends!

I am looking for some help. I am trying to import rx-angular into my application by add the following in home.js:

import angular from 'angular';
import homeComponent from './home.component';
import rx from 'rx-angular';

let homeModule = angular.module('home', [
    'firebase',
    rx
])

.component('home', homeComponent)

.name;

export default homeModule;

I am however getting this error from webpack, do ya'll any idea of what I am doing worng. Thanks for the help.

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.components due to:
Error: [$injector:modulerr] Failed to instantiate module home due to:
Error: [$injector:modulerr] Failed to instantiate module {"internals":{},"config":{"longStackSupport":false,"useNativeEvents":false},"helpers":{},"doneEnumerator":{"done":true},"ReactiveTest":{"created":100,"subscribed":200,"disposed":1000}} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object

proJS

@dssorokin

Hi guys. My problem is that ui-router events $stateChangeStart and $stateChangeSuccess doesn't work in this template. I put this code

$rootScope.$on('$stateChangeStart', function(){
console.log('start');
})
$rootScope.$on('$stateChangeSuccess', function(){
console.log('success');
})
at run function in app.js file. When i change the state nothing happend.

Sergey Protko

@fesor

@dssorokin please read documentation for uiRouter 1.0beta

@dssorokin i didn't tried uiRouter 1.0 yet so can't help you with that. I only know that this is not starter's problem. You could also downgrade to latest stable uiRouter release.

proJS

@dssorokin

@fesor thank you. It turned out that ui-routes events has been deprecated in new version.

Ramy Tamer

@ramytamer

Hi guys, could you please tell me how to import jquery-ui in my project along with all the required css and images from the library?

Kévin

@kevincaradant

Hi @arturoromeroslc

Hello Friends!

I am looking for some help. I am trying to import rx-angular into my application by add the following in home.js:

import angular from 'angular';
import homeComponent from './home.component';
import rx from 'rx-angular';

let homeModule = angular.module('home', [
    'firebase',
    rx
])

.component('home', homeComponent)

.name;

export default homeModule;

I am however getting this error from webpack, do ya'll any idea of what I am doing worng. Thanks for the help.

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.components due to:
Error: [$injector:modulerr] Failed to instantiate module home due to:
Error: [$injector:modulerr] Failed to instantiate module {"internals":{},"config":{"longStackSupport":false,"useNativeEvents":false},"helpers":{},"doneEnumerator":{"done":true},"ReactiveTest":{"created":100,"subscribed":200,"disposed":1000}} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object

Did you find the solution ? i get exactly the same problem :/ . Thank you

Ramy Tamer

@ramytamer

@kevincaradant try to include rx in home module as a string 'rx'

let homeModule = angular.module('home', [
    'firebase',
    'rx'
])

Kévin

@kevincaradant

yes thank you @ramytamer :)

Ramy Tamer

@ramytamer

Can anyone please tell me what is happening here ?
issue: http://ramytamer.com/angular-ng6-starter.mp4
solution: http://ramytamer.com/angular-ng6-starter-resolve.mp4

Josoroma

@josoroma

Hi Hackers!

I am trying to know where is the right place to properly import and pass as a dependency the angular material package, I just found this:

AngularClass/NG6-starter@ced8cff

so app.js is the right place to import this module?

Josoroma

@josoroma

Hi again! I have a roadblock trying to separate the config file into a separate file:

angular.module('assessments', [
  uiRouter,
  Common,
  Components
])
.config(($locationProvider) => {
  "ngInject";
  // @see: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions
  // #how-to-configure-your-server-to-work-with-html5mode
  $locationProvider.html5Mode(true).hashPrefix('!');
})

Josoroma

@josoroma

I got it:

import angular from 'angular';
import uiRouter from 'angular-ui-router';

import HomeComponent from './home.component';
import HomeConfig from './home.config';

let homeModule = angular.module('home', [
  uiRouter
])

.config(HomeConfig)

.component('home', HomeComponent)

.name;

export default homeModule;

let homeConfig = function($urlRouterProvider, $stateProvider) {
  "ngInject";

  $urlRouterProvider.otherwise('/');

  $stateProvider
    .state('home', {
      url: '/',
      component: 'home'
    });
};

export default homeConfig;

Victor Nascimento

@vjoao

Hello guys

I'm trying to implement a route resolve

but I cant access the resolved variable on controllers constructor

im trying this:

.config(($stateProvider) => {
  "ngInject";
  $stateProvider
    .state('welcome', {
      url: '/',
      component: 'welcome',
      resolve: {
        'currentAuth': function (Auth) {
          "ngInject";
          return Auth.$waitForSignIn();
        }
      }
    });
})

and trying to access it like this:

class WelcomeController {
  constructor(currentAuth) {
    "ngInject";

    console.log(currentAuth);
    this.name = 'welcome';
  }
}

Sergey Protko

@fesor

@vjoao it this component controller or "global" controller?

Victor Nascimento

@vjoao

component controller

Sergey Protko

@fesor

then you should pass resolved value to component binding.

Victor Nascimento

@vjoao

and the config belogns to the welcome component js file

Sergey Protko

@fesor

.component('myComponent', {
    bindings: { currentAuth: '<' }
});

something like that. I didn't use uiRouter for a while

Victor Nascimento

@vjoao

thanks, it worked =)

This changed a bit the way I was used to do

Sergey Protko

@fesor

well... this is just a separation of concerns. Components responsible only for UI, not for state. You get state from within resolvers and pass it via bindings to components.

state changed - resolver updates value.

ideally

Victor Nascimento

@vjoao

really cool =)

Josoroma

@josoroma

Hi!

what is the best way to add a show page or component to display the id of a record?

Do I need to create another component inside my current component and add a route to the subcomponent for show, edit, ect?

anthony olivence

@tucaza_twitter

Anyone run into an issue with karma not finding npm or bower imports outside of app.js, such as in a component.js?

Bnaya Peretz

@Bnaya

I see that each component have its own module

Is it considered as best practise?

Demetri Ganoff

@dganoff

Has anyone tried placing .spec.js files outside the client/app folder? I'm trying to convert an existing project to use a similar webpack/testing setup as NG6-starter, but having issues getting the tests to run

I have my source files in src/app and my test files in test/unit.

I'm wondering if I need to add something to my spec.bundle.js file or the karma config so that it loads the correct source and test files

I keep getting this terminal error:

forEach@webpack:///~/angular/angular.js:321:0 <- spec.bundle.js:390:25
loadModules@webpack:///~/angular/angular.js:4601:0 <- spec.bundle.js:4670:13
createInjector@webpack:///~/angular/angular.js:4523:0 <- spec.bundle.js:4592:31
workFn@webpack:///~/angular-mocks/angular-mocks.js:3074:0 <- spec.bundle.js:34916:61
inject@webpack:///~/angular-mocks/angular-mocks.js:3054:0 <- spec.bundle.js:34896:47
webpack:///src/app/app.config.spec.js:9:0 <- spec.bundle.js:35004:12
loaded@http://localhost:9876/context.js:151:17
webpack:///~/angular/angular.js:4641:0 <- spec.bundle.js:4710:54

That was actually after I moved the spec file into src/app just to see if it would work

Aneesh Devasthale

@aneeshd16

Hi all, this is a seriously good boilerplate. I need a node server which will serve my HTML/JS/CSS. It's pretty basic to do if I do a gulp webpack and then simply serve the dist directory. Can i have this in dev mode also? Basically I am trying to render the initial state on the server (using ejs/jade) and set it as a global variable in a script tag. The angular app will then load this initial state.

npagong

@npagong

Hello Guys, I'm kinda new with ES6 and I want to know if you have some snippets or codes I can follow to implement API on NG6-starter?

Jayr Motta

@jayrmotta

have anyone enabled e2e tests on this starter? i'm trying to do it but i'm getting this:

15 12 2016 10:25:29.091:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket 491w3G-X2bh-KHZgAAAA with i
d 92737466
PhantomJS 2.1.1 (Mac OS X 0.0.0) LOG: 'WARNING: Tried to load angular more than once.'
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  TypeError: undefined is not a constructor (evaluating 'window.angular.$$csp()')
  at <myfolder>/spec.bundle.js:33019

David Wayne Griffith

@davidwaynegriffith

@jayrmotta I was going to set unit and e2e tests this weekend on a small project that used the NG6 starter. I will let you know if I get an optimal setup for e2e. For now, I found this repo: https://github.com/zombiQWERTY/angular-webpack-starter You might want to clone it and see if the e2e tests work. If they do you will have a working setup to compare against. Cheers

David Wayne Griffith

@davidwaynegriffith

I forgot, I am using my testing setup from https://github.com/AngularClass/NG6-todomvc-starter That might be the repo you want to clone and test for comparison.

David Wayne Griffith

@davidwaynegriffith

@jayrmotta https://github.com/AngularClass/NG6-todomvc-starter I just cloned it, ran npm install, then followed the e2e setup and run instructions on the README and all the tests ran just fine. So you should look that as a source reference.

Where communities thrive

People

Repo info

Activity