An Angular 2 Webpack Starter kit featuring Angular 2, Router, TypeScript, and Webpack by AngularClass
PatrickJS on master
Update README.md (compare)
having issue with aot webpack angular4. Cannot read property split of undefined.
package.json
"dependencies": {
"@angular/common": "4.1.0",
"@angular/compiler": "4.1.0",
"@angular/compiler-cli": "4.1.0",
"@angular/core": "4.1.0",
"@angular/forms": "4.1.0",
"@angular/http": "4.1.0",
"@angular/platform-browser": "4.1.0",
"@angular/platform-browser-dynamic": "4.1.0",
"@angular/platform-server": "4.1.0",
"@angular/router": "4.1.0",
"@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.25",
"angular2-cookie": "1.2.6",
"angular2-pipes": "^1.5.0",
"angular2-wizard": "^0.3.0",
"bootstrap": "4.0.0-alpha.6",
"codelyzer": "^3.0.1",
"core-js": "2.4.1",
"express": "^4.15.3",
"express-history-api-fallback": "^2.2.1",
"font-awesome": "4.7.0",
"http-proxy": "^1.16.2",
"jquery": "3.2.1",
"ng-jhipster": "0.1.12",
"ng2-completer": "^1.4.0",
"ng2-file-upload": "^1.2.1",
"ng2-webstorage": "1.8.0",
"ngx-infinite-scroll": "0.4.1",
"ngx-pipes": "^1.5.10",
"nodemon": "^1.11.0",
"prerender-node": "^2.7.1",
"reflect-metadata": "0.1.10",
"rxjs": "5.3.0",
"swagger-ui": "3.0.7",
"tether": "1.4.0",
"zone.js": "0.8.9"
},
"devDependencies": {
"@angular/cli": "1.0.0",
"@angular/compiler-cli": "4.1.0",
"@types/jasmine": "2.5.47",
"@types/node": "7.0.12",
"add-asset-html-webpack-plugin": "2.0.1",
"angular2-template-loader": "0.6.2",
"awesome-typescript-loader": "3.1.2",
"browser-sync": "2.18.8",
"browser-sync-webpack-plugin": "1.1.4",
"codelyzer": "3.0.1",
"copy-webpack-plugin": "4.0.1",
"css-loader": "0.28.0",
"del": "2.2.2",
"event-stream": "3.3.4",
"exports-loader": "0.6.4",
"extract-text-webpack-plugin": "2.1.0",
"generator-jhipster": "4.3.0",
"generator-jhipster-angular-
Webpack
const webpack = require('webpack');
//var CompressionPlugin = require("compression-webpack-plugin");
const commonConfig = require('./webpack.common.js');
const webpackMerge = require('webpack-merge');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const Visualizer = require('webpack-visualizer-plugin');
const path = require('path');
const ENV = 'prod';
const ngToolsWebpack = require('@ngtools/webpack');
module.exports = webpackMerge(commonConfig({ env: ENV }), {
devtool: 'source-map',
entry: {
'polyfills': './src/main/webapp/app/polyfills',
'global': './src/main/webapp/content/scss/global.scss',
'main': './src/main/webapp/app/main-aot'
},
resolve: {
extensions: ['.ts', '.js'],
modules: ['node_modules']
},
output: {
path: path.resolve('./target/aot'),
filename: '[hash].[name].bundle.js',
chunkFilename: '[hash].[id].chunk.js'
},
plugins: [
new ngToolsWebpack.AotPlugin({
tsConfigPath: './tsconfig-aot.json'
}),
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
/*new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.html$/,
threshold: 10240,
minRatio: 0.8
}),*/
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
output: {
comments: false
},
sourceMap: true
}),
new ExtractTextPlugin('[hash].styles.css'),
new Visualizer({
// Webpack statistics in target folder
filename: '../stats.html'
})
],module: {
loaders: [
{ test: /\.scss$/, loaders: ['raw-loader', 'sass-loader'] },
{ test: /\.css$/, loader: 'raw-loader' },
{ test: /\.html$/, loader: 'raw-loader' },
{ test: /\.ts$/, loaders: ['@ngtools/webpack', 'angular2-template-loader', 'awesome-typescript-loader'] }
]
}
});
i am trying to learn angular2
i read through ngFor documentation but not sure how to display the liArraycontent values.
can you guys tell me how to display it.
providing my code below
http://plnkr.co/edit/8SzOc9GfgzvCBb7Fifvg?p=preview&open=app%2Fapp.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: <ul class= "master">
<li *ngFor ="let student of liArraycontent"> </li>
</ul>
})
export class AppComponent {
name = 'Angular';
liArraycontent = ["testing 1", "testing 2", "testing3"]
}
/
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
/
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
styles: [`
li {
color: red;
}
`],
template: `<ul class= "master">
<li *ngFor ="let student of liArraycontent" (click) = "liClicked(this)"> {{student}} </li>
</ul>`
})
export class AppComponent {
name = 'Angular';
liArraycontent = ["testing 1", "testing 2", "testing3"]
this.liClicked = function(e1) {
alert('a');
}
}
/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css"/>
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();
}