Im familiar with this error but I only started seeing this after updating to Angular Material 6.4.7.
All my modules refer to my own MaterialModule which exports MatDialogModule. I dont have any provider setup for MatDialogRef - havent needed to before.
And whats the deal with [MatDialogTitle -> MatDialogRef]? What does that mean?
Everything seems to be working fine in dev and prod builds. I cant figure out what is causing this.
Is there a way to trace this back to something??
Thanks
core.js:1673 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[MatDialogTitle -> MatDialogRef]:
StaticInjectorError(Platform: core)[MatDialogTitle -> MatDialogRef]:
NullInjectorError: No provider for MatDialogRef!
Error: StaticInjectorError(AppModule)[MatDialogTitle -> MatDialogRef]:
StaticInjectorError(Platform: core)[MatDialogTitle -> MatDialogRef]:
NullInjectorError: No provider for MatDialogRef!
at NullInjector.push../node_modules/#angular/core/fesm5/core.js.NullInjector.get (core.js:1062)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1244)
at StaticInjector.push../node_modules/#angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1244)
at StaticInjector.push../node_modules/#angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
at resolveNgModuleDep (core.js:8369)
at NgModuleRef_.push../node_modules/#angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9057)
at resolveDep (core.js:9422)
at NullInjector.push../node_modules/#angular/core/fesm5/core.js.NullInjector.get (core.js:1062)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1244)
at StaticInjector.push../node_modules/#angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1244)
at StaticInjector.push../node_modules/#angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
at resolveNgModuleDep (core.js:8369)
at NgModuleRef_.push../node_modules/#angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9057)
at resolveDep (core.js:9422)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:3811)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
at invokeTask (zone.js:1540)
Update: So for my issue, I was able to solve it using providers from this Bug issue [https://github.com/angular/material2/issues/8419]. I added the following 2 lines to my app.module providers list:
{ provide: MatDialogRef, useValue: {} },
{ provide: MAT_DIALOG_DATA, useValue: [] },
The bug refers to issues with testing, but for me I had one MatDialog working, but the other would throw the error.
Hope this helps, adym
You are having this issue because you added a reference to your dialog on your html layout. Please remove that reference and make sure your add your dialog on the entryComponents property on the module using it. See angular material docs here. Your module declaration should look like this.
#NgModule({
imports: [
// ...
MatDialogModule
],
declarations: [
AppComponent,
ExampleDialogComponent
],
entryComponents: [
ExampleDialogComponent // THE MAGIC HAPPENDS HERE
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Yes, you have to write in entryComponents in your #NgModule, same as below
entryComponents: [DialogComponent, GetDialogContent],
in your MATERIAL.MODULE.TS
import {MatDialogRef} from '#angular/material';
#NgModule({
providers: [MatDialogRef]
})
Related
I am trying to create a new project using NestJS and I want to use a MySQL database with the help of TypeORM but I can't get things going anywhere. I am following this very simple tutorial https://docs.nestjs.com/techniques/database#database and I am still unable to connect to a MySQL database.
I've installed all the dependencies:
"dependencies": {
"#nestjs/common": "^7.5.1",
"#nestjs/core": "^7.5.1",
"#nestjs/platform-express": "^7.5.1",
"#nestjs/typeorm": "^7.1.5",
"mysql": "^2.18.1",
"mysql2": "^2.2.5",
"reflect-metadata": "^0.1.13",
"rimraf": "^3.0.2",
"rxjs": "^6.6.3",
"typeorm": "^0.2.31"
}
I don't use any entities in this example, but even when I tried to used entities and I defined them in "entities: []" in app-module.ts with a global path "dist/**/*.entity{ .ts,.js}", it still didn't work.
import { Module } from '#nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { TypeOrmModule } from '#nestjs/typeorm';
#Module({
imports: [TypeOrmModule.forRoot({
type: 'mysql',
host: 'localhost',
port: 3306,
username: 'root',
password: 'root',
database: 'test',
entities: ["dist/**/*.entity{.ts,.js}"],
synchronize: true,
})],
controllers: [AppController],
providers: [AppService],
})
export class AppModule {
constructor() {}
}
One very important thing to note is that for some reason, I cannot run "typeorm" commands, as if I've never installed it when it clearly is in node_modules. I can run a "typeorm" command only if I use "npx" before it. I peeked at other stackoverflow threads but I didn't find anything that could help me.
Is my project unable to run because for some reason my system cannot find typeorm? Thanks in advance.
Edit:
Here's also the error that I get.
[Nest] 14092 - 02/24/2021, 1:55:56 PM [TypeOrmModule] Unable to connect to the database. Retrying (6)... +5082ms
Error: connect ECONNREFUSED 127.0.0.1:3306
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1141:16)
I fixed my problem. It was a very stupid mistake of mine because because I forgot to start my MySQL server locally and it makes perfect sense why the NestJS app couldn't connect to it. I thought the problem was somewhere in my code.
Sorry for wasting everyone's time, I appreciate your answers!
It could help you to solve may be! You have to install typeorm module first. If you installed typeorm module then check your typeorm config file. Here is one example with postgres. Instead of postgres you have to use mysql
import { Global, Module } from "#nestjs/common";
import { TypeOrmModule } from "#nestjs/typeorm";
import { ConfigModule, ConfigService } from "#nestjs/config";
import { TodoEntity } from "src/entities/todo.entity";
#Global()
#Module({
imports: [
TypeOrmModule.forRootAsync({
imports:[ConfigModule],
useFactory: (configService: ConfigService) => ({
type:'postgres',
host:'localhost',
port:5432,
username:'postgres',
password:'postgres',
database:'postgres',
schema:'public',
synchronize: true,
logging: true,
entities:[TodoEntity],
}),
inject: [ConfigService],
}),
],
})
export class TypeOrmConfigModule{}
You can also take help from "https://typeorm.io/#/connection"
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
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 .
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 :)