import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule, Routes } from '#angular/router';
import { LmfinComponent } from '../app/lmfin/lmfin.component';
import { MfinComponent } from './mfin/mfin.component';
import { GenFunctionProvider } from './gen-function.module';
import {DetailpembayaranComponent } from './detailpembayaran/detailpembayaran.component';
const appRoutes:Routes = [ //removed export
{ //removed square bracket
path: '',
redirectTo: '/mfin',
pathMatch: 'full'
},{
path: 'list',
component: LmfinComponent
},{
path: 'mfin/:id',
component: MfinComponent
},{
path: 'detailpembayaran',
component: DetailpembayaranComponent
}
];
#NgModule({
imports: [
CommonModule,
RouterModule.forRoot(appRoutes, {useHash:true})
],
declarations: []
})
export class AppRoutingModule { }
i'm still new at routing, when i try to makes routing, i got this error
ERROR Error: Uncaught (in promise): Error: Cannot match any routes.
anyone can help me please?
You default path to redirect /mfin
You no path with /mfin you have URL /mfin/:id. This is not match with /mfin
So need to add route URL of /mfin.
Try this, As far as I understood you are missing some codes in index.html. Check whether you have below code in your index.html head section. If not add it and see.
<base href="/">
Also ensure your server has configured for HTML5 pushState like explained in Angular 2.0 router not working on reloading the browser
I hope this will resolve your problem. If you have any doubts or suggestion let me know.
Related
I try to work with Storybook in my Angular project, and I run into a misterious error message, and I have no clue what's happening here.
This is my tag.component.stories.ts file:
import { CommonModule } from '#angular/common';
import { BrowserModule } from '#angular/platform-browser';
import { RouterModule } from '#angular/router';
import { Meta, moduleMetadata, Story } from '#storybook/angular';
import { AppRoutingModule } from 'src/app/app-routing.module';
import { TagComponent } from './tag.component';
export default {
title: 'Attached Tags',
component: TagComponent,
decorators: [
moduleMetadata({
declarations: [TagComponent],
imports: [BrowserModule, CommonModule, RouterModule, AppRoutingModule]
})
]
} as Meta;
const Template: Story = (args) => ({
props: {
...args
}
});
export const GreenPost = Template.bind({});
GreenPost.args = {
tag: {
id: 1,
name: 'Test tag',
color: '#bada55',
type: 'Post'
}
};
I get this error message:
Couldn't find story matching 'attached-tags--green-post'.
- Are you sure a story with that id exists?
- Please check your stories field of your main.js config.
- Also check the browser console and terminal for error messages.
So, I'm pretty sure after reading the documentation's "Simple component" section I don't have any idea how or where should I need to define any id for stories.
Here is my .storybook/main.js:
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.#(js|jsx|ts|tsx)"
],
"addons": [
"#storybook/addon-links",
"#storybook/addon-essentials",
"#storybook/addon-interactions"
],
"framework": "#storybook/angular",
"core": {
"builder": "webpack5"
}
}
This is the factory default I think.
Also checked the browsers console, and nothing else, just the visible message twice.
Any idea how can I solve this issue?
I am using angular material design for making a website where I am unable to open home of side-bar. Please suggest me any solution.
https://stackblitz.com/edit/webkotactechsan-akntkf
used angular material design
<mat-nav-list>
<mat-card class="sidemenu">
<mat-list-item routerLink="home" routerLinkActive="active" >
<button mat-mini-fab color="primary" aria-label="Example icon-
button">
<mat-icon>home</mat-icon>
</button>
<span class="title"><b>Home</b></span>
</mat-list-item>
</mat-card>
unable to open home of side-bar
changes you need to do
change class name to export class HomeComponent in home.component.ts
spelling of home.component.scss is wrong, please correct it.
app.module.ts
import 'hammerjs';
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { FormsModule } from '#angular/forms';
import { RouterModule, Routes } from '#angular/router';
import { AppMaterialModule } from './app.material.module';
import { AppComponent, DialogContentComponent } from './app.component';
import { HomeComponent } from './home/home.component'
const appRoute: Routes = [
{ path: 'home', component: HomeComponent }
];
#NgModule({
imports: [
BrowserModule,
FormsModule,
AppMaterialModule,
BrowserAnimationsModule,
RouterModule.forRoot(appRoute)
],
declarations: [AppComponent, DialogContentComponent, HomeComponent],
entryComponents: [DialogContentComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
Changes I did in this file.
a) - added import { RouterModule, Routes } from '#angular/router';
b) - added import { HomeComponent } from './home/home.component'
c) -
const appRoute: Routes = [
{ path: 'home', component: HomeComponent }
]
;
d) - added RouterModule.forRoot(appRoute).
e) - added HomeComponent in declarations.
Then add <router-outlet></router-outlet> in your app.component.html.
Let me know if you have any doubt.
Please add routes in AppModule
RouterModule.forRoot([
{ path: 'home', component: HomeComponent },
{ path: '', redirectTo: 'home', pathMatch: 'full' },
],{onSameUrlNavigation: 'reload'}),
Live Example: Stackblitz
There is something you need to do to solve this problem and implement some angular way to manage components
1. Implement routing: The reason behind it, when you click on home, you need to go some router. So, we implement routing to solve this problem.
const appRoute: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'home'},
{ path: 'home', component: HomeComponent },
{ path: 'birthday', component: BirthdayComponent}
];
In the above code, we took two components for example purpose. When we call that route, it loads that component. For example we go home route it loads home component.
2. Divide into components: We are implementing single page application. So, we don't need to copy and paste all the sidenav, topbar in all components.
We kept those sidenav and topbar in app components and load app-content into router-outlet. you can see your inside codes of app-component in home and birthday component.
<div class="app-content">
<router-outlet></router-outlet>
</div>
3. Change routerLink to home and birthday, so that we need to show home, it loads home components and when we need to show birthday, it loads birthday component.
and finally thanks to piyush jain for solving common mistakes of your code.
I know this is repeated question, but none of the solutions listed have helped me. I am getting the following error in Console: Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming
What I have already done:
Added style key in angular-cli.json Suggested Here
Tried real path to CSS Suggested Here
And few others. I seem to have lost the tabs.
Now the thing that intrigues me is that I have the styles loaded as seen from here.
So is the class that material checks for: mat-theme-loaded-marker.
But I still can't seem to get it to load. Same error.
My AppModule is as follows:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { RouterModule, Routes } from '#angular/router';
import 'hammerjs';
import { LoginComponent } from './components/login/app';
import { CookieService } from 'ngx-cookie-service';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MaterialModule } from '#angular/material';
const appRoutes: Routes = [
{path: 'login', component: LoginComponent},
{ path: '**', component: LoginComponent }
];
#NgModule({
declarations: [
LoginComponent
],
imports: [
FormsModule,
HttpModule,
BrowserModule,
BrowserAnimationsModule,
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
),
MaterialModule
],
providers: [ CookieService],
bootstrap: [ LoginComponent ]
})
export class AppModule { }
PS: I am new to angular 4.
Developing Angular 2 with material design , we need to use some default css from the material component other wise it will show console error in your browser like Could not find Angular Material core theme..To avoid these problem we need to use one of the default theme in your material component.From the below image you can observe 4 prebuilt-themses in youe node_module.
. I am importing one of the themes in my styles.css file. Please look into below screen shot.After that reload the page then you can see there no error message show in your browser console. I hope it will help for you.
I'm following this instructional video, Building web apps powered by Angular 2.x using Visual Studio 2017, and around 51:00 is the part I'm at and I'm hitting a problem in this source file:
https://github.com/CRANK211/vs17-ng2-dnc/blob/master/3%20-%20with-data/components/shared/account.service.ts#L18
With this function:
getAccountSummaries() {
return this.http.get('api/Bank/GetAccountSummaries')
.map(response => response.json() as AccountSummary[])
.toPromise();
}
I'm getting red text in Visual Studio on .json() which says
Symbol 'json' cannot be properly resolved, probably because it is located in inaccessible module
and when I try to run the application I get the exception message:
System.Exception: Call to Node module failed with error: Error: Uncaught (in promise): Error: No provider for AccountService!
Following the tutorial I used the same template as the instructor did but I think something must have changed since then since he has a single app.module.ts while my template came with four: app.module.client.ts, app.module.server.ts, and app.module.shared.ts and unfortunately as someone new to ASP.NET Core and Angular2 I have no idea why they're different or what the significance might be.
I've had success up to now by just making any changes he makes to his app.module.ts to my app.module.shared.ts which you can see here:
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { HeaderComponent } from './components/shared/header/header.component';
import { AccountListComponent } from './components/account/account-list/account-list.component';
import { AccountSummaryComponent } from './components/account/account-summary/account-summary.component';
import { AccountDetailComponent } from './components/account/account-detail/account-detail.component';
import { FormatAccountNumberPipe } from './components/shared/format-account-number.pipe';
import { AccountActivityComponent } from './components/account/acccount-activity/account-activity.component';
import { AccountService } from './components/shared/account.service';
export const sharedConfig: NgModule = {
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
NavMenuComponent,
CounterComponent,
FetchDataComponent,
HomeComponent,
HeaderComponent,
AccountListComponent,
AccountDetailComponent,
AccountSummaryComponent,
AccountActivityComponent,
FormatAccountNumberPipe
],
imports: [
RouterModule.forRoot([
{ path: '', redirectTo: 'account', pathMatch: 'full' },
{ path: 'account', component: AccountListComponent },
{ path: 'detail/:id', component: AccountDetailComponent },
{ path: '**', redirectTo: 'account' }
])
],
providers: [ AccountService ]
};
Everything compiled fine and worked just like his until this .json() line unfortunately.
How do I fix it?
The red text you get from Visual Studio is probably because it VS cannot resolve the response object. The error should be gone when you prepend the following to your file
import { Response } from '#angular/http';
and change add the type Response to your map functions like so:
getAccountSummaries() {
return this.http.get('/api/Bank/GetAccountSummaries')
.map((response: Response) => response.json() as AccountSummary[])
.toPromise();
}
The other issue you have with the missing provider, is probably because the AccountService is used in a component, and this component is part of a module, and this module does not have the AccountService defined as a Provider. So make sure that every module you have has
providers:[ AccountService ]
defined in it's configuration.
hope that helps
I am fairly new to Angular 2 and having a problem with Routing. I have just started to explore the Routing. I will explain the structure and what I have achieved so far,
app.router.ts
import { ModuleWithProviders } from '#angular/core'
import { Routes, RouterModule } from '#angular/router'
import { AppComponent } from './app.component';
import { LoginComponent } from "../app/login/login.component"
export const router: Routes = [
{ path: '', component: LoginComponent },
{ path: 'login', component: LoginComponent },
{ path: 'dashboard', component: AppComponent }
];
export const routes: ModuleWithProviders = RouterModule.forRoot(router);
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import {UiSwitchModule} from 'angular2-ui-switch'
import { AppComponent } from './app.component';
import { AllReportsComponent } from "../app/all-reports/all-reports.component"
import { AvailableReportsComponent } from "../app/available-reports/available-reports.component"
import { NextReportsComponent } from "../app/next-reports/next-reports.component"
import { UrlsComponent } from "../app/urls/urls.component"
import { LoginComponent } from "../app/login/login.component"
import { TaskApi } from "../app/api/TaskApi"
import { routes } from "../app/app.router"
#NgModule({
imports: [
BrowserModule,
FormsModule,
UiSwitchModule,
HttpModule,
routes
],
declarations: [
AppComponent,
AllReportsComponent,
AvailableReportsComponent,
NextReportsComponent,
UrlsComponent,
LoginComponent
],
bootstrap: [AppComponent]
})
export class AppModule {
}
app.html
<div>
<all-reports></all-reports>
<available-reports></available-reports>
<next-reports></next-reports>
<urls></urls>
</div>
app.component.ts (very simple)
import { Component } from "#angular/core"
#Component({
templateUrl: '../app/app.html'
})
export class AppComponent {
}
and login.component.ts
import { Component } from '#angular/core';
import { TaskApi } from '../api/TaskApi';
import * as models from '../model/models';
#Component({
styleUrls: ['/app/css/login.css'],
templateUrl: '../../app/login/login.html',
providers: [TaskApi]
})
export class LoginComponent {
}
Now it can be seen that I am using multiple directives on app.html and all the respective components are working fine.
The problem I am facing is when I introduce Routing then I am able to understand where to use "router-outlet". I have used it on Index.html but it does not work and gives error about ng-component. So to just test around I have used following in Index.html,
<body>
<base href="/">
<ng-component></ng-component>
</body>
After I do this then my AppComponent is displayed by default where the LoginComponent should be displayed by default. On console, It also gives me error "Error: Cannot find primary outlet to load 'LoginComponent'"
Kindly guide me if I am using 4 directives on App.html as mentioned above then in that case how the routing will work. To summarize, I want to display Login page on localhost:3009/login and localhost:3009 and I want to display Home page (app.html) in localhost:3009/dashboard and app.html is using 4 directives to display 4 child components on it.
Angular Routing
Since Angular is single page application the routing functionality
helps to display different view in single page.
How to use router to change view?
since app.component.html is main view for most user. Iam also consider app.component.html as main view.
Router-outlet
Router-outer helps to load the change in our angular application.
app.component.html
<router-outlet></router-outlet>
Set AppComponent Default page as router-outlet and create new Dashboard.component.html in your main view.
router.ts
import { ModuleWithProviders } from '#angular/core'
import { Routes, RouterModule } from '#angular/router'
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard.component';
import { LoginComponent } from "../app/login/login.component"
export const router: Routes = [
{ path: '', component: LoginComponent },
{ path: 'login', redirectTo: '', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent }
];
export const routes: ModuleWithProviders = RouterModule.forRoot(router);
The problem with your code is that there is no 'router-outlet', so angular doesn't understand where to display the view.
The 'router-outlet' directive marks where the router displays a view.
In your code, since in app.component.ts you are using app.html so you should use <router-outlet> </router-outlet> in that HTML file.
Your app.html file should look like this:
<router-outlet> </router-outlet>
These below things should not be used in the app component HTML file. They should be used in their the corresponding components.
<all-reports></all-reports>
<available-reports></available-reports>
<next-reports></next-reports>
<urls></urls>
For further understanding, please refer to the official documentation of Angular2. They have explained it pretty well here https://angular.io/docs/ts/latest/guide/router.html