AngularClass/angular2-webpack-starter

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

jasonboggess

@jasonboggess

had a question about adding a backend server

it looks like webpack allows proxy but I can't for the life of me get it to work with the angular2 starter pack

jasonboggess

@jasonboggess

nevermind

proxy: {
'/api/*' : {
target: {
host: 'localhost',
port: 3002
}
}
}

that worked

Zahadi Eslicho

@panKt

Hi, anyone knows how to fix symlink issue? AngularClass/angular2-webpack-starter#315

Peter Pisljar

@ppisljar

jasonboggess

@jasonboggess

hey everyone, does anyone know what the end to end tests are supposed to look like?

I ran the e2e:live and it just says :
Starting debugger agent.
Debugger listening on port 5858

Jamie Spittal

@Spittal

That’s going to live watch for e2e changes.

I generally use npm run ci to run the suite of tests

but you can see all the scripts available and what they do in the package.json file.

if you do want to use e2e live

you can use this (as found in README.md)

npm run webdriver:start
# in another terminal
npm run e2e:live

^ @jasonboggess

adyster

@adyster

Is it possible to turn off optimize assets (at least for dev server)? After installing ng2-bootstrap, it takes a long time to process

Jamie Spittal

@Spittal

Did you change the devtool in web pack?

eval is significantly faster than source-map

adyster

@adyster

Even after changing it, it still takes a long time. It gets stuck on that optimize assets

Takes about 25 seconds to complete

binarious

@binarious

The current setting doesn't fail the tests when a JS error is thrown. For example this test succeeds:

it('should init',
        injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
            return tcb.createAsync(TestCmp).then((fixture: any) => {
                fixture.detectChanges();

                let component: TestCmp = fixture.debugElement.componentInstance;
                let compiled = fixture.debugElement.nativeElement;

                console.log(component.viewChild); // LOG: undefined
                expect(component.viewChild.checkedValidity).toBe(false);  // should throw an error
                expect(component.viewChild.checkingValidity).toBe(false);
                expect(component.viewChild.valid).toBe(false);
                expect(component.viewChild.validationError).toBe('');
            });
        })
    );

Any ideas what to do?

Artur Rozwalak

@arozwalak

hi guys, I just downloaded v3.0.0. I have a problem when trying to add new component in app.ts

app.ts

import {Component} from 'angular2/core';
import {RouteConfig, Router, ROUTER_DIRECTIVES} from 'angular2/router';

import {Topbar} from './_components/topbar/topbar';
import {Home} from './home/home';

@Component({
    selector: 'app',
    directives: [ ...ROUTER_DIRECTIVES, Topbar ],
    template: `<topbar></topbar>
        <router-outlet></router-outlet>
    `
})
@RouteConfig([
    { path: '/', component: Home, name: 'Index' },
    { path: '/**', redirectTo: ['Index'] }
])
export class App {
    constructor() {
    }
}

topbar.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'topbar',
    templateUrl: require('./topbar.html')
})
export class Topbar {
    constructor () {}
}

topbar.html

<div>Topbar</div>

when I run webpack dev server I get this error

EXCEPTION: Template parse errors:
Unexpected closing tag "head" ("
    <link rel="stylesheet" href="/assets/css/styles.css">

[ERROR ->]</head>

<body>
"): Topbar@16:0
Unexpected closing tag "html" ("

<script src="polyfills.bundle.js"></script><script src="main.bundle.js"></script></body>
[ERROR ->]</html>
"): Topbar@30:0

and

BaseException {message: "Template parse errors:↵Unexpected closing tag "hea…/script></body>↵[ERROR ->]</html>↵"): Topbar@30:0", stack: "Error: Template parse errors:↵Unexpected closing t…ttp://localhost:3000/polyfills.bundle.js:6302:11)"}message: "Template parse errors:↵Unexpected closing tag "head" ("↵    <link rel="stylesheet" href="/assets/css/styles.css">↵↵[ERROR ->]</head>↵↵<body>↵"): Topbar@16:0↵Unexpected closing tag "html" ("↵↵<script src="polyfills.bundle.js"></script><script src="main.bundle.js"></script></body>↵[ERROR ->]</html>↵"): Topbar@30:0"stack: "Error: Template parse errors:↵Unexpected closing tag "head" ("↵    <link rel="stylesheet" href="/assets/css/styles.css">↵↵[ERROR ->]</head>↵↵<body>↵"): Topbar@16:0↵Unexpected closing tag "html" ("↵↵<script src="polyfills.bundle.js"></script><script src="main.bundle.js"></script></body>↵[ERROR ->]</html>↵"): Topbar@30:0↵    at new BaseException (http://localhost:3000/main.bundle.js:841:24)↵    at TemplateNormalizer.normalizeLoadedTemplate (http://localhost:3000/main.bundle.js:21528:20)↵    at http://localhost:3000/main.bundle.js:21517:66↵    at Zone.run (http://localhost:3000/polyfills.bundle.js:7283:25)↵    at Zone.run (http://localhost:3000/main.bundle.js:11140:43)↵    at zoneBoundFn (http://localhost:3000/polyfills.bundle.js:7260:27)↵    at lib$es6$promise$$internal$$tryCatch (http://localhost:3000/polyfills.bundle.js:6508:18)↵    at lib$es6$promise$$internal$$invokeCallback (http://localhost:3000/polyfills.bundle.js:6520:19)↵    at lib$es6$promise$$internal$$publish (http://localhost:3000/polyfills.bundle.js:6491:13)↵    at http://localhost:3000/polyfills.bundle.js:6163:11↵    at microtask (http://localhost:3000/main.bundle.js:11180:30)↵    at Zone.run (http://localhost:3000/polyfills.bundle.js:7283:25)↵    at Zone.run (http://localhost:3000/main.bundle.js:11140:43)↵    at zoneBoundFn (http://localhost:3000/polyfills.bundle.js:7260:27)↵    at MutationObserver.lib$es6$promise$asap$$flush (http://localhost:3000/polyfills.bundle.js:6302:11)"__proto__: __constructor: BaseException(message)toString: ()__proto__: DefineError.bi(anonymous function) @ main.ts:34Zone.run @ zone-microtask.ts:20zoneBoundFn @ zone-microtask.ts:20Zone.run @ zone-microtask.ts:20zoneBoundFn @ zone-microtask.ts:20lib$es6$promise$$internal$$tryCatch @ zone-microtask.ts:20lib$es6$promise$$internal$$invokeCallback @ zone-microtask.ts:20lib$es6$promise$$internal$$publish @ zone-microtask.ts:20lib$es6$promise$$internal$$publishRejection @ zone-microtask.ts:20(anonymous function) @ zone-microtask.ts:20microtask @ ng_zone.ts:410Zone.run @ zone-microtask.ts:20(anonymous function) @ ng_zone.ts:371zoneBoundFn @ zone-microtask.ts:20lib$es6$promise$asap$$flush @ zone-microtask.ts:20

I noticed that in webpack dev config file files with .html extension are loaded as raw files

Sam Jones

@ollwenjones

@arozwalak The key thing is that '.html files are loaded as raw files' : You can't use templateUrl since that html file isn't being fetched asynchronously at run-time, but converted to a "raw" string at web-pack bundle time (like compile time), so you need to use template not templateUrl

Sam Jones

@ollwenjones

also nothing like angular 1 template cache going on. Webpack is bundling that html file as a string literal into the topbar class.

Jason Miazga

@jmiazga

how can I add javascript files to webpack? under src/assets I have some javascript files than need to be included

Artur Rozwalak

@arozwalak

@ollwenjones thnx, that's what I missed

Thai Huynh

@thuynh

what's the best way to achieve this... I have a common repo that has all the "core" functionalities ... then I have "client" projects that will be using the core... how do I get autocomplete for typing after I've install that core package into my client project

how I do get it to recognize my core files

Jamie Spittal

@Spittal

This is much more of a generic typescript question.

I believe this will point you in the right direction

http://www.typescriptlang.org/Handbook#writing-dts-files

but full disclosure @thuynh I’m fairly new to Typescript myself so I’m not 100% sure.

Attila Egyed

@tsm91

I installed materializecss via npm and added a require('materialize-css/dist/css/materialize.min.css'); in app.ts, it seems like the styles havent got loaded, any ideas on this one?

i even tried to load it in the @component decorator as local styles, styles: [require('materialize-css/dist/css/materialize.min.css')] but no effect at all, i don't receive any errors

Nathan Erickson

@Luwdo

Hey guys I was wondering if anyone has run into duplicate Identifiers when installing es6-shim through npm at the same time as typescript?

thomasbee

@thomasbee

what would be the right way to tell webpack to transfer a CSS file in a node_module (toastr in my case) to the assets directory. I could copy it there manually but that's not so nice

luxury-technologies

@luxury-technologies

Hey guys, working on a node project and after having installed the dependencies I couldn't run the application (my first time) ...

Error: "webpack-dev-server" is not recognized as an internal or external command

Nathan Erickson

@Luwdo

@thomasbee with webpack if you install the css-loader, sass-loader, and style-loader you can target any type of css file for requiring in your TS file, the loader will inject the css into the page. What I like to do is have a main scss file then in the scss file i use an import statement to include my node_module css files @import "~animate.css/animate.css";; and in my main entry ts require('./app.scss');

this would be your css loader config in webpack.config.js

{ test: /\.css$/, loader: 'style!css' }

this would be your scss loader config

{ test: /\.scss$/, loader: 'style!css!sass' }

the ~ on a import statement is a shortcut that tells the loader to look in your node_modules folder

Dave

@aios

Hi! How i can make Laravel 5.2 + Angular2-Webpack-Starter chain? By laravel 5.2 api - and jwt tokens i doesnt make any questions. But Ng2... Anybody can take newspaper where i can read about it. And sorry for bad english.

Dave

@aios

Anybody is hear?

Raj Krishna Maharjan

@roxcity

How to hide # in url in prod mode ?

How can i use pathlocationstrategy instead of # strategy?

Raj Krishna Maharjan

@roxcity

when i put pathlocationstrategy the url localhost:8080/about doesn't work

Nathan Erickson

@Luwdo

I noticed that at no point does the angular 2 starter to a require('angular2'), I don't see an import loader for webpack either that add requires to import statements. Does webpack already recognize the an import statement as a require?

Where communities thrive

People

Repo info

Activity