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 ]
Related
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
I'm new to Webpack 2. When my bundles are created, some modules are duplicated across bundles. Here's my webpack config:
module.exports = {
node: {
fs: "empty"
},
context: __dirname,
entry: {
"vendor": "./src/vendor-bundle-config.ts",
"app" : "./src/app/app.module"
},
output: {
filename: '[name].js',
path: './'
}
}
and my vendor-bundle-config:
// Angular
import '#angular/platform-browser';
import '#angular/platform-browser-dynamic';
import '#angular/core';
import '#angular/common';
import '#angular/http';
import '#angular/router';
// RxJS
import 'rxjs';
No matter what I do, rxjs (and maybe other modules, I haven't checked further) is duplicated across both bundles. The odd thing is that I'm testing this all out with a very basic Angular project - it has the AppComponent and that's it. The only place rxjs is referenced currently is in package.json and vendor-bundle-config
I've tried configuring the CommonsChunkPlugin but it didn't seem to do anything. I'm not sure if that's something that I should look into further.
EDIT: Here's the config for the CommonsChunkPlugin as best I can recall it:
new webpack.optimize.CommonsChunkPlugin({
name: "commons",
filename: "commons.js",
})
This is from the webpack documentation example.
What am I missing/doing wrong?
Thanks.
Figured it out. I was missing the minChunks option in my CommonsChunkPlugin configuration. It needs to look like this to work:
new webpack.optimize.CommonsChunkPlugin({
name: "commons",
filename: "commons.js",
minChunks: 2 <-- this is what I was missing
})
The plugin's name option is the chunk's name you want to separate from entries.So,change it to vendor. See the code splitting for more details.
I tried to use the router in angular2-beta.20 in Dart with the HashLocationStrategy.
But I couldn't find any docs, except for
this link to angular2-beta.15 docs, which are incomplete.
The example shows TypeScript imports instead of Dart ones.
So I tried to import package:angular2/router.dart, but the Dart Analyzer keeps complaining that it can not find LocationStrategy and HashLocationStrategy
Also I don't know, how to write the import exactly, because a top-level provide function, as in the example above, seems non existent.
provide(LocationStrategy, {useClass: HashLocationStrategy})
After some research I found the following:
LocationStrategy and HashLocationStrategy are now part of
package:angular2/platform/common.dart instead of package:angular2/router.dart.
The bootstrap()- method is platform specific, so we need to import package:angular2/platform/browser.dart.
We need to import package:angular2/router.dart to have ROUTER_PROVIDERS available in bootstrap() method.
Here is a working code example for the dart file initializing :
// needed to import "bootstrap" method
import 'package:angular2/platform/browser.dart';
// needed to import LocationStrategy and HashLocationStrategy
import 'package:angular2/platform/common.dart';
// needed for Provider class
import 'package:angular2/angular2.dart';
// needed to import ROUTER_PROVIDERS
import 'package:angular2/router.dart';
// import your app_component as root component for angular2
import 'app_component.dart';
void main() {
bootstrap(AppComponent, [
ROUTER_PROVIDERS,
const Provider(LocationStrategy, useClass: HashLocationStrategy)
]);
}
Hope this helps somebody! :)
I'm new to Angular2, till now I got succeeded to write the 5 Min Quickstart.
I want to learn how to use routing in Angular2 and Dart, unfortunately I couldn't find any example on the web yet. most of the articles are talking about routing with typescript which I couldn't get it work with dart.
I'm using webstorm with dart plugin.
import 'dart:html';
import 'package:angular2/angular2.dart';
import 'package:angular2/bootstrap.dart';
import 'package:angular2/router.dart';
#Component(selector: 'my-app', template: '<h1>My First Angular 2 App</h1>')
class AppComponent {}
void main() {
bootstrap(AppComponent);
}
Try this HashLocationStrategy example.
https://github.com/ng2-dart-samples/todomvc
I found this tutorial quite helpful to set up routing in my application.