An Angular 2 Webpack Starter kit featuring Angular 2, Router, TypeScript, and Webpack by AngularClass
import {ComponentFixture, TestBed, async,fakeAsync,inject} from '@angular/core/testing';
import { BrowserModule } from '@angular/platform-browser';
import {By} from "@angular/platform-browser";
import {DebugElement} from "@angular/core";
import { MockBackend, MockConnection } from '@angular/http/testing';
import { HttpModule, Http, XHRBackend, Response, ResponseOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import {Component, ElementRef,OnInit,ViewChild} from '@angular/core';
import { SPORTSService } from '../../app/services/sports.service';
import {KendoGridComponent} from '../../app/components/grid/grid.component';
import {Signal} from '../../app/components/financials/finance-dashboard-title';
describe("sports titke search", () => {
console.log("testing")
let Component: KendoGridComponent;
let Fixture: ComponentFixture<KendoGridComponent>;
let textDebugElement: DebugElement;
let textElement: HTMLElement;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ HttpModule ],
declarations:[KendoGridComponent,ProgressCircle],
providers:[DecodeService,SPORTSService,jumpService,saveService,TranslateService,TRANSLATION_PROVIDERS,{ provide: XHRBackend, useClass: MockBackend }]
}).compileComponents().then(() =>{
Fixture = TestBed.createComponent(KendoGridComponent);
Component = Fixture.componentInstance;
});
}));
it("jump criteria search",()=>{
let data= "{jumpId:0,operationType:search,jumpsDto:null,jumpsSearch:{networks:[1],title:'',titleType:,titleSubType:'',distributorName:'',jumpNumber:'',jumpStatus:'',jumpReference:'',packageName:''}}";
//let data = "ssoId:&name:&networkNo:1&deptRole:292&status:active&accessNetwork:2&permissionLevelId:1";
Component._dataSource = new kendo.data.DataSource
Component.gridSearch("jumps",data,'post');
});
});
documentsClicked(): void{
console.log("documentsClicked");
var myWindow = $(".commonLink");
myWindow.kendoWindow({
width: "600px",
water: "About Alvar Aalto",
visible: false,
actions: [
"Pin",
"Minimize",
"Maximize",
"Close"
],
close: onClose
}).data("kendoWindow").center().open();
}
<div class="waterPaperDocInfo">
<span class="fa fa-file-text-o"></span>
<span class="commonLink" (click)="documentsClicked();"> {{hat.docsCount}} Documents</span> | Last Modified: {{hat.dateUpdate}} <span class="fa fa-clock-o">9:00 am</span>
</div>
sample working code http://jsfiddle.net/XY7HT/53/
providing related code below and complete code in the fiddle since no space to paste it here https://jsfiddle.net/9bwdk6xk/3/
<span class="commonLink" (click)="documentsClicked();"> {{hat.docsCount}} Documents</span> | Last Modified: {{hat.dateUpdate}} <span class="fa fa-clock-o">9:00 am</span>
</div>
<div id="win1" style="display:none">
<p>First Window</p>
<button type="button" id="open2">Open second Window</button>
<input type="file" name="batchFile" id="batchFile" title="Select file" />
</div>
documentsClicked(): void{
console.log("documentsClicked");
//var myWindow = $(".commonLink");
//myWindow.kendoWindow({
//var myWindow = $(".commonLink");
//myWindow.kendoWindow({
$("#win1").show().kendoWindow({
width: "600px",
water: "About Alvar Aalto",
visible: false,
actions: [
"Pin",
"Minimize",
"Maximize",
"Close"
],
close: onClose
}).data("kendoWindow").center().open();
}
sample working code http://jsfiddle.net/XY7HT/53/
providing related code below and complete code in the fiddle since no space to paste it below https://jsfiddle.net/9bwdk6xk/9/
<div id="win1" style="display:none">
<p>First Window</p>
<button type="button" id="open2">Open second Window</button>
<input type="file" name="batchFile" id="batchFile" title="Select file" />
</div>
<div id="kgrid" >
<kendo-grid-template ></kendo-grid-template>
</div>
EXCEPTION: Error in app/components/sports/sport caused by: Cannot read property 'model' of undefined
ErrorHandler.handleError @ core.umd.js:3462
next @ core.umd.js:6924
schedulerFn @ core.umd.js:6172
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.js:6164
onError @ core.umd.js:6388
onHandleError @ core.umd.js:6263
ZoneDelegate.handleError @ zone.js:207
Zone.runTask @ zone.js:139
ZoneTask.invoke @ zone.js:304
core.umd.js:3464 ORIGINAL EXCEPTION: Cannot read property 'model' of undefined
ErrorHandler.handleError @ core.umd.js:3464
next @ core.umd.js:6924
schedulerFn @ core.umd.js:6172
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.js:6164
onError @ core.umd.js:6388
onHandleError @ core.umd.js:6263
ZoneDelegate.handleError @ zone.js:207
Zone.runTask @ zone.js:139
ZoneTask.invoke @ zone.js:304
<label class="fileContainer dragAndDropHolder" >
{{dragDrop}}
<input type="file" id="attachKickBrowseSim" [class.disabled]="isFingersLocked" (change)="changeListener($event)" />
</label>
/* On Change */
changeListener($event) : void {
this.swimming($event.target);
}
/*Encode File*/
swimming(inputValue: any): void {
var foul = this;
var file:File = inputValue.files[0];
var myReader:FileReader = new FileReader();
myReader.onloadend = (e) => {
this.encodeBase64 = myReader.result;
foul.fileSelect=$("#attachKickBrowseSim").val().replace(/^.*\\/, "");
if(foul.fileSelect==''){
foul.dragDrop = foul.clearSim;
}else{
foul.dragDrop= "";
foul.dragDrop= foul.fileSelect;
}
}
$('.addMouseKickForm').show();
if(inputValue.files.length>0)
{
myReader.readAsDataURL(file);
}
}
setup: function(app) {
// For example, to define custom handlers for some paths:
new ThirdPartyRoute(app, null);
}
npm start
(builds and hosts) and we serve our production (AOT) build with a custom node server. We want to standardize the process and always serve the app from the same server (preferably the server that hosts the dev build when npm start
is ran). How could we do this?
src/main/webapp/app/features/bernie/bernie.module.ts
atsrc/main/webapp/app/bernie/bernie.module.ts
atERROR in ./compiled/src/main/webapp/app/app.module.ngfactory.ts
Module build failed: Error: Can't resolve './bernie/bernie.module' in '/Users/Dan/work/a/gba/src/main/webapp/app'
at onError (/Users/Dan/work/a/gba/node_modules/enhanced-resolve/lib/Resolver.js:61:15)
at loggingCallbackWrapper (/Users/Dan/work/a/gba/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at runAfter (/Users/Dan/work/a/gba/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
...
tslint
complains on this code, saying that Don’t use ‘Function’ as a type. Avoid using the Function
type. Prefer a specific function type, like () => void
. Is there anyway of formatting this in a way that tslint
accepts? The suggestion () => void
does not really work out.interface AsyncRoutes {
[component: string]: Es6PromiseLoader |
Function |
FactoryEs6PromiseLoader |
FactoryPromise ;
}
Uncaught TypeError: jit_val_0 is not a function
at eval (ng:///AppModule/module.ngfactory.js:3)
at evalExpression (vendor.dll.js:71552)
at jitStatements (vendor.dll.js:71564)
at JitCompiler._compileModule (vendor.dll.js:71845)
at vendor.dll.js:71784
at Object.then (vendor.dll.js:46693)
at JitCompiler._compileModuleAndComponents (vendor.dll.js:71782)
at JitCompiler.compileModuleAsync (vendor.dll.js:71711)
at PlatformRef_._bootstrapModuleWithZone (vendor.dll.js:6388)
at PlatformRef_.bootstrapModule (vendor.dll.js:6374)
at HTMLDocument.main (main.bundle.js:7650)
at ZoneDelegate.invokeTask (polyfills.dll.js:4522)
at Zone.runTask (polyfills.dll.js:4289)
at ZoneTask.invokeTask [as invoke] (polyfills.dll.js:4596)
at invokeTask (polyfills.dll.js:5462)
at HTMLDocument.globalZoneAwareCallback (polyfills.dll.js:5488)
npm run build:aot:prod
Error: Error encountered resolving symbol values statically. Reference to a local (non-exported) symbol 'routes'. Consider exporting the symbol (position 19:7 in the original .ts file), resolving symbol HomeRoutingModule in /var/www/html/ng2-lab/prowebcli/src/app/modules/home/home-routing.module.ts
Hello All
I have a issue in AOT with tree shaking
Scenerio 1:
When I build by application with AOT, and then running the dist folder using http-server, the application opens in the browser and works fine, No issues here :grinning:.
Scenerio 2:
But when I add tree shaking
code in my file : webpack.config.js
along with AOT build
new HtmlWebpackPlugin({ title: 'Tree-shaking' })
reference : http://jakewiesler.com/tree-shaking-es6-modules-in-webpack-2/
and on running the AOT build folder, the browser displays error in the console like ERROR Error: The selector "app" did not match any elements
leaving with blank screen
Now If I remove that tree-shaking
code from web-pack and run the AOT build then the Application again works properly
Not Sure, what else is missing.
please have a look at my issue, and help me if you have any idea