AngularClass/angular2-webpack-starter

An Angular 2 Webpack Starter kit featuring Angular 2, Router, TypeScript, and Webpack by AngularClass

Artur Käpp

@ArturKp

Hey, two things.

I've been learning the starter pack in order to build my own and fully understand it. But a thing I haven't been able to figure out since yesterday is what loader or package(s) is(are) responsible for processing the <% or <%= or {% etc tags in html template?

Second thing that maybe I should have made an issue is that the chat link in README.md and also when starting to submit issue is not working (http://angularclass.com/member-join/)

Artur Käpp

@ArturKp

Think I got the answer, it's HtmlWebpackPlugin, now I just have to figure out why its not working for me

ashkank83

@ashkank83

@ashkank83
hi all, I'm getting the following error when trying 'npm start for my angular 2 application
'module.js:457
throw err;
^

Error: Cannot find module './webpack.common.js'
at Function.Module._resolveFilename (module.js:455:15)
at Function.Module._load (module.js:403:25)
at Module.require (module.js:483:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Users/Ashkan/Desktop/LogiPro/Training/rc6WebPack/config/webpack.dev.js:3:20)
at Module._compile (module.js:556:32)
at Object.Module._extensions..js (module.js:565:10)
at Module.load (module.js:473:32)
at tryModuleLoad (module.js:432:12)
at Function.Module._load (module.js:424:3)'
any ideas what can the issue be?
I have simply followed the instruction from here https://angular.io/docs/ts/latest/guide/webpack.html

andrizmitnick

@andrizmitnick

wanna ask, i'm new to angular, currently i'm using angular 2 rc6, and i want to install OfflinePlugin for webpack. where should i put this "require('offline-plugin/runtime').install();" line? should i put inside ngModule or every components i had?
i was using polymer before, because it's easy to setup a service worker. and now i want to try angular 2 if it's fully support service worker or not. thanks before

andrizmitnick

@andrizmitnick

btw inside ../src/assets there's service-worker.js, is this service worker already registered?

lghinet

@lghinet

hello is there a guide .. with angular 2 / webpack with multiple chunks ?

like each compoment with their on bundle.js

JeanPaul Attard

@jeanpaulattard

Hi Guys :) I've been following the angular webpack starter guide, to upgrade my application to start bundling with webpack. That said, I'm running into problems when running the application. I'm always getting the following error attempting to load the app in the browser via the devserver.

core.umd.js?e2a5:6001 Error: Uncaught (in promise): ReferenceError: System is not defined
    at resolvePromise (eval at <anonymous> (http://localhost:4000/polyfills.js:2475:2), <anonymous>:558:32)
    at eval (eval at <anonymous> (http://localhost:4000/polyfills.js:2475:2), <anonymous>:535:14)
    at ZoneDelegate.invoke (eval at <anonymous> (http://localhost:4000/polyfills.js:2475:2), <anonymous>:332:29)
    at Object.onInvoke (eval at <anonymous> (http://localhost:4000/vendor.js:2129:2), <anonymous>:8772:45)
    at ZoneDelegate.invoke (eval at <anonymous> (http://localhost:4000/polyfills.js:2475:2), <anonymous>:331:35)
    at Zone.run (eval at <anonymous> (http://localhost:4000/polyfills.js:2475:2), <anonymous>:225:44)
    at eval (eval at <anonymous> (http://localhost:4000/polyfills.js:2475:2), <anonymous>:591:58)
    at ZoneDelegate.invokeTask (eval at <anonymous> (http://localhost:4000/polyfills.js:2475:2), <anonymous>:365:38)
    at Object.onInvokeTask (eval at <anonymous> (http://localhost:4000/vendor.js:2129:2), <anonymous>:8763:45)
    at ZoneDelegate.invokeTask (eval at <anonymous> (http://localhost:4000/polyfills.js:2475:2), <anonymous>:364:43)
    at Zone.runTask (eval at <anonymous> (http://localhost:4000/polyfills.js:2475:2), <anonymous>:265:48)
    at drainMicroTaskQueue (eval at <anonymous> (http://localhost:4000/polyfills.js:2475:2), <anonymous>:497:36)

Anybody know what is the cause of the problem please? Because I've been looking around, and haven't come to a solution.

99% Cocoa

@rjlee7

^ same error

Oscar Lagatta

@oscarlagatta

Why would a A2 deployed app won't load when refreshing the page ?

thanks

when running locally works when running on the server on IIS won't display the page pointing to a specific component

Oscar Lagatta

@oscarlagatta

Hi what are the considerations to deploying on IIS , do I need to configure IIS to rewrite the URLs in HTML5 mode ?

JeanPaul Attard

@jeanpaulattard

@rjlee7 I've managed to identify the issue to lazy loading of routes. Since the Angular Router has built in support for SystemJS, following the specified ways in the guide meant that the routes were attempting to be lazy loaded using SystemJs.

In fact, there's a note in the routing guide, that webpack users must identify an alternative solution, using the webpack way of module loading.

I've taken the following approach, and it is now working :) https://github.com/jeanpaulattard/tourofheroes/blob/feature/Upgrading_to_Web_Pack/src/app/app.routing.ts

That solution is for Webpack1. Webpack2 has a much neater way using System.import https://gist.github.com/sokra/27b24881210b56bbaff7#code-splitting-with-es6

Sekib Omazic

@SekibOmazic

Hi there,
I keep getting following error when running npm run:build:

94% asset optimizationError in bail mode: [default] /Users/sekibomazic/Documents/projects/angular2/angular2-webpack-starter/node_modules/@types/hammerjs/index.d.ts:9:4 
Duplicate identifier 'export='.

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/Cellar/node/6.5.0/bin/node" "/usr/local/bin/npm" "run" "build:prod"
npm ERR! node v6.5.0
npm ERR! npm  v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! angular2-webpack-starter@5.0.5 build:prod: `webpack --config config/webpack.prod.js  --progress --profile --bail`
npm ERR! Exit status 1

Can someone help?

99% Cocoa

@rjlee7

@jeanpaulattard ah i was using webpack2 and still getting the same error (something wrong with webpack not picking up my reflect-metadata in vendor.ts), but good to know about the issue

Ajay Kumar

@ajayak

Is there any sample app using webpack to build nodejs server code written in typescript including tests?

Marinho Brandão

@marinho

hey! I am currently porting an RC4 based project to RC6, first updating for RC5 in baby steps. So, I'm updating first from commit @4cf99473 to @c5b94a4a basing on Github compare ( https://github.com/AngularClass/angular2-webpack-starter/compare/4cf99473...c5b94a4a ).

The new version uses Webpack 2 (and TS 2, but this is was already in my package.json).

My problem: after ported, it complains it cannot find a certain file in a generatedfolder. I'm not sure if that happens by tsc or webpack, but the message is this:

Module build failed: Error: Can't resolve 'apis/myclient' in '/project/src/app'

my tsconfig.json has:

...
    "baseUrl": ".",
    "paths": {
        "*": [
            "./src/*",
            "./generated/*"
        ]
    },
...

my webpack.common.js has:

...
    resolve: {
        extensions: ['', '.ts', '.js', '.json', '.scss'],
        root: helpers.root('src'),
        modulesDirectories: ['node_modules', 'generated'],
    },
...

so, in theory, both are correct for my needs.

Anyone knows what it could be?

BaHXeLiSiHg

@BaHXeLiSiHg

Can not manage to make Debugger for Chrome work with my webpack (in VSCode). When i launch debugging from VSCode, some "invisible" breakpoint fires in file "eval: 83", but in every other component breakpoints are "unverified". In the same time, webpack-starter example works and debugging good. But i can't find difference, launch.json-s are the same. And everything else almost identical (between my project and webpack-starter example), what should i check?? Or what should i show you that will help with this problem?

Marinho Brandão

@marinho

hi guys, I'm using ng2-redux, which has its own AppState, while angular2-webpack-starter also provides its own in app.service.ts ... we keep both in our project, but I m just asking myself, shouldn't I have just one of them? Probably ng2-redux' one?

xtianus79

@xtianus79

i am probably going to go with this for my project.

with that said

i want to use a task runner. it seems though that the grunt integration is more popular than gulp

your thoughts

Graham Churchley

@gchurchley

Anybody using TestBed.createComponent? I want to set @Inputs on my component prior to creation to mimic invocation in real use. How do I this?

JeanPaul Attard

@jeanpaulattard

I have been trying to do so, but it is failing when using templateUrls

Carlos Esteban Lopez Jaramillo

@luchillo17

Help, i'm getting this error but i'm confused about where or why is this happening, any ideas?

This message was deleted

Screen Shot 2016-09-13 at 8.13.59 AM.png

Carlos Esteban Lopez Jaramillo

@luchillo17

It doesn't break anything thus idk if i should put it in the github issues area of the repo, i just merged the latest changes to my repo: https://github.com/Luchillo/Luchillo-tech-showcase

andrizmitnick

@andrizmitnick

wanna ask, is there a way to integrate --mobile repo into this webpack starter?

Mark Pritchett

@markpritchett

Hi, does anyone know how I could read the version number from the package.json and make this available to a component (so it could be shown on my application)?

Ryan Langton

@ryanlangton

I've been unable to debug my source files while running specs since implementing the angular2-webpack-starter. anyone else experienced this?
http://stackoverflow.com/questions/39131809/karma-webpack-sourcemaps-not-working
AngularClass/angular2-webpack-starter#995

Marinho Brandão

@marinho

hi guys, I just upgraded to webpack2, reflecting updates from angular2-webpack-start in master branch (from RC4 to RC6: e53e69f...master). Suddenly after that, imports pointing to a folder I have for generated code don't find files anymore.

Giving a bit of context, the generated folder has only generated code and is visible through both tsconfig.json and webpack.common.js configurations, respectively:

"paths": {
        "*": [
            "./src/*",
            "./generated/*"
        ]
    },

and

resolve: {
      ...
      // remove other default values
      modulesDirectories: ['node_modules', 'generated'],
    },

tsc still find the files correctly, but the browser doesn't.

do you guys know what can be missing?

Jacques Alberts

@Skaapie

Hi guys,
New to Angular2 and TypeScript.
Just picked this up and wasn't sure if it is an issue(not a bug or anything):
In the file located at '../src/app/+detail/index.ts'
should:

export default class AboutModule {
  static routes = routes;
}

not be:

export default class DetailModule {
  static routes = routes;
}

Marinho Brandão

@marinho

well, I solved my issue by adding an alias, as below:

    resolve: {
      extensions: ['', '.ts', '.js', '.json', '.scss'],
      root: helpers.root('src'),
      alias: {
          apis: path.resolve(__dirname, '../generated/apis')
      },
      modulesDirectories: ['node_modules'],
    },

Abhishek Srivastava

@abhilive

Guys!!, Going to start with node & expressJs. I want to save my angular2 form data using services. Any reference link ?

Christophe Durieux

@codedumper

I moved from webpack1.x to 2.x starter on rc7

My routed url include a double quote %22 after the hash tag. Any idea why ?

Daniel

@hameltomor

Good morning, guys! Who know how can share(transfer/passing) webpackConfig.metadata.isDevServer into app. I need use this params into my application. How can I do that?

Mayur Bhatt

@go4mayur_twitter

Hi All

I am building a website using angular2 rc5 webpack cli

i am facing an issue with router

as i need to use one router and show different content based on request params

e.g. /page/:section

Where communities thrive

People

Repo info

Activity