I would like the URL in the address bar to change as I go through my site. Right now, the app folder is in the root folder with { components, controllers, models, public, routes, services, views } folders in the app folder. When I click a link on the app, the URL does not update. I am using a Node backend with non-conflicting API routes. Any help?
package.json dependencies:
"dependencies": {
"#angular/common": "2.0.0-rc.1",
"#angular/compiler": "2.0.0-rc.1",
"#angular/core": "2.0.0-rc.1",
"#angular/http": "2.0.0-rc.1",
"#angular/platform-browser": "2.0.0-rc.1",
"#angular/platform-browser-dynamic": "2.0.0-rc.1",
"#angular/router": "^3.0.0-alpha.7",
"#angular/router-deprecated": "2.0.0-rc.1",
"#angular/upgrade": "2.0.0-rc.1",
"angular2": "^2.0.0-beta.17",
"angular2-in-memory-web-api": "0.0.11",
"bcrypt-nodejs": "latest",
"body-parser": "~1.0.0",
"bootstrap": "^3.3.6",
"connect-flash": "~0.1.1",
"cookie-parser": "~1.0.0",
"core-js": "^2.4.0",
"ejs": "~0.8.5",
"express": "~4.0.0",
"express-session": "~1.0.0",
"method-override": "~1.0.0",
"mongoose": "~3.8.1",
"morgan": "~1.0.0",
"passport": "~0.1.17",
"passport-facebook": "~1.0.2",
"passport-google-oauth": "~0.1.5",
"passport-local": "~0.1.6",
"passport-twitter": "~1.0.2",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.27",
"typescript": "^1.8.10",
"typings": "^1.0.4",
"zone.js": "^0.6.12"
}
index.html:
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>Todo List</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<style>
body { padding-top:80px; }
</style>
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
Routes:
import { provideRouter, RouterConfig } from '#angular/router/index';
import { IndexComponent } from "../components/index.component";
import { ProfileComponent } from "../components/profile.component";
import { SignupComponent } from "../components/signup.component";
export const appRoutes: RouterConfig = [
{ path: '', component: IndexComponent },
{ path: 'profile', component: ProfileComponent },
{ path: 'signup', component: SignupComponent }
];
export const APP_ROUTER_PROVIDER = [provideRouter(appRoutes)];
Fixed. I changed everything from 2.0.0-rc.1 to 2.0.0-rc.3 and all is well.
Related
I'm setting up a typescript-nodejs project in my local environment in which I'm facing an issue when I try to perform the
npm run build-ts
It throws the following error:
node_modules/#types/mongodb/index.d.ts:40:1 - error TS1084: Invalid
'reference' directive syntax.
/// <reference> lib="esnext.asynciterable" />
node_modules/#types/superagent/index.d.ts:17:1 - error TS1084: Invalid
'reference' directive syntax.
/// <reference lib="dom" />
CLI error screenshot
Dependencies
"#types/bcryptjs": "^2.4.2",
"#types/helmet": "0.0.47",
"bcryptjs": "^2.4.3",
"dont-sniff-mimetype": "^1.1.0",
"helmet": "^3.23.3",
"helmet-csp": "^2.10.0",
"strict-transport-security": "^0.2.2",
"1.1.1": "^1.0.0",
"#types/cookie-parser": "^1.4.1",
"#types/cors": "^2.8.4",
"#types/lokijs": "^1.5.2",
"#types/mathjs": "^4.4.1",
"#types/moment-timezone": "^0.5.9",
"#types/passport-http-bearer": "^1.0.33",
"async": "^2.6.0",
"aws-sdk": "^2.252.1",
"axios": "^0.18.0",
"bcrypt-nodejs": "^0.0.3",
"bluebird": "^3.5.1",
"body-parser": "^1.18.2",
"class-validator": "^0.8.5",
"compression": "^1.7.1",
"connect-mongo": "^2.0.0",
"cookie-parser": "^1.4.3",
"cors": "^2.8.4",
"csv-parse": "^3.0.0",
"dotenv": "^4.0.0",
"errorhandler": "^1.5.0",
"express": "^4.16.2",
"express-csv": "^0.6.0",
"express-fileupload": "^1.1.6-alpha.6",
"express-flash": "0.0.2",
"express-session": "^1.15.6",
"express-validator": "^4.3.0",
"fbgraph": "^1.4.1",
"fuse.js": "^3.2.1",
"http-status-codes": "^1.3.0",
"json2csv": "^4.2.1",
"lodash": "^4.17.4",
"lokijs": "^1.5.5",
"lusca": "^1.5.2",
"mathjs": "^5.2.0",
"moment": "^2.22.2",
"mongoose": "^4.13.0",
"node-schedule": "^1.3.0",
"nodemailer": "^4.7.0",
"passport": "^0.4.0",
"passport-facebook": "^2.1.1",
"passport-http-bearer": "^1.0.1",
"passport-local": "^1.0.0",
"qs": "^6.5.2",
"rand-token": "^0.4.0",
"request": "^2.83.0",
"request-promise": "^4.2.2",
"uuid": "^3.3.2",
"webshot": "^0.18.0",
"winston": "^2.4.0",
"xml2js": "^0.4.19"
DevDependencies:
"#types/async": "^3.2.3",
"#types/bcrypt-nodejs": "^0.0.30",
"#types/bluebird": "^3.5.32",
"#types/body-parser": "^1.16.8",
"#types/compression": "^0.0.35",
"#types/connect-mongo": "^0.0.35",
"#types/dotenv": "^4.0.2",
"#types/errorhandler": "^0.0.32",
"#types/express": "^4.11.1",
"#types/express-session": "^1.15.8",
"#types/jest": "^22.1.3",
"#types/jquery": "^3.2.17",
"#types/lodash": "^4.14.91",
"#types/lusca": "^1.5.0",
"#types/mongodb": "^3.5.26",
"#types/mongoose": "^4.7.34",
"#types/morgan": "^1.7.35",
"#types/node": "^9.4.6",
"#types/nodemailer": "^6.4.0",
"#types/passport": "^0.4.3",
"#types/passport-facebook": "^2.1.7",
"#types/passport-local": "^1.0.32",
"#types/qs": "^6.5.1",
"#types/request": "^2.47.0",
"#types/shelljs": "^0.7.8",
"#types/supertest": "^2.0.10",
"#types/winston": "^2.3.7",
"chai": "^4.1.2",
"concurrently": "^3.5.1",
"jest": "^22.0.4",
"node-sass": "^4.14.1",
"nodemon": "^1.13.0",
"shelljs": "^0.8.1",
"supertest": "^3.0.0",
"ts-jest": "^22.0.4",
"ts-node": "^5.0.0",
"tslint": "^5.9.1",
"typescript": "^2.9.1"
Tried:
Updated #types/node to the latest version.
Removing a froward slash from triple slashes (it started to throw more error when I did this - You can view the errors here)
Deletion of node_modules folder and re-installation of packages
in /// <reference> lib="esnext.asynciterable" /> the syntax actually IS invalid.
It should be /// <reference lib="esnext.asynciterable" /> like an xml tag.
You can find more information about this by searching for "Triple-Slash Directives" in the Typescript docs.
https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html
After updating Vuetify and Vue, I am getting this error:
Module build failed: Error: C:\Users...\node_modules\vuetify\src\stylus\components_app.styl:25:25
21| position: relative
22|
23| application($material)
24| background: $material.background
25| color: $material.text.primary
-------------------------------^
26|
27| .text
28| &--primary
$material.text has no property .primary
at application() (C:\Users...\node_modules\vuetify\src\stylus\components_app.styl:24:22)
at ".theme--light.application" (C:\Users...\node_modules\vuetify\src\stylus\theme.styl:8:25)
at light() (C:\Users...\node_modules\vuetify\src\stylus\theme.styl:8:24)
at theme() (C:\Users...\node_modules\vuetify\src\stylus\theme.styl:4:24)
I'm upgrading from Vuetify 0.8.7. I know that's crazy out of date, this is a project I inherited at work. I've tried updating vue and vuetify, updating its dependencies manually, vue-loader, vue-style-loader, vue-template-compiler.
Here is my package.json devDependencies
"dependencies": {
"axios": "^0.16.2",
"chart.js": "^2.7.3",
"chartjs-plugin-annotation": "^0.5.5",
"d3": "^4.11.0",
"d3-sankey": "^0.7.1",
"hdfs": "^1.0.1",
"net": "^1.0.2",
"nouislider": "^10.1.0",
"numeral": "^2.0.6",
"tls": "0.0.1",
"v-file-upload": "^3.1.0",
"vee-validate": "^2.0.0-rc.23",
"vue": "^2.5.22",
"vue-chartjs": "^2.8.7",
"vue-router": "^2.7.0",
"vuetify": "^1.4.3",
"vuex": "^2.4.0",
"vuex-persistedstate": "^2.4.2",
"webhdfs": "^1.1.1"
}, "devDependencies": {
"autoprefixer": "^6.7.2",
"babel-core": "^6.26.3",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.10",
"babel-plugin-istanbul": "^4.1.5",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.26.0",
"bootstrap-vue": "^0.15.8",
"chai": "^3.5.0",
"chalk": "^1.1.3",
"chromedriver": "^2.45.0",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^4.0.0",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.7",
"d3-sankey": "^0.7.1",
"eslint": "^3.19.0",
"eslint-config-standard": "^6.2.1",
"eslint-friendly-formatter": "^2.0.7",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^2.0.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.16.4",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^0.11.2",
"friendly-errors-webpack-plugin": "^1.1.3",
"html-webpack-plugin": "^2.30.1",
"http-proxy-middleware": "^0.17.3",
"inject-loader": "^3.0.1",
"karma": "^1.7.1",
"karma-coverage": "^1.1.2",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.5.0",
"karma-sinon-chai": "^1.3.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.30",
"karma-webpack": "^2.0.4",
"lolex": "^1.5.2",
"mocha": "^3.5.3",
"nightwatch": "^0.9.16",
"node-sass": "^4.11.0",
"opn": "^4.0.2",
"optimize-css-assets-webpack-plugin": "^1.3.2",
"ora": "^1.3.0",
"phantomjs-prebuilt": "^2.1.16",
"rimraf": "^2.6.2",
"sass-loader": "^6.0.6",
"selenium-server": "^3.5.3",
"semver": "^5.4.1",
"shelljs": "^0.7.8",
"sinon": "^2.4.1",
"sinon-chai": "^2.13.0",
"style-loader": "^0.17.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"url-loader": "^0.5.9",
"vue-loader": "^11.3.4",
"vue-style-loader": "^2.0.5",
"vue-template-compiler": "^2.5.22",
"webpack": "^2.7.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.19.1",
"webpack-merge": "^4.1.0"
}
Here is my main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'
import VeeValidate from 'vee-validate'
import store from './store'
Vue.config.productionTip = false
Vue.use(Vuetify)
Vue.use(VeeValidate, {
errorBagName: 'vErrors'
})
/* eslint-disable no-new */
new Vue({
el: '#app',
store,
router,
render: h => h(App)
})
Can't find much on this issue. Anyone encountered something like this?
You did a very big update. Quite hard everything that changed. I will post few stuff that you need to check assuming everything else is quite up to date. Hope your problem is in one of these files
main.js:
import Vue from 'vue'
import "./plugins/vuetify";
import App from './App'
import router from './router'
import VeeValidate from 'vee-validate'
import store from './store'
Vue.config.productionTip = false
Vue.use(VeeValidate, {
errorBagName: 'vErrors'
})
/* eslint-disable no-new */
new Vue({
el: '#app',
store,
router,
render: h => h(App)
})
vuetify.js:
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'
Vue.use(Vuetify, {
iconfont: 'md',
})
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>temp</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
</head>
<body>
<noscript>
<strong>We're sorry but temp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
I am working on a project with angular 2 , firebase and ionic, I installed all the npm packages and angularfire2 as well.
But when i am using
import { AngularFireModule } from 'angularfire2';
when I open the app.module.ts the IDE(Visual Studio Code) says that there is no exported member called 'AngularFireModule'.
versions of the dependencies of my package.json file are
"dependencies": {
"#angular/common": "4.1.3",
"#angular/compiler": "4.1.3",
"#angular/compiler-cli": "4.1.3",
"#angular/core": "4.1.3",
"#angular/forms": "4.1.3",
"#angular/http": "4.1.3",
"#angular/platform-browser": "4.1.3",
"#angular/platform-browser-dynamic": "4.1.3",
"#ionic-native/core": "3.10.2",
"#ionic-native/splash-screen": "3.10.2",
"#ionic-native/status-bar": "3.10.2",
"#ionic/storage": "2.0.1",
"angularfire2": "^4.0.0-rc.1",
"firebase": "^4.1.3",
"ionic-angular": "3.4.2",
"ionicons": "3.0.0",
"rxjs": "5.4.0",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.12"
},
"devDependencies": {
"#ionic/app-scripts": "^2.0.2",
"typescript": "2.3.3"
},
Is there anything missing from the package.json or the problem is with incompatible versions?
I am currently working on Angular 2 app and uploading it on heroku.
When i simply upload without using any calling any class in div . it uploads on heroku when i use git push heroku master
like my appcomponent.html
<h1>
{{title}}
</h1>
<div>
<h2>Gtting started.....</h2>
</div>
till now it works fine. but as soon as i added these dives or any other div with styling
`<div class="footer-newsletter">
<div class="container-fluid">
<p style="color:#36b4d2">Search and Save</p>
<form>
<input type="search" name=query [(ngModel)]="query"
#quer="ngModel" class="form-control" placeholder="Search" required>
<button type="button" (click)="Search()" class="btn btn-custom">Search</button>
</form>
</div><!-- End .container-fluid -->
</div><!-- End .footer-newsletter -->
`
it gives me this error on heroku push master command
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/some.git'
i have added css files in assets and that works fine localy. can anyone please tell me what the reason behind this. i have wasted two days on it. any help will be highly appriciated.
Package.json
{
"name": "erecommender",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "node server.js",
"test": "ng test",
"postinstall": "ng build --aot -prod",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
},
"engines": {
"node": "6.10.2",
"npm": "4.5.0"
},
"private": true,
"dependencies": {
"#angular/common": "^2.3.1",
"#angular/compiler": "^2.3.1",
"#angular/core": "^2.3.1",
"#angular/forms": "^2.3.1",
"#angular/http": "^2.3.1",
"#angular/platform-browser": "^2.3.1",
"#angular/platform-browser-dynamic": "^2.3.1",
"#angular/router": "^3.3.1",
"angular-cli": "1.0.0-beta.28.3",
"core-js": "^2.4.1",
"express": "^4.15.2",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"
},
"devDependencies": {
"#angular/compiler-cli": "^2.3.1",
"#types/jasmine": "2.5.38",
"#types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.28.3",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "^4.3.0",
"typescript": "~2.0.3"
}
}
I'm using Angular 2 with materialize-CSS. The issue I'm having is when I shrink the page to where the hamburger appears for the side-nav, after I click the hamburger, the side-nav never pops up and the screen darkens significantly. It never slides out like it should.
My Component is below
import { Component, OnInit, ElementRef } from '#angular/core';
declare var jQuery: any;
#Component({
selector: 'core-app',
template: `
<div class="navbar">
<nav class="indigo">
<div class="nav-wrapper">
{{title}}
<a href="#" data-activates="nav-mobile" class="button-collapse" materialize="sideNav"
[materializeParams]="[{menuWidth: 300,edge: 'left', closeOnClick: true, draggable: true}]"><i class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li><a routerLink="/dashboard">Dashboard</a></li>
<li><a routerLink="/fast">Fast Words</a></li>
<li>extra link</li>
<li>Logout</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li><a routerLink="/dashboard">Dashboard</a></li>
<li><a routerLink="/fast">Fast Words</a></li>
<li><a routerLink="/dashboard">Dashboard</a></li>
<li><a routerLink="/fast">Fast Words</a></li>
</ul>
</div>
</nav>
</div>
<router-outlet></router-outlet>
`
})
export class AppComponent implements OnInit {
title = 'Rapid Words';
constructor(private el:ElementRef){}
ngOnInit() {
jQuery(this.el.nativeElement).find('.button-collapse').sideNav();
}
}
This is my index.html page. I commented out materialize CSS/jQuery, but then I lost all my styles.
<html>
<head>
<title>Language Forge | Review & Rapid Words</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- Import Materialize CSS -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<!-- Polyfill(s) for older browsers -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<base href="/">
<core-app>Loading...</core-app>
</body>
</html>
Here is my packageJS file. I believe I have all the correct dependencies:
"dependencies": {
"#angular/common": "~2.1.1",
"#angular/compiler": "~2.1.1",
"#angular/core": "~2.1.1",
"#angular/forms": "~2.1.1",
"#angular/http": "~2.1.1",
"#angular/platform-browser": "~2.1.1",
"#angular/platform-browser-dynamic": "~2.1.1",
"#angular/router": "~3.1.1",
"#angular/upgrade": "~2.1.1",
"angular-in-memory-web-api": "~0.1.13",
"angular2-materialize": "^6.1.1",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"jquery": "^2.2.4",
"materialize-css": "^0.97.8",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.39",
"zone.js": "^0.6.25"
},
"devDependencies": {
"#types/core-js": "^0.9.34",
"#types/node": "^6.0.45",
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3"
},
How can I resolve this so that side-nav slides out like it should?
Related stack overflow question, but does not solve my problem because I'm using angular 2. After adding this style tag to my component, the side-nav shows, but doesn't let me click off of it, and the screen stays dark.
materialize css: Always show side-nav even on mobile?
Code Pen - works okay in Code Pen so it must be related to Angular 2
https://codepen.io/abramjstamper/pen/BQLaQY
Figured out the problem, it was a combination of import issues. Hope this helps someone else experiencing the same issues with Angular2-Materialize.
index.html
<!-- Compiled and minified CSS -->
<link type="text/css" rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.css"/>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Import jQuery before materialize.js -->
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/materialize-css/dist/js/materialize.min.just sayin"></script>
main.ts
import 'angular2-materialize';
system config
map = {
'materialize-css': 'npm:materialize-css',
'angular2-materialize': 'npm:angular2-materialize',
'jquery': 'npm:jquery'
},
packages: {
'materialize-css': {
"format": "global",
"main": "dist/js/materialize",
"defaultExtension": "js"
},
'angular2-materialize': {
"main": "dist/index",
"defaultExtension": "js",
}
}