Angular Material button is not rendering - css

I have followed steps to install material design, but when I add button I don't get the MD style.
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
Package.json file
{
"name": "apimap",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.0.2",
"#angular/cdk": "github:angular/cdk-builds",
"#angular/common": "^5.0.0",
"#angular/compiler": "^5.0.0",
"#angular/core": "^5.0.0",
"#angular/forms": "^5.0.0",
"#angular/http": "^5.0.0",
"#angular/material": "github:angular/material2-builds",
"#angular/platform-browser": "^5.0.0",
"#angular/platform-browser-dynamic": "^5.0.0",
"#angular/router": "^5.0.0",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "1.5.2",
"#angular/compiler-cli": "^5.0.0",
"#angular/language-service": "^5.0.0",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "~3.2.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2"
}
}
I have also added css theme + material design in index.html
Added MD modules in app.mudule.ts but I get a basic html button style, only the mat-menu-item are in MD style.
Update: A screen capture of the button:
when I click on it

Just for confirmation, have you added MatButtonModule in appModule imports? Can't add it as comment because of my reputation :P

Related

Angular 12 data binding problems

I have a project migrated to angular 12.2 with the package.json file configured like this:
{
"name": "xxxx",
"version": "1",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"#agm/core": "^3.0.0-beta.0",
"#angular-slider/ngx-slider": "^2.0.3",
"#angular/animations": "~12.2.0",
"#angular/cdk": "^12.2.11",
"#angular/common": "~12.2.0",
"#angular/compiler": "~12.2.0",
"#angular/core": "~12.2.0",
"#angular/forms": "~12.2.0",
"#angular/platform-browser": "~12.2.0",
"#angular/platform-browser-dynamic": "~12.2.0",
"#angular/router": "~12.2.0",
"#angularclass/hmr": "^3.0.0",
"#ngx-translate/core": "^13.0.0",
"#ngx-translate/http-loader": "^6.0.0",
"#types/geojson": "^7946.0.8",
"#types/googlemaps": "^3.39.12",
"angular-2-local-storage": "^3.0.2",
"angular2-highcharts": "^0.5.5",
"angular2-query-builder": "^0.6.2",
"animate.css": "^4.1.1",
"chart.js": "^3.6.0",
"core-js": "^3.19.0",
"d3-array": "^3.1.1",
"file-saver": "^2.0.5",
"font-awesome": "^4.7.0",
"fullcalendar": "^5.10.0",
"geojson": "^0.5.0",
"gzip-all": "^1.0.0",
"highcharts": "^9.3.0",
"jexl": "^2.3.0",
"jquery": "^3.6.0",
"jsbarcode": "^3.11.5",
"moment": "^2.29.1",
"nanoscroller": "^0.8.7",
"ng2-dragula": "^2.1.1",
"ngx-localized-numbers": "^0.4.1",
"ngx-schema-form": "^2.6.6",
"node-sass": "^6.0.1",
"pg": "^8.7.1",
"primeicons": "^4.1.0",
"primeng": "^12.2.1",
"quill": "^1.3.7",
"rxjs": "~6.6.0",
"ts-helpers": "^1.1.2",
"tslib": "^2.3.0",
"typescript": "^4.2.4",
"uuid": "^8.3.2",
"venn.js": "^0.2.20",
"xlsx": "^0.17.3",
"z-schema": "^4.2.4",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~12.2.11",
"#angular/cli": "~12.2.11",
"#angular/compiler-cli": "~12.2.0",
"#angular/language-service": "^12.2.11",
"#types/angular": "^1.8.3",
"#types/jasmine": "~3.8.0",
"#types/jasminewd2": "^2.0.10",
"#types/jquery": "^3.5.8",
"#types/node": "^12.20.36",
"codelyzer": "^6.0.2",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "^7.0.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-coverage-istanbul-reporter": "^3.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"protractor": "^7.0.0",
"ts-node": "^10.4.0"
}
}
The tsconfig.app.json file is configured like this:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": ["googlemaps","jquery","node"]
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
The tsconfig.json file is configured like this:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2018","dom"],
"module": "es2020",
"moduleResolution": "node",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"target": "es2017",
"typeRoots": ["./node_modules/#types"]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true,
//"enableIvy": false,
"strictDomEventTypes": false
}
}
Unfortunately, no data binding is done on any variable of any view, why?
I am using the same configuration on an angular 10 project and everything works fine.
Thanks.
At this time I solved it like this:
example I replaced {{variable}} with <span [innerText]="variable"></span>
However I didn't understand why I can't use {{variable}} syntax ... I hope someone can help me.
Thanks.

Scss files are not compiled as css file in ionic 5

I am using ionic 5 with angular 8 in my project. I have introduced Sass variables SCSS files which is not getting converted into CSS. I can see only SCSS file compiled while serving with ionic serve command.
What am I doing wrong here? How to compile SCSS into CSS in live reload always. Please suggest a way. Thanks in advance.
$secondary-color: #162a38;
$base-color: #407294;
.custom-alert .alert-input {
color: $base-color !important;
}
My package.json look like below:
"dependencies":
"#angular/common": "~8.1.2",
"#angular/core": "~8.1.2",
"#angular/fire": "^5.2.3",
"#angular/forms": "~8.1.2",
"#angular/platform-browser": "~8.1.2",
"#angular/platform-browser-dynamic": "~8.1.2",
"#angular/router": "~8.1.2",
"#fortawesome/angular-fontawesome": "^0.5.0",
"#fortawesome/fontawesome-svg-core": "^1.2.32",
"#fortawesome/free-brands-svg-icons": "^5.15.1",
"#fortawesome/free-regular-svg-icons": "^5.15.1",
"#fortawesome/free-solid-svg-icons": "^5.15.1",
"#ionic-native/base64": "^5.29.0",
"#ionic-native/core": "^5.0.0",
"#ionic-native/file": "^5.29.0",
"#ionic-native/file-chooser": "^5.29.0",
"#ionic-native/file-path": "^5.29.0",
"#ionic-native/splash-screen": "^5.0.0",
"#ionic-native/status-bar": "^5.0.0",
"#ionic/angular": "^5.4.0",
"#ionic/core": "5.4.0",
"#ionic/storage": "^2.2.0",
"#types/jquery": "^3.5.1",
"com-badrit-base64": "^0.2.0",
"cordova": "^9.0.0",
"cordova-android": "8.1.0",
"cordova-ios": "5.1.0",
"cordova-plugin-camera": "^4.1.0",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-filechooser": "^1.2.0",
"cordova-plugin-filepath": "^1.5.8",
"cordova-sqlite-storage": "^4.0.0",
"core-js": "^2.5.4",
"fast-glob": "^3.2.4",
"firebase": "^7.6.1",
"ionicons": "^5.2.3",
"jquery": "^3.5.1",
"lodash": "^4.17.20",
"ngx-quill": "^12.0.1",
"npm": "^6.13.4",
"quill": "^1.3.7",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
"devDependencies":
"#angular-devkit/architect": "~0.801.2",
"#angular-devkit/build-angular": "~0.801.2",
"#angular-devkit/core": "~8.1.2",
"#angular-devkit/schematics": "~8.1.2",
"#angular/cli": "~8.1.2",
"#angular/compiler": "~8.1.2",
"#angular/compiler-cli": "~8.1.2",
"#angular/language-service": "~8.1.2",
"#ionic-native/camera": "^5.19.0",
"#ionic/angular-toolkit": "^2.1.1",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^4.1.3",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
My angular.json build scripts looks like below:
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "www",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
],
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
}
],
"scripts": []
},

how to fix this error while executing command ng build --prod in angular project? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
ERROR in
./node_modules/ng2-material-dropdown/fesm5/ng2-material-dropdown.js
Module build failed (from
./node_modules/#angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
TypeError: Cannot read property 'kind' of undefined
at isAngularDecoratorMetadataExpression (C:\Users\arjunsinh\source\repos\Splitwise\Splitwise.Web\ClientApp\node_modules#angular-devkit\build-optimizer\src\transforms\scrub-file.js:265:35)
at checkNodeForDecorators (C:\Users\arjunsinh\source\repos\Splitwise\Splitwise.Web\ClientApp\node_modules#angular-devkit\build-optimizer\src\transforms\scrub-file.js:77:21)
at visitNodes (C:\Users\arjunsinh\source\repos\Splitwise\Splitwise.Web\ClientApp\node_modules#angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16144:30)
at Object.forEachChild (C:\Users\arjunsinh\source\repos\Splitwise\Splitwise.Web\ClientApp\node_modules#angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16370:24)
at checkNodeForDecorators (C:\Users\arjunsinh\source\repos\Splitwise\Splitwise.Web\ClientApp\node_modules#angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
at visitNode (C:\Users\arjunsinh\source\repos\Splitwise\Splitwise.Web\ClientApp\node_modules#angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16135:24)
at Object.forEachChild (C:\Users\arjunsinh\source\repos\Splitwise\Splitwise.Web\ClientApp\node_modules#angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16265:21)
at checkNodeForDecorators (C:\Users\arjunsinh\source\repos\Splitwise\Splitwise.Web\ClientApp\node_modules#angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
at visitNode (C:\Users\arjunsinh\source\repos\Splitwise\Splitwise.Web\ClientApp\node_modules#angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16135:24)
at Object.forEachChild (C:\Users\arjunsinh\source\repos\Splitwise\Splitwise.Web\ClientApp\node_modules#angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16322:24)
at checkNodeForDecorators (C:\Users\arjunsinh\source\repos\Splitwise\Splitwise.Web\ClientApp\node_modules#angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
at visitNode (C:\Users\arjunsinh\source\repos\Splitwise\Splitwise.Web\ClientApp\node_modules#angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16135:24)
at Object.forEachChild (C:\Users\arjunsinh\source\repos\Splitwise\Splitwise.Web\ClientApp\node_modules#angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16333:24)
at checkNodeForDecorators (C:\Users\arjunsinh\source\repos\Splitwise\Splitwise.Web\ClientApp\node_modules#angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
at visitNode (C:\Users\arjunsinh\source\repos\Splitwise\Splitwise.Web\ClientApp\node_modules#angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16135:24)
at Object.forEachChild (C:\Users\arjunsinh\source\repos\Splitwise\Splitwise.Web\ClientApp\node_modules#angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16229:21)
at checkNodeForDecorators (C:\Users\arjunsinh\source\repos\Splitwise\Splitwise.Web\ClientApp\node_modules#angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
at visitNodes (C:\Users\arjunsinh\source\repos\Splitwise\Splitwise.Web\ClientApp\node_modules#angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16144:30)
at Object.forEachChild (C:\Users\arjunsinh\source\repos\Splitwise\Splitwise.Web\ClientApp\node_modules#angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16379:24)
at checkNodeForDecorators (C:\Users\arjunsinh\source\repos\Splitwise\Splitwise.Web\ClientApp\node_modules#angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
at visitNode (C:\Users\arjunsinh\source\repos\Splitwise\Splitwise.Web\ClientApp\node_modules#angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16135:24)
at Object.forEachChild (C:\Users\arjunsinh\source\repos\Splitwise\Splitwise.Web\ClientApp\node_modules#angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16377:21)
package.json file
{
"name": "Splitwise.Web",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"build:ssr": "ng run Splitwise.Web:server:dev",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular-devkit/build-angular": "^0.803.20",
"#angular-devkit/build-ng-packagr": "^0.803.20",
"#angular/animations": "6.1.10",
"#angular/common": "6.1.10",
"#angular/compiler": "6.1.10",
"#angular/core": "6.1.10",
"#angular/forms": "6.1.10",
"#angular/http": "6.1.10",
"#angular/platform-browser": "6.1.10",
"#angular/platform-browser-dynamic": "6.1.10",
"#angular/platform-server": "6.1.10",
"#angular/router": "6.1.10",
"#aspnet/signalr": "^1.1.4",
"#nguniversal/module-map-ngfactory-loader": "6.0.0",
"aspnet-prerendering": "^3.0.1",
"bootstrap": "^4.3.1",
"core-js": "^2.5.4",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"ng-multiselect-dropdown": "^0.2.4",
"ngx-chips": "^2.1.0",
"popper.js": "^1.16.0",
"primeicons": "^2.0.0",
"primeng": "^6.1.7",
"primeng7": "^7.1.1",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular/cli": "^6.0.8",
"#angular/compiler-cli": "6.1.10",
"#angular/language-service": "^6.0.0",
"#types/jasmine": "~2.8.6",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~1.4.2",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"typescript": "~2.7.2"
},
"optionalDependencies": {
"node-sass": "^4.9.3",
"protractor": "~5.4.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1"
}
}
Details about version
Take a look at this link: https://github.com/ckeditor/ckeditor4-angular/issues/78
Looks like this guys solved it.

Angular 5 app loads incorrectly first time on Safari

Angular 5.2.5 site. The site works fine on Chrome, Firefox, IE and Edge. In Safari the first time the site loads (or every time if I disable the cache) the content is there but it appears the color and background-color are the same. I removed the sites custome CSS and it gave the same behavior. If the user has cache enabled and they log out then log back in the content correctly shows in the right colors. In the screen shot below I used my mouse to highlight the text fields, just to show that the component correctly loaded in the route but everything is the background color. I also included my package.json.
package.json
{
"name": "mss",
"version": "1.0.0",
"private": true,
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"keywords": [],
"author": "JFI",
"licenses": [
{
"type": "MIT",
"url": "https://github.com/angular/angular.io/blob/master/LICENSE"
}
],
"dependencies": {
"#angular/animations": "5.2.5",
"#angular/cdk": "5.2.5",
"#angular/cli": "1.7.3",
"#angular/common": "5.2.5",
"#angular/compiler": "5.2.5",
"#angular/compiler-cli": "5.2.5",
"#angular/core": "5.2.5",
"#angular/flex-layout": "5.0.0-beta.13",
"#angular/forms": "5.2.5",
"#angular/http": "5.2.5",
"#angular/material": "5.2.5",
"#angular/platform-browser": "5.2.5",
"#angular/platform-browser-dynamic": "5.2.5",
"#angular/platform-server": "5.2.5",
"#angular/router": "5.2.5",
"#angular/upgrade": "5.2.5",
"animate.css": "3.6.1",
"bootstrap": "3.3.7",
"classlist.js": "1.1.20150312",
"core-js": "2.5.7",
"glob": "7.1.2",
"intl": "1.2.5",
"jquery": "3.3.1",
"rxjs": "5.5.6",
"systemjs": "0.20.17",
"typescript": "2.6.2",
"web-animations-js": "2.3.1",
"zone.js": "0.8.20"
},
"devDependencies": {
"#ng-bootstrap/ng-bootstrap": "1.1.1",
"#ng-idle/core": "2.0.0-beta.13",
"#ng-idle/keepalive": "2.0.0-beta.13",
"#swimlane/ngx-charts": "6.1.0",
"#types/angular-idle": "1.1.31",
"#types/core-js": "0.9.43",
"#types/jquery": "3.3.11",
"#types/metismenu": "2.7.1",
"#types/node": "8.0.24",
"#types/selenium-webdriver": "3.0.4",
"angular-calendar": "0.23.7",
"angular-draggable-droppable": "1.0.1",
"angular-resizable-element": "1.2.1",
"angular2-toaster": "4.0.0",
"calendar-utils": "0.1.1",
"css-loader": "0.28.5",
"d3": "4.10.0",
"date-fns": "1.29.0",
"font-awesome": "4.7.0",
"gulp": "3.9.1",
"gulp-clean": "0.3.2",
"gulp-typescript": "3.1.3",
"gulp-util": "3.0.7",
"hammerjs": "2.0.8",
"jquery-slimscroll": "1.3.8",
"less": "3.8.1",
"less-loader": "4.0.5",
"lodash": "4.16.4",
"lodash._reinterpolate": "3.0.0",
"lodash.template": "4.4.0",
"lodash.templatesettings": "4.1.0",
"metismenu": "2.7.4",
"ngx-bootstrap": "2.0.3",
"ngx-breadcrumbs": "0.0.3",
"ngx-cookie": "2.0.1",
"ngx-pagination": "3.0.3",
"positioning": "1.3.0",
"signature_pad": "2.3.2",
"slimscroll": "0.9.1",
"sweetalert2": "7.4.0",
"ts-node": "2.0.0",
"tslint": "4.5.0"
}
}
I could not reproduce this in plunker or stackblitz.
I did fix this. In the main.ts i changed
platformBrowserDynamic().bootstrapModule(AppModule)
to
window.onload = function () { platformBrowserDynamic().bootstrapModule(AppModule); }
It seems like Safari was starting the angular application before all the js files have been unpacked.

cannot find module '#angular/core' visual studio 2017

I am new to angular + asp.net core
i am create sample project of angular 4 with .net core
but it keepshowing dependencies not installed
visual studio 15.5.2
Typescript version 2.6.2
Microsoft Typescript sdk 2.6.2
npm version 5.5.1
in my other machine its work perfectly but not in this pc
please help!!
MY package.json file is below
{
"name": "Angular_CRUD",
"private": true,
"version": "0.0.0",
"scripts": {
"test": "karma start ClientApp/test/karma.conf.js"
},
"devDependencies": {
"#angular/animations": "4.2.5",
"#angular/common": "4.2.5",
"#angular/compiler": "4.2.5",
"#angular/compiler-cli": "4.2.5",
"#angular/core": "4.2.5",
"#angular/forms": "4.2.5",
"#angular/http": "4.2.5",
"#angular/platform-browser": "4.2.5",
"#angular/platform-browser-dynamic": "4.2.5",
"#angular/platform-server": "4.2.5",
"#angular/router": "4.2.5",
"#ngtools/webpack": "1.5.0",
"#types/chai": "4.0.1",
"#types/jasmine": "2.5.53",
"#types/webpack-env": "1.13.0",
"angular2-router-loader": "0.3.5",
"angular2-template-loader": "0.6.2",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"chai": "4.0.2",
"css": "2.2.1",
"css-loader": "0.28.4",
"es6-shim": "0.35.3",
"event-source-polyfill": "0.0.9",
"expose-loader": "0.7.3",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"html-loader": "0.4.5",
"isomorphic-fetch": "2.2.1",
"jasmine-core": "2.6.4",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"karma": "1.7.0",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-webpack": "2.0.3",
"preboot": "4.5.2",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.10",
"rxjs": "5.4.2",
"style-loader": "0.18.2",
"to-string-loader": "1.1.5",
"typescript": "2.4.1",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0",
"zone.js": "0.8.12"
}
}
Run
npm install inside the folder to install the dependencies.
If this does not work, remove package-lock.json and try again

Resources