By including Provider: MatDialog in the Constructur
constructor(groupService: GroupService, public dialog: MatDialog) {}
I get following error at runtime
Error: No provider for InjectionToken mat-dialog-scroll-strategy!
I have included the Matdialog in the "app.module.ts"
Do I need a different Provider for it and which one? I use angular-material 2.0.0b12
You need to include MatDialog Module in the imports.
import {MatDialogModule} from '#angular/material';
#NgModule({
imports :[MatDialogModule],
...
})
Edit 2022
You need to include MatDialog Module in the imports.
import {MatDialogModule} from '#angular/material/dialog';
#NgModule({
imports :[MatDialogModule],
...
})
This error also happens if you try to open dialog of a lazy loaded module from service with #Injectable({providedIn: 'root'}).
To fix it you have to either move that dialog to main module or remove providedIn notation and add it as provides: [] in lazy loaded module.
Import the dialog from import {MatDialogModule} from '#angular/material/dialog';
by adding following code to your module.ts file
import {MatDialogModule} from '#angular/material/dialog';
Then import it in imports as the following can see,
const MaterialComponent = [MatDialogModule];
Related
I am trying to set up component tests with cypress, vue3 and vite. With the Getting Started guide, I was able to successfully mount my component, however in my editor (vscode), it tells me that I cannot find the module or corresponding type declarations ts(2307).
I have added the global styles file in support/component.ts and nothing else.
// Import commands.js using ES2015 syntax:
import "./commands";
// Import global styles
import "../../src/styles/style.scss";
// Alternatively you can use CommonJS syntax:
// require('./commands')
import { mount } from "cypress/vue";
// Augment the Cypress namespace to include type definitions for
// your custom command.
// Alternatively, can be defined in cypress/support/component.d.ts
// with a <reference path="./component" /> at the top of your spec.
declare global {
namespace Cypress {
interface Chainable {
mount: typeof mount;
}
}
}
Cypress.Commands.add("mount", mount);
How do I get rid of the linter warning?
I have a Gradle plugin which codifies a collection of checks to perform on the codebase. I would like the plugin itself to be subject to the same checks.
Attempt 1
I found part of a solution here, which essentially tries to use buildSrc to produce a plugin which can then be applied from the main project.
This gives me an error someone else had also seen:
No signature of method: GradlePlugins.buildscript() is applicable for argument types: (GradlePlugins$_run_closure1) values: [GradlePlugins$_run_closure1#2e7cad0f]
Attempt 2
This was adapted from a second suggestion in the thread:
apply plugin: new GroovyScriptEngine(
[ file('src/main/java').absolutePath,
file('src/main/groovy').absolutePath,
file('src/main/resources').absolutePath ].toArray(new String[0]),
this.class.classLoader)
.loadScriptByName('acme/plugins/CommonPlugin.groovy')
But it seems like it can't find classes in the same package as the plugin:
Caused by: groovy.lang.MissingPropertyException: No such property: CheckStringsExtension for class: acme.plugins.CommonPlugin
Attempt 3
There was a comment on the other gist suggesting that it might not work if the plugin script contains a package declaration, so I also tried making a trivial wrapper:
import acme.plugins.CommonPlugin
import org.gradle.api.Plugin
import org.gradle.api.Project
class SelfApplyBootstrap implements Plugin<Project> {
#Override
void apply(Project project) {
new CommonPlugin().apply(project);
}
}
And then:
apply plugin: new GroovyScriptEngine(
[ file('src/main/java').absolutePath,
file('src/main/groovy').absolutePath,
file('src/main/resources').absolutePath ].toArray(new String[0]),
this.class.classLoader)
.loadScriptByName('SelfApplyBootstrap.groovy')
But I still get the same error:
Caused by: groovy.lang.MissingPropertyException: No such property: CheckStringsExtension for class: acme.plugins.CommonPlugin
Why does the following TypeScript code compile, but systemjs fails to load the dependencies correctly at runtime?
import { Observable } from 'rxjs';
let temp123 = new Observable<String>();
However, this works:
import { Observable } from 'rxjs/Observable';
let temp123 = new Observable<String>();
Specifically, the first code results in a .js file that contains the code:
var Observable_1 = require('rxjs');
var temp123 = new Observable_1.Observable();
but the second code generates this:
var Observable_1 = require('rxjs/Observable');
var temp123 = new Observable_1.Observable();
the line require('rxjs') fails with a 404 error because there is no file there. Why is the typescript compiler able to resolve this, but systemjs cannot load it at runtime?
Also noteworthy: This problem only happens if I do certain things with the Observable. For example, the following code works:
import { Observable } from 'rxjs';
let temp123: Observable<String> = null;
let xyz = temp123.first();
I can use the Observable, and call methods on it, without the TypeScript compiler generated a require('rxjs'). But I can't construct one, and I can't extend it either.
Versions:TypeScript 2.0.3, Systemjs 0.19.27, rxjs 5.0.0-beta.12
Why is the typescript compiler able to resolve this, but systemjs
cannot load it at runtime?
That's the way it works:
when you write import { Observable } from 'rxjs'; typescript finds rxjs folder in node_modules with package.json in it, which has
"typings": "Rx.d.ts"
that's type declarations file for rxjs, and that file contains
export { Observable } from './Observable';
which makes typescript to find another type declaration file in the same folder, Observable.d.ts, which has exported declaration for Observable class.
That's enough for your code to compile without errors.
If your code does not actually try to use Observable as a value, it will work, because typescript does unused reference elision - if Observable is used for type checking only, as in your second example, there will be no require('rxjs') call in generated javascrpt.
Now, SystemJS.
SystemJS does not have any default location to look for modules - it does not even recognise node_modules convention about package.json file with main property.
So, most likely, SystemJS in your example is configured like this:
SystemJS.config({
paths: {'npm:': 'node_modules/'},
map: {'rxjs': 'npm:rxjs'},
packages: {
rxjs: {
}
}
});
So, the module rxjs/Observable imported by this line
import { Observable } from 'rxjs/Observable';
is mapped to
node_modules/rxjs/Observable.js
because rxjs prefix matches map entry which together with paths maps it to node_modules/rxjs
Observable part comes through as is
.js extension is added because rxjs matches with rxjs package in systemjs config, and for any module that belongs to a package, SystemJS adds .js extension automatically unless defaultExtension is set to something else in that package config.
And it works, because the file node_modules/rxjs/Observable.js exists.
And that import works with typescript too, because node_modules/rxjs/Observable.d.ts exists too.
Finally, this does not work at runtime
import { Observable } from 'rxjs';
because it's mapped to node_modules/rxjs url, and there is no actual file there.
You can fix it by using main property in SystemJS package config:
packages: {
rxjs: {
main: 'Rx.js'
}
}
Now it's mapped to node_modules/rxjs/Rx.js, and that file actually exists and exports something named Observable, so it should work.
Checked with SystemJS 0.19.43, rxjs 5.0.3, typescript 2.1.5.
I used ScriptSharp before it was frozen. Since TypeScript is a developing OOP language I decided to try it. I use visual studio (if it matters). I have troubles making simple things I used to do in ScriptSharp. I didn't expect it would be that difficult.
What I want to do:
Create project A (Class Library Project) with module AssemblyA. AssemblyA module will have
some exported classes.
Create project B (Class Library Project) with module AssemblyB. AssemblyB will reference
AssemblyA types and use them as parameter types and etc.
Can you give me some guide how to make it work or sample? Thanks.
UPDATE:
What's for I can add reference to another typescript project? It would be great if output of referenced project was copied to that project.
Rather than having assemblies and modules, you have modules that can be organised into namespace-like hierarchies:
Internal Modules
Internal Module Example:
module AssemblyA {
export module ModuleA {
export class Example {
}
}
export module ModuleB {
export class Example {
}
}
}
var x = new AssemblyA.ModuleA.Example();
var y = new AssemblyA.ModuleB.Example();
You can also define these internal modules across multiple files...
modulea.ts
module AssemblyA {
export module ModuleA {
export class Example {
}
}
}
moduleb.ts
///<reference path="./modulea.ts" />
module AssemblyA {
export module ModuleB {
export class Example {
}
}
}
app.ts
///<reference path="./modulea.ts" />
///<reference path="./moduleb.ts" />
var x = new AssemblyA.ModuleA.Example();
var y = new AssemblyA.ModuleB.Example();
External Modules
And if you want to write really large applications, you can use external modules (where the file represents the module).
assemblya/modulea.ts
export class Example {
}
assemblya/moduleb.ts
export class Example {
}
app.ts
import ModuleA = require('./assemblya/modulea');
import ModuleA = require('./assemblya/modulea');
var x = new ModuleA.Example();
var y = new ModuleB.Example();
I found a workaround for my problem:
In project AssemblyA:
Specify "Combine javascript output into file" to "..\AssemblyB\AssemblyA.js".
Set up Generate Declaration files into true.
In project AssemblyB:
Add reference for intellisense in app.ts ///<reference path="../AssemblyA/AssemblyA.d.ts" />
Add reference to generated file in html: <script src="AssemblyA.js"></script>
In project B you can use any namespace aliases (for example: import AssemblyANS2 = AssemblyA.NS2;) or fully qualified name.
Put classes in different files, Use same module name and there is no need to refer to ts files.
What I didn't like is that referencing project doesn't make any sense, but I wanted steps 1-2-3-4 to be done automatically after adding reference.
Also "Redirect javascript output to directory" setting doesn't work when "Combine javascript output into one file" is specified. It's also weird that I can specify file path in second options. I expected these settings to be combined with Path.Combine.
Maybe my solution is not ideal, but it's exactly what I need. Feel free to suggest better idea.
I'm working on a Dart project where I have created a custom element with the Web_ui package that has some animation. What I was hoping to do is to have within the dart code for the element something like this....
class MyElement extends WebComponent {
...
void StartAnimation() { ... }
...
}
and then in the main() function of the dart app itself I have something like this...
void main() {
MyElement elm = new MyElement();
elm.StartAnimation(); // Kicks off the animation
}
The Dart editor tells me that Directly constructing a web component is not currently supported. It then says to use WebComponent.forElement -- but I'm not clear on how to use that to achieve my goal.
While you can't yet import web components into a Dart file, you can access them via query() and .xtag. xtag gives you a reference the web component instance that the element is associated with. You do have to be careful that you allow the Web UI setup to complete so that xtag is given a value.
Here's an example:
import 'dart:async';
import 'dart:html';
import 'package:web_ui/web_ui.dart';
main() {
Timer.run(() {
var myElement = query('#my-element').xtag;
myElement.startAnimation();
});
}
This will get better with the ability to import components, directly subclass Element and maybe some lifecycle events that guarantee that you get the correct class back from a query(). This is what the exemple should look like in the future:
import 'dart:async';
import 'dart:html';
import 'package:web_ui/web_ui.dart';
import 'package:my_app/my_element.dart';
main() {
MyElement myElement = query('#my-element');
myElement.startAnimation();
}