I am using vue-cli (6.3.0), node (10.8.0) and npm (6.3.0) and have set up a basic project using this tutorial Build your first vue.js components I came to add vue-awesome
$ npm install vue-awesome
$ npm install
and I can see that vue-awesome has been added to package.json
I have a file componets/rating.vue
<template>
<div>
<ul>
<li><icon name="star"/></li>
<li><icon name="star"/></li>
<li><icon name="star"/></li>
<li><icon name="star-o"/></li>
<li><icon name="star-o"/></li>
</ul>
<span>3 of 5</span>
</div>
</template>
<script>
import 'vue-awesome/icons/star'
import 'vue-awesome/icons/star-o'
import Icon from 'vue-awesome/components/Icon'
export default {
components: { Icon }
}
</script>
and main.js is,
import Vue from 'vue'
import App from './App'
import router from './router'
import Rating from './components/Rating'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
template: '<Rating/>',
components: {
Rating
}
})
npm run dev
gives me this error,
ERROR Failed to compile with 1 errors
7:11:40 PM
This dependency was not found:
vue-awesome/icons/star-o in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/Rating.vue
To install it, you can run: npm install --save
vue-awesome/icons/star-o
So I ran $ npm install --save vue-awesome/icons/star-o
this gives me
npm ERR! code ENOLOCAL npm ERR! Could not install from
"vue-awesome/icons/star-o" as it does not contain a package.json file.
npm ERR! A complete log of this run can be found in: npm ERR!
/Users/shanegibney/.npm/_logs/2018-08-15T18_18_10_343Z-debug.log
Any help on what might be causing this would be very much appreciated,
Thanks
you can use regular/star :
<v-icom name='regular/star'></v-icon>
I got below error, try adding signature to my angular 6 project
node module : - angular-signature-pad
error: - ERROR in src/app/app.module.ts(5,41): error TS2307: Cannot find module 'angular-signature-pad'.
Things to check?
1) Did you install the package ?
npm install angular-signature-pad --save
2) Import the package in app module.
import { AngularSignaturePadModule } from 'angular-signature-pad';
#NgModule({
imports: [
...
AngularSignaturePadModule.forRoot()
]
...
})
export class AppModule { }
Maybe possibility, It may not be working in angular 4 plus.
https://github.com/BioPhoton/angular-signature-pad/issues/2
try updating node.js to version 16+
or
update angular cli
ng update #angular/cli #angular/core
This question already has answers here:
Angular 2.0 router not working on reloading the browser
(32 answers)
Closed 6 years ago.
I have stored my single-page application in my server within a folder named as "myapp". I have changed the URL in the base to http://example.com/myapp/`.
My project has two pages. So I implement Angular 2 routing. I set the default page as login. When I type http://example.com/myapp/ in my browser it will redirect automatically to http://example.com/myapp/login. But if refresh that page I get a 404 error, saying that http://example.com/myapp/login is not found.
But if I run my project using the lite server everything is working. In this case the base URL in index.html will be "/". How do fix it?
Update for Angular 2 final version
In app.module.ts:
Add imports:
import { HashLocationStrategy, LocationStrategy } from '#angular/common';
And in NgModule provider, add:
{provide: LocationStrategy, useClass: HashLocationStrategy}
Example (app.module.ts):
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { HashLocationStrategy, LocationStrategy } from '#angular/common';
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
bootstrap: [AppComponent],
})
export class AppModule {}
Alternative
Use RouterModule.forRoot with the {useHash: true} argument.
Example:(from angular docs)
import { NgModule } from '#angular/core';
...
const routes: Routes = [//routes in here];
#NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(routes, { useHash: true })
],
bootstrap: [AppComponent]
})
export class AppModule { }
For people (like me) who really want PathLocationStrategy (i.e. html5Mode) instead of HashLocationStrategy, see How to: Configure your server to work with html5Mode from a third-party wiki:
When you have html5Mode enabled, the # character will no longer be used in your URLs. The # symbol is useful because it requires no server side configuration. Without #, the URL looks much nicer, but it also requires server side rewrites.
Here I only copy three examples from the wiki, in case the Wiki get lost. Other examples can be found by searching keyword "URL rewrite" (e.g. this answer for Firebase).
Apache
<VirtualHost *:80>
ServerName my-app
DocumentRoot /path/to/app
<Directory /path/to/app>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow HTML5 state links
RewriteRule ^ index.html [L]
</Directory>
</VirtualHost>
Documentation for rewrite module
nginx
server {
server_name my-app;
root /path/to/app;
location / {
try_files $uri $uri/ /index.html;
}
}
Documentation for try_files
IIS
<system.webServer>
<rewrite>
<rules>
<rule name="Main Rule" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
In fact, it's normal that you have a 404 error when refreshing your application since the actual address within the browser is updating (and without # / hashbang approach). By default, HTML5 history is used for reusing in Angular2.
To fix the 404 error, you need to update your server to serve the index.html file for each route path you defined.
If you want to switch to the HashBang approach, you need to use this configuration:
import {bootstrap} from 'angular2/platform/browser';
import {provide} from 'angular2/core';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {LocationStrategy, HashLocationStrategy} from '#angular/common';
import {MyApp} from './myapp';
bootstrap(MyApp, [
ROUTER_PROVIDERS,
{provide: LocationStrategy, useClass: HashLocationStrategy}
]);
In this case, when you refresh the page, it will be displayed again (but you will have a # in your address).
This link could help you as well: When I refresh my website I get a 404. This is with Angular2 and firebase.
Hope it helps you,
Thierry
I had the same problem. My Angular application is running on a Windows server.
I solved this problem by making a web.config file in the root directory.
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="AngularJS" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
Perhaps you can do it while registering your root with RouterModule. You can pass a second object with property useHash:true like the below:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { ROUTES } from './app.routes';
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
RouterModule.forRoot(ROUTES ,{ useHash: true }),],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
For people reading this that use Angular 2 rc4 or later, it appears LocationStrategy has been moved from router to common. You'll have to import it from there.
Also note the curly brackets around the 'provide' line.
main.ts
// Imports for loading & configuring the in-memory web api
import { XHRBackend } from '#angular/http';
// The usual bootstrapping imports
import { bootstrap } from '#angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '#angular/http';
import { AppComponent } from './app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';
import { Location, LocationStrategy, HashLocationStrategy} from '#angular/common';
bootstrap(AppComponent, [
APP_ROUTER_PROVIDERS,
HTTP_PROVIDERS,
{provide: LocationStrategy, useClass: HashLocationStrategy}
]);
If you're running Angular 2 through ASP.NET Core 1 in Visual Studio 2015, you might find this solution from Jürgen Gutsch helpful. He describes it in a blog post. It was the best solution for me. Place the C# code provided below in your Startup.cs public void Configure() just before app.UseStaticFiles();
app.Use( async ( context, next ) => {
await next();
if( context.Response.StatusCode == 404 && !Path.HasExtension( context.Request.Path.Value ) ) {
context.Request.Path = "/index.html";
await next();
}
});
I'm working on an apollo-express graphql server. I attempted to integrate the module 'graphql-type-json' but when I followed this description on how to integrate, I've tried many things but it seems that the type isn't being passed to the resolver correctly - but I've hit a wall in my debugging and could use a little help. Here is a summary of what I'm doing.
import { makeExecutableSchema } from 'graphql-tools';
const GraphQLJSON = require('graphql-type-json');
//Have also tried import GraphQLJSON from 'graphql-type-json';
const schema = `
scalar JSON
type Device {
deviceconfig: JSON
}
type Query {
foo: Foo
}
`;
const resolveFunctions = {
JSON: GraphQLJSON,
//JSON: {return GraphQLJSON} stops error but other issues come up...
Query: ...
};
const jsSchema = makeExecutableSchema({
typeDefs: schema,
resolvers: resolveFunctions,
resolverValidationOptions: {
requireResolversForNonScalar: false,
},
allowUndefinedInResolve: true,
printErrors: true,
});
Not sure if it's relevant but there are a few issues with my npm:
graphql-type-json#0.1.4
UNMET PEER DEPENDENCY graphql#0.8.2 invalid
├─┬ graphql-tools#0.4.2
│ ├── UNMET PEER DEPENDENCY graphql#^0.5.0 || ^0.6.0
npm ERR! peer dep missing: graphql#^0.6.1 || ^0.7.0, required by apollo-server#0.3.3
npm ERR! peer dep missing: graphql#^0.5.0, required by graphql-tools#0.4.2
npm ERR! extraneous: casual#1.5.8 /home/apollo/node_modules/casual
npm ERR! extraneous: mongoose#4.6.6 /home/apollo/node_modules/mongoose
npm ERR! extraneous: mysql-events#0.0.8 /home/apollo/node_modules/mysql-events
npm ERR! peer dep missing: graphql#^0.5.0 || ^0.6.0, required by express-widgetizer#0.5.11
I resolved custom scalar JSON like this in resolvers
JSON: {
__serialize(value) {
return GraphQLJSON.parseValue(value);
} }
And It worked fine for me. I think it will help you
I have setup the angular2-google-map with angular2 application.
And here is the app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { AgmCoreModule} from 'angular2-google-maps/core';
#NgModule({
imports: [ BrowserModule, AgmCoreModule.forRoot({apiKey: 'AIzaSyAe3ci9yavJcWt7MaJE8DusAuZo-QeRqkU'}) ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
})
export class AppModule { }
And i installed the angular2-google-maps with the command,
npm install angular2-google-maps --save
which got successfully installed. when i run the application with npm start,
it shows an error saying,
http://localhost:3000/angular2-google-maps/core Failed to load
resource: the server responded with a status of 404 (Not Found)
but i can see the angular2-google-maps folder inside the node_modules.
what is the issue?
You forgotten to add map for in system.config.js
'angular2-google-maps/core': 'npm:angular2-google-maps/core/core.umd.js'
By adding above to systemjs configuration. Module loader will understand to load core.umd.js when you tries to import angular2-google-maps/core .