An Angular 2 Webpack Starter kit featuring Angular 2, Router, TypeScript, and Webpack by AngularClass
PatrickJS on master
Update README.md (compare)
npm run ci
to run the suite of tests
package.json
file.
npm run webdriver:start
# in another terminal
npm run e2e:live
eval
is significantly faster than source-map
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?
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>
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
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
.html
extension are loaded as raw files
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
require('materialize-css/dist/css/materialize.min.css');
in app.ts
, it seems like the styles havent got loaded, any ideas on this one?
@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
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' }