Are you using angular-starter? Please comment here!

[antonybudianto]

Hi everyone ✋ I would like to know who are using angular-starter and how you use it.

Please share your experiences and usage below!

Thank you ❤️

Please don't post starter's issue in this thread

[talmog]

Using it since January 2016 and very happy with it! thank you!

[kennyhyun]

Using it from Mar 2016 in my project. in development, not went production yet.

I appreciate your efforts to improve it. Hope to catch up with your latest version ;)

[isener]

Your readme is really well, why don't you put it on as installer in yeoman? this would be nice think that.

[antonybudianto7]

@isener , thank you, I'll try investigate it, maybe I'm going to use https://github.com/addyosmani/generator-boilerplate

[currentcolor]

Using Starter since May, have switched to the latest version. Works like a charm!

Am waiting when Angular 2 reaches general release stage (to avoid breaking changes) and then, hopefully, will give it a try in production.

[isener]

@reevader Angular 2 in RC now, isn't that make sense to use in production? I guess they won't make critically changes on it.

[currentcolor]

@isener Depends on your needs. Some parts (router, i18n, angular-cli) are still a work in progress. For experienced Angular devs it may be the right time. Anyway, final release is supposed to happen soon.

[WarDrummer]

@antonybudianto Great work! Thank you very much for creating this project. I'm using it to evaluate the viability of the Angular2 stack for my next project.

Everything is working great, but I need to be fully integrated with WebStorm. Can someone provide guidance on how to debug the following in WebStorm:

• product code
• unit tests
• e2e tests

debugger; will stop execution in WebStorm and I can step from there. However, if I set a breakpoint in WebStorm, execution will not stop.

[antonybudianto]

@jrpdrummer, so far no luck using IDE breakpoint from vscode too, will try https://github.com/Microsoft/vscode-chrome-debug later

[WarDrummer]

@antonybudianto It seems the problem might be related to the sourceMap files. The source maps and JS files are referenced from the TMP dir and attempt to reference the TS files in the app dir. You can manually change the map files to point to ../src/app/.. and the break points work from the IDE. Not sure what needs to happen to make this work without editing the source maps, yet.

[antonybudianto]

@jrpdrummer , currently the sourcemap should be inlined, so it should be no problem for most cases, unless it didn't support sourcemap. Oh yes, let's discuss it here #102

[IntelliShop-G-Schuster]

Using it since yesterday as it is the only complete and working solution that is up-to-date with RC and using current router. Only problem I have for now is with component-relative assets, e.g. images in CSS url(). Any idea on how to tackle this issue?

[antonybudianto]

https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html @IntelliShop-G-Schuster

[IntelliShop-G-Schuster]

Thanks for the link, I know how to set relative paths for templateUrl / styleUrls - the problem is in the CSS files themselves, e.g. "background: url(images/bg.png)" - those need to be relative to the component (e.g. /app/mycomp/images/bg.png), but as the CSS is inlined those are relative to index.html (/images/bg.png).

[antonybudianto]

@IntelliShop-G-Schuster , looks like not possible for now, thanks for the feedback though

[foxjazz]

I am using it again. I had to revert back because rc4 update messed up a bunch of things for me. Don't forget to upgrade the router. Also having some issues with my router config currently. Will revisit later.

[antonybudianto]

I've updated the router to latest beta, nothing breaks on the starter base @foxjazz

[lpotapczuk]

Hey @antonybudianto ,

Thanks for a this great project! It's a blast to develop with this structure.

The only thing I had issues with is adding static htmls - do you have any suggestions on that?

[antonybudianto]

@lpotapczuk sorry, I don't get what adding static htmls means, do you have an example/use case?

[lpotapczuk]

@antonybudianto , yes, of course!

I have already existing project, that I build into the following structure:

index.html (not angular app root) subpage1.html subpage2.html app.html /app /assets

Now, in your project, I can get my app working, but I cant add some pure static html files. I guess I would need to adjust the tasks in gulp, is that correct?

[antonybudianto]

@lpotapczuk i see, for now you can't add static html files without wrapping it into components inside /app folder, you need to adjust some tasks in gulp . i'd suggest to move all html (except index.html) into app folder, then wrap it into components, it's better imo.

[mazhekin]

Hi, Antony! Very nice starter! But where is the node js server to deploy it? (for example to heroku)

[antonybudianto]

Hi @mazhekin , you can deploy the build folder (generated by npm run build) into any web server like Node, nginx, apache, github pages, and others, since the build result is only static files.

[emanuelet]

We're developing on it from March and about to deploy to production in a week. We've attempted to use Polymer elements with Angular 2 and right now we're encountering some issues to get useref to combine them properly. Did anyone has tried as well?

[antonybudianto]

@emanuelet , never tried it. but useref should work for most non-module JS lib/plugins

[emanuelet]

Ok, in the end I've able to get it to work, but it hasn't been easy to figure out.

So this has to go in the index.html (notice the I had to spin-off the Polymer initialization to its own file)

    <!-- build:js assets/webcomponents.js -->
    <script src="/assets/components/webcomponentsjs/webcomponents.js"></script>
    <!-- endinject -->
    <!-- build:js assets/polymer.js -->
    <script src="/assets/scripts/polymer.js"></script>
    <!-- endinject -->
    <!-- build:custom elements.html -->
    <link rel="import" href="/assets/components/polymer/polymer.html">
    <link rel="import" href="/assets/components/paper-button/paper-button.html">
    <link rel="import" href="/assets/components/paper-input/paper-input.html">
    <!-- endinject -->

And this is the change needed in the build.js

        gulp.src(config.assetsPath.components + '**/*.*', {
                base: config.assetsPath.components
            })
            .pipe(gulp.dest(config.build.assetPath + 'components'));

        gulp.src(config.index)
            .pipe(useref({
                custom: function(content, target) {
                    return content === '/assets/components' ? target : content;
                }
            }))

useref is still not able to combine the html files but now it will keep the references instead of stripping them

[antonybudianto]

i think useref is for combining css and js files only, not for html files, described in https://www.npmjs.com/package/gulp-useref

type: either js, css or remove; remove will remove the build block entirely without generating a file

[emanuelet]

It is, but the problem with Polymer is that it uses html imports. There is actually somebody that had tried to hack it out tho https://github.com/hyperbrave/gulp-useref-import

[antonybudianto]

I see, I wonder if the custom elements html files can be used as templateUrl in angular2 component

[dturska]

You rock. Awesome job. thank you.

[talmog]

Hi, I have been using this starter from the start... Last week we went live with our app which is based on your starter. It is a freeware, so feel free to play around with it. Still very much in beta, so we did a very soft launch.

https://www.family.me

Thanks, Tomer

[antonybudianto]

Congratulations for the launch @talmog ! 👍

[tsampath]

Appreciate the effort you put on this.

Could you please let me know how I can add scss support on this starter?

Thanks ThusharaM

[antonybudianto]

@tsampath, The starter already include SASS gulp task

[fintara]

I use it too, like it very much. However with RC5 there is a problem only in production build, and I am not sure whether it's Angular or build-specific problem.

https://github.com/fintara/angular2-starter/commit/a3d9cf594999e33f758d0a6da5040456f16bec6b

npm start - todos work, npm run serve-build (or npm run build) - angular complains about [todo] of TodoComponent.

Thanks for any help. :)

[antonybudianto]

@fintara , It's angular issue https://github.com/angular/angular/issues/10618, for now try re-ordering your declaration fields.

[ghost]

Definitely one of the best starters out there (and I've almost tried them all)

Keep up the good work! Olaf

[tsampath]

I too tried few months ago. But couldn't access it from outside. Pls keep in mind that cloud 9 opens 8081, 8082 and 8083 only. I tried to run on those ports too. but had no luck.

[antonybudianto]

@tsampath , I'd suggest you check on browsersync doc for that. Also ask your hosting for assistance

[tsampath]

Thanks... btw could you please tell us any reason for defining a module per component as module is for owning set of Components, Directives, Providers ad Pipes for representing a feature according to this https://angular.io/docs/ts/latest/guide/ngmodule.html?

[antonybudianto]

@tsampath , because I tried to give example of feature module, of course you don't need to define one module per component

[tsampath]

Thanks for confirming...

[DomiR]

Would be nice to have gulp scss/stylus/css-preprocessor support for angular components styleUrls.

[Sceptic]

very useful, thank you very much!

[oodgaard]

This is the best angular 2 starter I have found so far. Nice work.

*edit: it seems strange you don't make use of: moduleId: module.id, in the components.

[antonybudianto7]

@oodgaard because I didn't want to make it commonjs specific, because you can use module.id (commonjs) or require (webpack). Also ngc can handle relative path without module.id/require

[antonybudianto]

All, you can try on new Angular Webpack Starter which features AoT compilation, Lazy loading, and Tree shaking.

[lpotapczuk]

Hey guys!

I am wondering if there is any way to configure gulp to uglify the created .js file (using build task)? My main .js file weights 1.2mbs, which is quiet surprising...

[antonybudianto]

It's already uglified (yes, shockingly it's still big), you must use gzip compression to make it smaller. For now use Angular Webpack Starter for best result

[lpotapczuk]

This is what I've ended up doing. Reduced the size with gzip to 200kb's ;)

2016-09-28 15:13 GMT+02:00 Antony Budianto [email protected]:

It's already uglified (yes, shockingly it's still big), you must use gzip compression to get best result

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/antonybudianto/angular2-starter/issues/93#issuecomment-250162452, or mute the thread https://github.com/notifications/unsubscribe-auth/AJGRCkNJGR-LVkd6WxFVAvftKc9eEz8Iks5qumf-gaJpZM4IuQYK .

Pozdrawiam,

Łukasz Potapczuk

[mineofcode]

how do i use lazy loading in routing [loadChildren]?

[antonybudianto7]

@masagatech , please use https://github.com/antonybudianto/angular-webpack-starter if you want lazy loading feature

[RaydonZhu]

I am trying to use this. everything works fine. However, it won't be able to 'recompile' automatically if file changes. For example, I change the text in a html file, and it seems that the app catched the changes and recompiled. However, i didn't see any changes on the screen. I had to rebuild it again, and then i could see the changes on the screen. Why? Thanks!

[antonybudianto]

@RaydonZhu , please post them as new issue, and tell more details there, thanks

[RaydonZhu]

@antonybudianto I added 'use strict' in the config/webpack/webpack.dev.js to fix it.

Thanks!

[MarkusCodes]

Dear Antony, thanks a lot for this kit. As live reload with webpack did not work on my machine (I tried the latest ng-cli beta 21 as a well as another starter kit with webpack), your starter pack rescued me as I wanted to start trying out angular 2 without much hassle. In other words: you saved my day ;-)

[antonybudianto]

@NextLevelNoob , You're welcome 😄

[gilangaramadan]

Hi @antonybudianto it's nice to try your angular2-starter and more easily to create new project from that.. without it, I need to prepare the env for maybe 2 hours .. so keep it up and thank you!

[barolu]

Is anyone having some issues with CI? always get this error when I try to run "npm run build" ... /bundle.css : unclosed string

[arrowwu]

Nice project, however I was not able to get it to work with angular-in-memory-web-api

[Denfie]

Hello @antonybudianto, I just extend a little bit your basic structure, so that I can include scss files to the component folder.

I use for it gulp-sass-glob. So I extend the package.json "gulp-sass-glob": "^1.0.8",. Also I put this to the end of the main.scss @import '../../app/**/*';

At last I changed the gulp/task/sass.js file to this:

var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var config = require('../config')();

gulp.task('sass', function () {
    return gulp.src(config.assetsPath.styles + 'main.scss')
        .pipe(sassGlob())
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(config.assetsPath.styles));
});

gulp.task('watch-sass', function () {
    gulp.watch(config.src + '**/*.scss', ['sass']);
});

@antonybudianto : Thanks, for this nice working startet set. It was really useful. 👍

[speedfl]

A real starter! Thx men :+1:

[Emerceen]

Great starter! Thanks! It will be updated to Angular 4?

[antonybudianto7]

@Emerceen ~~I'll update it soon~~, I've updated it 👍

[antonybudianto7]

@yogsadafal

systemjs.conf.js.txt home.module.ts.txt

Since you're using alert on home component, which is part of home module, you must import the alertmodule on home module

[yogsadafal]

@antonybudianto7 got it working.. thanks for quick reply... i was doing it at app.module level.. had to import in home module.. thought if imported globally will be available to child modules.

[antonybudianto]

AFAIK, only module providers will be available to the non-lazy loaded child modules

[cmbkla]

With prod NODE_ENV set in my profile, serve-build doesn't work -- only set up to work in the dev env. I added the serve-build gulp task, but I am not sure how to get rid of browser sync. That doesn't make much sense in prod. Otherwise, I found this an excellent project seed.

[divyameher]

@antonybudianto I'm getting compile errors for config\env\env.ts when I build this project in Visual Studio. Am I missing something. 1>------ Build started: Project: angular-starter-master-vs2015, Configuration: Debug Any CPU ------ 1>C:\Users\sunkum\Desktop\angular-starter-master-vs2015\angular-starter-master-vs2015\config\env\env.ts(14,29): error TS1136: Build:Property assignment expected. 1>C:\Users\sunkum\Desktop\angular-starter-master-vs2015\angular-starter-master-vs2015\config\env\env.ts(14,30): error TS1109: Build:Expression expected. 1>C:\Users\sunkum\Desktop\angular-starter-master-vs2015\angular-starter-master-vs2015\config\env\env.ts(14,65): error TS1109: Build:Expression expected. 1>C:\Users\sunkum\Desktop\angular-starter-master-vs2015\angular-starter-master-vs2015\config\env\env.ts(14,66): error TS1109: Build:Expression expected. 1>C:\Users\sunkum\Desktop\angular-starter-master-vs2015\angular-starter-master-vs2015\config\env\env.ts(15,6): error TS1110: Build:Type expected. 1>C:\Users\sunkum\Desktop\angular-starter-master-vs2015\angular-starter-master-vs2015\config\env\env.ts(15,12): error TS1109: Build:Expression expected. 1>C:\Users\sunkum\Desktop\angular-starter-master-vs2015\angular-starter-master-vs2015\config\env\env.ts(15,13): error TS1109: Build:Expression expected. 1>C:\Users\sunkum\Desktop\angular-starter-master-vs2015\angular-starter-master-vs2015\config\env\env.ts(15,16): error TS1110: Build:Type expected. 1>C:\Users\sunkum\Desktop\angular-starter-master-vs2015\angular-starter-master-vs2015\config\env\env.ts(15,56): error TS1109: Build:Expression expected. 1>C:\Users\sunkum\Desktop\angular-starter-master-vs2015\angular-starter-master-vs2015\config\env\env.ts(15,57): error TS1109: Build:Expression expected. 1>C:\Users\sunkum\Desktop\angular-starter-master-vs2015\angular-starter-master-vs2015\config\env\env.ts(15,59): error TS1110: Build:Type expected. 1>C:\Users\sunkum\Desktop\angular-starter-master-vs2015\angular-starter-master-vs2015\config\env\env.ts(15,61): error TS1109: Build:Expression expected. 1>C:\Users\sunkum\Desktop\angular-starter-master-vs2015\angular-starter-master-vs2015\config\env\env.ts(15,65): error TS1109: Build:Expression expected. 1>C:\Users\sunkum\Desktop\angular-starter-master-vs2015\angular-starter-master-vs2015\config\env\env.ts(16,1): error TS1109: Build:Expression expected. ========== Build: 0 succeeded, 1 failed, 0 up-to-date, 0 skipped ==========

And getting Console log when I run angular starter project from Visual Studio 2015 index.html:37 Error: Unexpected token < Evaluating http://localhost:8048/src/src/tmp/app/main.js Loading app/main.js at eval (<anonymous>) at Re (system.js:4) at system.js:4 at j (system.js:4) at O (system.js:4) at k (system.js:4) at system.js:4 at ZoneDelegate.invoke (zone.js:392) at Zone.run (zone.js:142) at zone.js:873