Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jun 26 20:36
    john-dent commented #88
  • Jun 26 20:35
    john-dent commented #88
  • Mar 19 22:58
    gmostert closed #244
  • Feb 08 06:53
    OliverWall commented #251
  • Dec 14 2018 08:06
    fadehelix commented #251
  • Dec 14 2018 05:03
    thematho commented #251
  • Dec 14 2018 05:01
    thematho commented #209
  • Dec 14 2018 04:59
    thematho commented #209
  • Dec 12 2018 21:57
    fadehelix synchronize #251
  • Nov 04 2018 23:35
    thematho synchronize #224
  • Oct 26 2018 16:00
    Stephanemw commented #248
  • Oct 26 2018 00:16
    thematho synchronize #224
  • Oct 16 2018 11:11
    caprica-Six commented #148
  • Oct 16 2018 11:11
    caprica-Six commented #148
  • Oct 16 2018 11:10
    caprica-Six commented #148
  • Oct 16 2018 11:08
    caprica-Six commented #148
  • Oct 16 2018 11:07
    caprica-Six commented #148
  • Oct 09 2018 00:35
    thematho commented #251
  • Sep 16 2018 13:27
    scriptrance commented #114
  • Sep 14 2018 23:22
    KiranChaudhariJM commented #114
Zeeshan Syed
@syedz
@thematho @loenko Thanks for your input. Maybe I'm misunderstanding something, but I'm referring to the dist that gets generated. I've installed browser-sync globally, but when I run browser-sync start --server dist/I still get the same issue.
Fyodor
@loenko
@syedz as @thematho said, you should use default scripts from gulpfile, because they contain historyAPIfallback as a middleware for html5mode support. Without gulp it is not easy to implement such workaround for full-featured livereloading. I like this seed for such beautiful and convenient solutions.
Zeeshan Syed
@syedz
@loenko Agreed, but then how would one run the contents of a dist folder in a production environment?
I am currently using the scripts from the gulpfile to run in my development environment
Fyodor
@loenko
@syedz there are middleware for html5mode serving for different servers and platforms, search for it with specific request
Zeeshan Syed
@syedz
@loenko Thanks
Fyodor
@loenko
My ng6-starter app doesn't work in IE11 (and I'm required to support it). Had anybody met and fixed such issue? Clear console and only tab title and favicon are displayed.
Gadzhimari Kachaev
@gadzhimari
Hi
Is anybody here?
I'm stuck and don't know how to solve this issue. The starter great but nothing says about how to include fonts using font-face. I install file-loader in dependencies. Add this entry in webpack.config.js. But get error everytime
2017-10-29_23-01-23.png
2017-10-29_23-02-06.png
Gadzhimari Kachaev
@gadzhimari
I add relative path and get error shows in above screenshot
Matias Fernandez Martinez
@thematho
Hi @gadzhimari if you have your fonts locally on your project adding the @importon your CSS should be enought, example using Angular Material Icons:
On my CSS file:
@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(MaterialIcons-Regular.eot); /* For IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), url(MaterialIcons-Regular.woff2) format('woff2'), url(MaterialIcons-Regular.woff) format('woff'), url(MaterialIcons-Regular.ttf) format('truetype'); }
(Those files are on the CSS file folder, I mean the path should be relative to the CSS import statement on the CSS)
My webpack config:
loaders: [ { test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate!babel' }, { test: /\.html$/, loader: 'raw' }, { test: /\.(scss|sass)$/, loader: 'style!css!sass' }, { test: /\.css$/, loader: 'style!css' }, { test: /\.(eot|woff|woff2|gif|jpg|svg|png|ttf)([\?]?.*)$/, loader: "file-loader" } ]
Gadzhimari Kachaev
@gadzhimari
@thematho thank you for reply but still not helpful. Let me explain in detail. I have a folder called fonts and put it near with base style folder, which have file called _typography.scss
2017-10-30_09-02-40.png
In this file I import fonts from fonts folder
I tried to use couple of ways but none of this works
src: url('MaterialIcons-Regular.woff2) format(woff2),
        url('MaterialIcons-Regular.woff) format(woff)

src: url('./MaterialIcons-Regular.woff2) format(woff2),
        url('./MaterialIcons-Regular.woff) format(woff)

src: url('../MaterialIcons-Regular.woff2) format(woff2),
        url('../MaterialIcons-Regular.woff) format(woff)
Gadzhimari Kachaev
@gadzhimari
Here my project structure, where you can see that fonts folder on same level as style folder, there I import fonts
2017-10-30_09-05-11.png
Matias Fernandez Martinez
@thematho
@gadzhimari the relative path to the font should be relative to the font face statement. Change the path to:
'./fonts/Material-XXXXX.woff'
You are declaring the font face on the _base.scss file
Gadzhimari Kachaev
@gadzhimari
@thematho I solved this problem when I moved the fonts folder on same level as app.scss file, where I import all my partials scss. I don't why it so strange behaviour. If I declare on the _typography.scss my font-face rules, why should I write different path which not relative to the _typography.scss file.
Matias Fernandez Martinez
@thematho
Hi @gadzhimari I think I found the difference.
I have a vendors.jsfile in which I'm importing: ./some-vendor/some.scssusing JS
Inside that file, the SCSS is doing the font-face and is using the relative path to some.scss. The thing that is happening on your case is that the SASS compilation is being compiled to your app.scss path, that's why you need the relative path from app.scss in order to webpack found the files for load them.
@gadzhimari Makes sense?
Gadzhimari Kachaev
@gadzhimari
yeah
Pablo Emilio Sanchez Lopez
@pasalo92
Hi, I'm trying to get the boilerplate running after forking/cloning but I'm running into this issue
image.png
Pablo Emilio Sanchez Lopez
@pasalo92
hehe needed to do an npm cache clean before doing npm install
:D
Oscar Pabon
@oscarandrespabonestrella
hello, i have a doubt, how can i use images in my project?, i already try with this "test: /.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/, loader: "file", in the webpack config, but is not working, thanks in advance
Belinskiy21
@Belinskiy21
Hello, is anyone deployed ng6 to Heroku? I stacked there, help please!
Matias Fernandez Martinez
@thematho
@Belinskiy21 what have you configured on your web.js file or your procfile?
Matias Fernandez Martinez
@thematho
@Belinskiy21 You should use npm scripts to build the project (by default ng6-starter uses this) check on https://devcenter.heroku.com/articles/node-best-practices#hook-things-up
Fyodor
@loenko
@oscarandrespabonestrella looks like my answer's too late but...))) I guess you can try test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/, loader: "file-loader?name='[path][name].[ext]?[hash]'
Belinskiy21
@Belinskiy21
@thematho my Procfile contains : web: node --optimize_for_size --max_old_space_size=920 --gc_interval=100 server.js
package.json : "scripts": {
"postinstall": "gulp install && gulp webpack build",
"build": "gulp webpack",
"component": "gulp component",
"serve": "gulp serve",
"start": "gulp serve",
"test": "karma start",
"watch": "gulp serve",
"webpack": "gulp webpack"
techyboy
@techyboy
Hi Community, any one can help me regarding running dist on production
I am getting errors missing some libraries with dist/build
techyboy
@techyboy
so any one pls point me to right direction or any how to for setting up production environment for ng6 starter
Matias Fernandez Martinez
@thematho

Hi @techyboy, if you have problems adding libraries, you should do the following.
1 - Add the library to the package.json e.g.: "dependencies": { "angular-material": "^1.1.5" },
2 - in your app file add the import statement on your app.js file, e.g.: import ngMaterial from 'angular-material';
3 - If is an AngularJS Dependency, add the dependency on your main module e.g: angular.module('myApp, [ngMaterial]);

Note: Other libraries like jQuery might need to configuration on webpack.configfile using the ProvidePlugin.
If the library is not declared as a module, you will have to import the JS and CSS files manually:
e.g.:

import AngularMDDataTable from 'angular-material-data-table';
import 'angular-material-data-table/dist/md-data-table.css';
techyboy
@techyboy
yes thank you, mostly 404 errors were related to JS/CSS
btw what is best practices to run ng6 starter app on production server with pm2 daemonised approach with nginx reverse proxy? or any thing else?
Zeeshan Syed
@syedz
@thematho What's the syntax to check if running in a production environment. Wanted to configure my URLs correctly.
Matias Fernandez Martinez
@thematho
@syedz Do you mean to make sure that you deployed the correct build on the server, using the browser to check that?
Zeeshan Syed
@syedz
@thematho basically I want to check if the app is running on the production or staging environment. This will allow me to set my constant variables correctly ( base URLs being one of them). Sorry I should be more clear.
Matias Fernandez Martinez
@thematho

@syedz for what I know, there is no type of flag on the web app to distinguish between prod or staging, but you can create a script which is only added for production configuration with webpack and adds variables on the client that you need:
on webpack.config.js add app: [] as an entry:

module.exports = {
   devtool: 'source-map',
   entry: { app: [] },
   module: { /* ... */}
}

on gulpfile.bable.js replace:

gulp.task('webpack', ['clean'], (cb) => {
 const config = require('./webpack.dist.config');
 config.entry.app = paths.entry;

For:

gulp.task('webpack', ['clean'], (cb) => {
  const config = require('./webpack.dist.config');
  config.entry.app = paths.entry.concat(config.entry.app);

and Finally replace:

gulp.task('serve', () => {
  const config = require('./webpack.dev.config');
 config.entry.app = [
    'webpack-hot-middleware/client?reload=true',
  ].concat(paths.entry);

For:

gulp.task('browser-sync', () => {
  const config = require('./webpack.dev.config');
  config.entry.app = config.entry.app.concat([
      'webpack-hot-middleware/client?reload=true',
   ], paths.entry);

Now you can add the files on webpack.dist.config.js, overriding the entry.app to add this new file:

/* ... * / 
var config  = require('./webpack.config');
config.entry = {
  app: [
    path.join(__dirname, 'client/app/production.config.js')
  ]
};
config.output = {  /*... */ };
Zeeshan Syed
@syedz
@thematho Awesome thanks! Will give this a try :)
Elena Trudini
@elenat82
Hi everyone, has someone been able to generate documentation for their project? I found this https://github.com/nikhilmodak/gulp-ngdocs and followed the tutorial but nothing happened and I don't get any error.
Or maybe you can tell me about another npm mdule to use?