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 .
Related
i tried to use Active Reports in Angular 8 and i did all the steps needed from this website,https://www.grapecity.com/activereportsjs/docs/GettingStarted/QuickStart/QuickStart-Angular
Still i get this error when i try to compile my app :
ERROR in The target entry-point "#grapecity/activereports-angular" has missing dependencies:
- rdlx-model
- #grapecity/ar-js-viewer/ExportPanel
- #grapecity/viewer-core
- #grapecity/ar-js-viewer
- #grapecity/viewer-core/features/search
and this is my code :
In App.Component.Html
gc-activereports-viewer [height]="height" [availableExports]="availableExports" (documentLoaded)="onDocumentLoaded($event)" #reportviewer></gc-activereports-viewer
In App.Module.Ts
import { BrowserModule } from '#angular/platform-browser';<br />
import { NgModule } from '#angular/core';<br />
import { ActiveReportsModule } from '#grapecity/activereports-angular';
import { AppComponent } from './app.component';
#NgModule({<br />
declarations: [<br />
AppComponent<br />
],<br />
imports: [
BrowserModule,
ActiveReportsModule
],
providers: [],
bootstrap: [AppComponent]
})<br />
export class AppModule { }
In App.Component.Ts
i used the exact same Code from the website.(Grapecity.com)
and the rest of the steps;
i used to run this Command as adminstrator **npm install #grapecity/activereports-angular** and it didn't work either
**CMD page shows me this message :
**<br /> D:\Angular Projects\Reporter-so> npm install #grapecity/activereports-angular<br />
npm WARN #grapecity/activereports-angular#1.1.0 requires a peer of #angular/common#^7.0.0 || ^8.0.0 but none is installed. You must install peer dependencies yourself.<br />
npm WARN #grapecity/activereports-angular#1.1.0 requires a peer of #angular/core#^7.0.0 || ^8.0.0 but none is installed. You must install peer dependencies yourself.<br />
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#2.1.2 (node_modules\fsevents):<br />
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
Write this code in tsconfig.app.json
"angularCompilerOptions": {
"enableIvy": false
}
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 trying to update react-router to v2.6 and react-router-relay to v0.7 in my app but I'm struggling to follow the changelogs to address all breaking changes. I think I addressed all changes but I still can't make it work.
Warning: [react-router] Location "/" did not match any routes
Here is a step by step guide on what I did to address the changes. First I updated the npm modules.
My previous package.json where everything worked:
"dependencies": {
"babel-polyfill": "^6.9.1",
"babel-runtime": "^6.9.2",
"graphiql": "0.7.3",
"graphql": "^0.6.2",
"history": "1.13.1",
"isomorphic-fetch": "^2.1.1",
"react": "^15.2.1",
"react-addons-shallow-compare": "^15.2.1",
"react-dom": "^15.2.1",
"react-loader": "^2.0.0",
"react-relay": "^0.9.2",
"react-router": "1.0.0-rc3",
"react-router-relay": "^0.7.0",
"superagent": "^1.2.0"
},
"devDependencies": {
"babel-core": "^6.11.4",
"babel-eslint": "^6.1.2",
"babel-jest": "^13.2.2",
"babel-loader": "^6.2.4",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"babel-preset-stage-1": "^6.5.0",
"babel-preset-stage-2": "^6.11.0",
"babel-relay-plugin": "^0.9.2",
"jest-cli": "^12.1.1",
"react-addons-test-utils": "^15.2.1",
"webpack": "^1.13.1"
},
My new package.json, where I'm getting errors:
"dependencies": {
"babel-polyfill": "^6.9.1",
"babel-runtime": "^6.9.2",
"graphiql": "0.7.3",
"graphql": "^0.6.2",
"isomorphic-fetch": "^2.1.1",
"react": "^15.2.1",
"react-addons-shallow-compare": "^15.2.1",
"react-dom": "^15.2.1",
"react-loader": "^2.0.0",
"react-relay": "^0.9.2",
"react-router": "^2.6.0",
"react-router-relay": "^0.13.3",
"superagent": "^1.2.0"
},
"devDependencies": {
"babel-core": "^6.11.4",
"babel-eslint": "^6.1.2",
"babel-jest": "^14.0.0",
"babel-loader": "^6.2.4",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"babel-preset-stage-1": "^6.5.0",
"babel-preset-stage-2": "^6.11.0",
"babel-relay-plugin": "^0.9.2",
"jest-cli": "^12.1.1",
"react-addons-test-utils": "^15.2.1",
"webpack": "^1.13.1"
},
I removed the history module because it is now a direct dependency of react-router. Once I installed the latest modules, I reloaded my page and got the following errors:
Error 1:
Warning: [react-router] It appears you have provided a deprecated history object to <Router/>, please use a history provided by React Router with import { browserHistory } from 'react-router' or import { hashHistory } from 'react-router'. If you are using a custom history please create it with useRouterHistory, see https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#using-history-with-router for details.
Error 2:
Warning: Failed context type: Invalid prop/context relay supplied to Relay(App), expected undefined to be an object conforming to the RelayEnvironment interface.
in Relay(App) (created by RouterContext)
in RouterContext (created by Router)
in Router
Error 3:
Warning: Failed context type: Required context route was not specified in Relay(App).
in Relay(App) (created by RouterContext)
in RouterContext (created by Router)
in Router
Error 4:
Uncaught Invariant Violation: RelayContainer: Relay(App) was rendered with invalid Relay context undefined. Make sure the relay property on the React context conforms to the RelayEnvironment interface.
The first error gives a handy link to the upgrade-guides for react-router, so I followed it and updated my app.js file accordingly.
Before my changes it looked this:
import babelPolyfill from 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactRouterRelay from 'react-router-relay';
import Loader from 'react-loader';
import { Router, Route } from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import WelcomeQueries from './queries/WelcomeQueries';
import AppQueries from './queries/AppQueries';
import LandingQueries from './queries/LandingQueries';
import App from './components/app';
import Landing from './components/landing';
import './relay';
const renderProps = {
renderLoading: () => <Loader />,
};
ReactDOM.render((
<Router history={createBrowserHistory()} createElement={ReactRouterRelay.createElement}>
<Route component={App} queries={AppQueries} {...renderProps}>
<Route path="/myapp" component={Landing} queries={LandingQueries} {...renderProps} />
</Route>
<Route path="/myapp/tracks" component={Welcome} queries={WelcomeQueries} {...renderProps}/>
</Router>
), document.getElementById('myapp-body'));
Attempt 1
Using the update guide to 2.x I've changed my app.js file to use a custom history like this:
import babelPolyfill from 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactRouterRelay from 'react-router-relay';
import Loader from 'react-loader';
import { Router, Route, useRouterHistory } from 'react-router'
import { createHashHistory } from 'history'
import WelcomeQueries from './queries/WelcomeQueries';
import AppQueries from './queries/AppQueries';
import LandingQueries from './queries/LandingQueries';
import App from './components/app';
import Landing from './components/landing';
import './relay';
const renderProps = {
renderLoading: () => <Loader />,
};
const appHistory = useRouterHistory(createHashHistory)({ queryKey: false })
ReactDOM.render((
<Router history={appHistory} createElement={ReactRouterRelay.createElement}>
<Route component={App} queries={AppQueries} {...renderProps}>
<Route path="/myapp" component={Landing} queries={LandingQueries} {...renderProps} />
</Route>
<Route path="/myapp/tracks" component={Welcome} queries={WelcomeQueries} {...renderProps}/>
</Router>
), document.getElementById('myapp-body'));
This then gives me the following error in the browser:
Error 5
Warning: [react-router] Location "/" did not match any routes
I believe that is the solution I want.. However I wasn't sure, so I also tried going the Browser (HTML5 pushState) History way and tried the following change:
Attempt 2
import babelPolyfill from 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactRouterRelay from 'react-router-relay';
import Loader from 'react-loader';
import { Router, Route, browserHistory } from 'react-router'
import WelcomeQueries from './queries/WelcomeQueries';
import AppQueries from './queries/AppQueries';
import LandingQueries from './queries/LandingQueries';
import App from './components/app';
import Landing from './components/landing';
import './relay';
const renderProps = {
renderLoading: () => <Loader />,
};
const appHistory = useRouterHistory(createHashHistory)({ queryKey: false })
ReactDOM.render((
<Router history={browserHistory} createElement={ReactRouterRelay.createElement}>
<Route component={App} queries={AppQueries} {...renderProps}>
<Route path="/myapp" component={Landing} queries={LandingQueries} {...renderProps} />
</Route>
<Route path="/myapp/tracks" component={Welcome} queries={WelcomeQueries} {...renderProps}/>
</Router>
), document.getElementById('myapp-body'));
When loading this, I get back errors 2, 3 and 4. I think Attempt 1 is the correct approach but I don't know what this error means and googling it, gave me tons of answers (1, 2, which linked me to 3 and even 4 with IndexRoute), which I tried but none of the answers worked.
My App.js file looks like this, just for reference:
import React from 'react';
import Relay from 'react-relay';
import Top from './top';
export class App extends React.Component {
render() {
return (
<div>
<Top viewer={this.props.viewer}/>
{this.props.children}
</div>
);
}
}
export default Relay.createContainer(App, {
fragments: {
viewer: () => Relay.QL`
fragment on Viewer {
${Top.getFragment('viewer')}
}
`,
},
});
I'm not 100% sure if this might be the reason but I know that react-router v2.0.0-rc6 had a breaking change with the top level Router export being removed but I don't really know what that means for me? Does that I can't use Router anymore? If so, what am I supposed to instead?
After days of research and trial and error, I'm giving up and hope that someone here can help. Any pointers in the right direction would be greatly appreciated.
Finally got an answer to this question and had to add the following changes to make my code work again:
import babelPolyfill from 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import Loader from 'react-loader';
import Relay from 'react-relay';
import useRelay from 'react-router-relay';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import applyRouterMiddleware from 'react-router/lib/applyRouterMiddleware';
import WelcomeQueries from './queries/WelcomeQueries';
import AppQueries from './queries/AppQueries';
import LandingQueries from './queries/LandingQueries';
import App from './components/app';
import Landing from './components/landing';
import './relay';
ReactDOM.render((
<Router
history={browserHistory}
render={applyRouterMiddleware(useRelay)}
environment={Relay.Store}>
<Route
component={App}
queries={AppQueries}
render={({ props }) => props ? <App {...props} /> : <Loader />}>
<Route
path="/myapp"
component={Landing}
queries={LandingQueries}
render={({ props }) => props ? <Landing {...props} /> : <Loader />} />
</Route>
<Route
path="/myapp/tracks"
component={Welcome}
queries={WelcomeQueries}
render={({ props }) => props ? <Welcome {...props} /> : <Loader />} />
</Router>
), document.getElementById('myapp-body'));
Maybe this will help someone else :)
I have a module module-A which has the following in index.js
import SomeModule from './lib/some-module'
import AnotherModule from './lib/another-module'
module.exports ={
SomeModule: SomeModule,
AnotherModule: AnotherModule
}
I then use this module-A from another module-B:
import SomeModule from `module-A`
I now want to build module-B for the browser, so I use browserify from the module-B cwd: [I am using babel 6.0]
browserify index.js -t [ babelify --presets [ es2015 ] ]
This throws an error as
import SomeModule from './lib/some-module'
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
Is there anyway I can export modules using es6 export and import syntax and yet build properly for the browser.