Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Oct 15 15:20
    alanhg commented #1997
  • Sep 30 15:12
    bbrink68 commented #2049
  • Aug 23 13:34
    SouravKumar89 edited #2058
  • Aug 23 13:27
    SouravKumar89 opened #2058
  • Aug 22 00:04

    PatrickJS on master

    Update README.md (compare)

  • Aug 13 17:17
    ramsunvtech commented #1925
  • Aug 12 22:58
    terrancecorley commented #770
  • Aug 09 02:30
    jindovu commented #2049
  • Aug 09 02:22
    jindovu opened #2057
  • Aug 08 10:49
    krawinkelm commented #2053
  • Jul 21 14:14
    FilipLitwora commented #958
  • Jul 21 14:14
    FilipLitwora commented #958
  • Jul 21 14:14
    FilipLitwora commented #958
  • Jul 09 11:40
    Sanafan commented #1713
  • Jul 05 11:41
    hoang-innomizetech commented #2053
  • Jul 05 07:32
    Jilaba commented #1824
  • Jun 29 04:31
    Jason-Cooke synchronize #2055
  • Jun 28 14:51
    jesslilly commented #1827
  • Jun 12 18:16
    dvaldivia commented #1969
  • Jun 12 17:55
    dvaldivia commented #2049
Ulhas Mandrawadkar
@ulhas
I am trying to load less file from component but I am getting error You may need an appropriate loader to handle this file type. Can anyone help me?
i have added less and less-loader in package.json
        /*
         * raw and less loader support for *.less files (from Angular components)
         * Returns compiled css content as string
         *
         */
        {
          test: /\.less$/,
          use: ['to-string-loader', 'css-loader', 'less-loader'],
          exclude: [helpers.root('src', 'styles')]
        },
have also added this
using angular2-webpack-starter
Mark Oliver
@invegat
Stylus is much more powerful, easier to work with, and has more free plugins than Less. {
test: /.styl$/,
use: ['to-string-loader', 'css-loader', 'stylus-loader']
},
Mark Oliver
@invegat
To use any new extension in addition to the loader add to this line in "resolve" extensions: ['.ts', '.js', '.json', '.styl', '.pug'],
Mark Oliver
@invegat
The Less file handling above is being suppressed for handling later with 'webpack.prod.js' or 'webpack.test.js' by the "exclude" for all files in the 'src' or 'styles' directories. Your code is from 'webpack.common.js'
This is from 'webpack.prod.js' {
test: /.scss$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader!sass-loader'
}),
include: [helpers.root('src', 'styles')]
},
Tiago Caetano
@tiagocaetano
Just start now learning angular 2 , in this case i already setup the project, but i need more tutorials webpack starter
or we can use normal tutorials from angular2
webdev48
@webdev48
How can i import external resources in .scss files

so i am trying to do

@import "https://fonts.googleapis.com/css?family=Material+Icons”;

in the src/styles/styles.scss files and it is giving me:

ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./src/styles/styles.scss
Module build failed: Unexpected formathttps://fonts.googleapis.com/css?family=Material+Icons (4:1)

  2 | /* This file is for setting global styles  */
  3 | @import url(~@angular/material/prebuilt-themes/indigo-pink.css);
> 4 | @import https://fonts.googleapis.com/css?family=Material+Icons;
Ryan
@ryansonshine
Hmm I have a similar issue; trying to import materialize-css. thought it would be the same as the way it's done for bootstrap in the README.md
@webdev48 I'll let you know what i find
Hany alsamman
@codex-corp
Hi !
webdev48
@webdev48
sure please @ryansonshine . thanks.
Carlos Esteban Lopez Jaramillo
@luchillo17
Anyone knows of docs or ways to make angular plugin-able? (probably not the correct term), think VSCode Plugins which are installed in runtime instead of making new builds of the same system, i'm wondering if the same can be done with Angular 2/4?
Ryan
@ryansonshine
anyone have experience with running webpack HMR on the front end of code in one repo against a live node server hosted locally on another?
Maisnam Raju Singh
@maisnamraju
hey guys, is there a way to ignore the compilation errors when running npm run build:prod ?
Ritwik Banerjee
@ritwbanerjee
i m facing some major memory issues with angular-webpack-node-express-redis-socket stack. my v8 heap size increases steadily over time. i already have set my max-old-space size to 2048 and gc_interval at 100
i have zoneJS and RXJS
i have open subsciptions inside components which are not closed
can this be a reason?
paraga-iprogrammer
@paraga-iprogrammer
I am new to Angular development. Have developed an application using webpack starter. The dev environment runs on 3000 port, and when I switch to production, it runs on 8080. How can I make the prod environment run on port 3000 and change the dev environment to some other port?
Ryan
@ryansonshine
@paraga-iprogrammer if you want to change the dev environment to a different port have a look at the webpack.dev.js file in the config directory. You should see the following:
const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
const HOST = process.env.HOST || 'localhost';
const PORT = process.env.PORT || 3000;
const HMR = helpers.hasProcessFlag('hot');
const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
  host: HOST,
  port: PORT,
  ENV: ENV,
  HMR: HMR
});
change the line of
const PORT = process.env.PORT || 3000;
to your desired port
paraga-iprogrammer
@paraga-iprogrammer
@ryansonshine
Thank you for your response. I was actually wanting to check if similar changes can be made for the production environment
I tried this PORT=8081 HOST="0.0.0.0" npm run server:dev:hmr command while initiating the server and managed to run the production environment on desired port
Will check these configurations recommended as well, thank you
Ryan
@ryansonshine
@paraga-iprogrammer take a look at https://webpack.js.org/guides/production-build/

more specifically, where the

--define process.env.NODE_ENV

line is found

server:dev:hmr calls server:dev which is actually webpack-dev-server --config config/webpack.dev.js
Franco Zanki
@fazanki
you can also do something like this
"server:dev": webpack-dev-server --config config/webpack.dev.js --port 3001 --inline --progress
in the package.json file
paraga-iprogrammer
@paraga-iprogrammer
Thanks guys, will try
Ryan
@ryansonshine
I'm having trouble getting global styles to be injected into the index.html

it says in the /src/styles/styles.scss:

/* this file will be extracted to main dist folder and is imported in index.html */
/* This file is for setting global styles  */
@import 'main.css';
@import 'fonts.css';

but the main.css and fonts.css are not being applied

do additonal changes need to be made in the webpack.config?
Franco Zanki
@fazanki
i think the ViewEncapsulation property in component decorator might be the reson for not getting styled
Ryan
@ryansonshine
@fazanki thanks for the lead; i'll take a look
although, I don't see any of the rules being inserted into the index.html
Franco Zanki
@fazanki
the global style can be imported into app.component with encapsulation set to none
Ryan
@ryansonshine
ahh gotcha
cool thanks! @fazanki
Franco Zanki
@fazanki
👍