i am new to Angular and i have encountered a blank web page and the following error despite my application compiling successfully.
ERROR in src/app/app.module.ts:7:129 - error TS2306: File 'C:/Users/----------/news-app/node_modules/#angular/material/index.d.ts'
is not a module.
7 import { MatButtonModule, MatCardModule, MatMenuModule, MatToolbarModule, MatIconModule, MatSidenavModule, MatListModule } from '#angular/material';
In Angualar 9 material components can no longer be imported from #angular/material.
Use the individual secondary entry-points, such as #angular/material/button for MatButtonModule
https://github.com/angular/components/issues/17503
Related
I have this sample: https://stackblitz.com/edit/partehoras?file=src/styles.css
Where I have installed angular material
I have created this material.module where I export all the modules needed
Then I import this module in app.module
In styles.scss i have imported one
#import '#angular/material/prebuilt-themes/indigo-pink.css';
But when I try this in my template
<mat-card>
......
<mat-card>
I get this error
Any idea, please?
Thanks
ListadoEmpleadosComponent is missing from the list of declarations in app module and you also need to import HttpClientModule
declarations: [ AppComponent, ListadoEmpleadosComponent ]
I am new to Angular Dart. I have installed Dart, and added dart plugin in VS code. Then I created a bare bone project thru VS command pallette. But when I added this line in main.dart, I got build error. It is as recommended by angular dart i.e
angular dart
Here is my main.dart file.
import 'dart:html';
import 'package:angular/angular.dart';
import 'package:angular_web_application/app_component.dart' as ng;
import 'package:http/browser_client.dart';
#GenerateInjector([
ClassProvider(Client, useClass: BrowserClient),
])
void main() {
runApp(ng.AppComponentNgFactory);
}
Here is my app_component.dart
import 'package:angular/angular.dart';
#Component(
selector: 'my-app',
template: '<h1>Hello {{name}}</h1>',
)
class AppComponent {
var name = 'Angular';
}
In my index.html, I have this line
<my-app>Loading</my-app>
But I am facing build error for the line
runApp(ng.AppComponentNgFactory);
I get this error:
"message": "The name 'AppComponentNgFactory' is being referenced through the prefix 'ng', but it isn't defined in any of the libraries imported using that prefix.\nTry correcting the prefix or importing the library that defines 'AppComponentNgFactory'.
The factory is not declared in the app_component.dart.
It is generated by Angular compiler
import 'package:angular_web_application/app_component.template.dart' as ng;
Which should have the right implementation.
See What does somecomponent.template.dart import in AngularDart point to? for example.
I am trying to use mat-dialog in my angular custom element. I works fine when in the angular app but can't seem to bundle the material theme while building to custom element.
When i inspect the code outside of angular app, no style is attached to any of the cdk class. Everything seem to work fine when running in the angular server. How do i include the needed css with the custom element?
My app.module file
#NgModule({
[ ...
MatFormFieldModule,
MatIconModule,
MatSelectModule,
MatInputModule,
MatDialogModule,
...
],
providers: [ConnectBackendService],
entryComponents: [AppComponent, PopupComponent]
})
export class AppModule {
constructor(private injector: Injector) {
const el = createCustomElement(AppComponent, { injector });
customElements.define('my-element', <Function>el);
}
ngDoBootstrap() {}
}
and my styles.css file
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
My dialog should have absolute positioning, should be aligned to the center of the window and should have a backdrop. Currently, none of these applies to the dialog box
I had the same issue and i reported it to Google on their GitHub page for Angular components. It is now tagged as "Low-priority issue that needs to be resolved" by Google.
https://github.com/angular/components/issues/15968
Just letting you and anyone else who sees this thread know so that they can find a possible future fix in my github post when/if Google fixes this issue.
Fixed it by going to angular.json file, changed extractCss property to false and added styles.js to build files
When I try to compile my code, I get the following error
ERROR in MatTooltipModule is not an NgModule
My app module imports look like this
import {MatSliderModule, MatTooltipModule} from '#angular/material';
imports: [
MatTooltipModule,
MatSliderModule,
],
Why am I getting this error?
Try this:
import {MatSliderModule} from '#angular/material/slider';
I just started a new ruby on rails app with react using the webpacker gem. Im also using material-ui and eslint-config-airbnb. After running the linter Im getting this error:
Missing file extension "css" for "typeface-roboto" import/extensions.
eslintrc.json
module.exports = {
"extends": "airbnb",
"env": {
"browser": true,
},
};
index.jsx
import 'typeface-roboto'; // this is the import causing the issue
import React from 'react';
import ReactDOM from 'react-dom';
import Application from './app';
ReactDOM.render(<Application />, document.getElementById('root'));
Not sure why this is happening either, but you could try disabling the line for eslint:
import 'typeface-roboto'; // eslint-disable-line