Comments (69)
Using it since January 2016 and very happy with it! thank you!
from angular-starter.
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.
Thanks,
Tomer
from angular-starter.
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 ;)
from angular-starter.
Your readme is really well, why don't you put it on as installer in yeoman? this would be nice think that.
from angular-starter.
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.
from angular-starter.
@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.
from angular-starter.
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?
from angular-starter.
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).
from angular-starter.
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?
from angular-starter.
@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.
from angular-starter.
Hi, Antony! Very nice starter! But where is the node js server to deploy it? (for example to heroku)
from angular-starter.
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
from angular-starter.
You rock. Awesome job. thank you.
from angular-starter.
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.
npm start - todos work,
npm run serve-build (or npm run build) - angular complains about [todo] of TodoComponent.
Thanks for any help. :)
from angular-starter.
Definitely one of the best starters out there (and I've almost tried them all)
Keep up the good work!
Olaf
from angular-starter.
very useful, thank you very much!
from angular-starter.
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.
from angular-starter.
@antonybudianto I added 'use strict' in the config/webpack/webpack.dev.js to fix it.
Thanks!
from angular-starter.
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 ;-)
from angular-starter.
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!
from angular-starter.
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. 👍
from angular-starter.
A real starter! Thx men 👍
from angular-starter.
Great starter! Thanks!
It will be updated to Angular 4?
from angular-starter.
@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.
from angular-starter.
@isener , thank you, I'll try investigate it, maybe I'm going to use https://github.com/addyosmani/generator-boilerplate
from angular-starter.
@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.
from angular-starter.
@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.
from angular-starter.
@jrpdrummer, so far no luck using IDE breakpoint from vscode too, will try https://github.com/Microsoft/vscode-chrome-debug later
from angular-starter.
@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.
from angular-starter.
@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
from angular-starter.
https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html
@IntelliShop-G-Schuster
from angular-starter.
@IntelliShop-G-Schuster , looks like not possible for now, thanks for the feedback though
from angular-starter.
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.
from angular-starter.
I've updated the router to latest beta, nothing breaks on the starter base @foxjazz
from angular-starter.
@lpotapczuk sorry, I don't get what adding static htmls
means, do you have an example/use case?
from angular-starter.
@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?
from angular-starter.
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.
from angular-starter.
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?
from angular-starter.
@emanuelet , never tried it. but useref should work for most non-module JS lib/plugins
from angular-starter.
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
from angular-starter.
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
from angular-starter.
I see, I wonder if the custom elements html files can be used as templateUrl in angular2 component
from angular-starter.
Congratulations for the launch @talmog ! 👍
from angular-starter.
Appreciate the effort you put on this.
Could you please let me know how I can add scss support on this starter?
Thanks
ThusharaM
from angular-starter.
@tsampath, The starter already include SASS gulp task
from angular-starter.
@fintara , It's angular issue angular/angular#10618, for now try re-ordering your declaration fields.
from angular-starter.
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.
from angular-starter.
@tsampath , I'd suggest you check on browsersync doc for that.
Also ask your hosting for assistance
from angular-starter.
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?
from angular-starter.
@tsampath , because I tried to give example of feature module, of course you don't need to define one module per component
from angular-starter.
Thanks for confirming...
from angular-starter.
Would be nice to have gulp scss/stylus/css-preprocessor support for angular components styleUrls.
from angular-starter.
@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
from angular-starter.
All, you can try on new Angular Webpack Starter which features AoT compilation, Lazy loading, and Tree shaking.
from angular-starter.
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...
from angular-starter.
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
from angular-starter.
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
#93 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AJGRCkNJGR-LVkd6WxFVAvftKc9eEz8Iks5qumf-gaJpZM4IuQYK
.
Pozdrawiam,
Łukasz Potapczuk
from angular-starter.
how do i use lazy loading in routing [loadChildren]?
from angular-starter.
@masagatech , please use https://github.com/antonybudianto/angular-webpack-starter if you want lazy loading feature
from angular-starter.
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!
from angular-starter.
@RaydonZhu , please post them as new issue, and tell more details there, thanks
from angular-starter.
@NextLevelNoob , You're welcome 😄
from angular-starter.
Is anyone having some issues with CI? always get this error when I try to run
"npm run build"
... /bundle.css : unclosed string
from angular-starter.
Nice project, however I was not able to get it to work with angular-in-memory-web-api
from angular-starter.
@Emerceen I'll update it soon, I've updated it 👍
from angular-starter.
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
from angular-starter.
AFAIK, only module providers will be available to the non-lazy loaded child modules
from angular-starter.
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.
from angular-starter.
@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
from angular-starter.
Related Issues (20)
- problem between npm start and npm run build on style sheet HOT 2
- remove Todolist module HOT 2
- import { filter } from 'lodash'; HOT 2
- materialize (question) HOT 2
- npm run build no long deployes properly HOT 1
- npm run build is broken HOT 1
- Problem with report generation HOT 3
- No file change on the screen, despite recompile (RaydonZhu comment) HOT 7
- Serving from the root folder HOT 6
- Move the src folder contents HOT 2
- Update to typescript 2.1?
- where is tree shaking config? HOT 1
- lodash Partial - too old Typescript used HOT 1
- does it support lazy loading? HOT 1
- Lazy loading HOT 1
- Can't start freshly cloned project. HOT 4
- Debug TS files not working in Chrome HOT 2
- How do I switch this project to support universial HOT 1
- Will it work with Visual Studio . I tried but facing some unexpected token errors while loading files HOT 6
- Upgrade to Angular 5 causing remap-istanbul html report generation to fail HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-starter.