Here: https://stackblitz.com/edit/partehoras?file=src/app/app.module.ts
When I add App Roting like I do it in my VS Code local project without any problem
In package.json
I get this error: "Error in src/app/app.module.ts (5:34)
Cannot find module './app-routing.module' or its corresponding type declarations."
Any idea, please?
Thanks
You already have RouterModule.forRoot([]) imported in the app module, I am assuming you want to move to a separate file, if so, you need to create a file in the same folder as the app module with the name app-routing.module.ts and add the following code
import { RouterModule, Routes } from '#angular/router';
import { ListadoEmpleadosComponent } from './empleados/listado-empleados/listado-empleados.component';
import { NgModule } from '#angular/core';
export const routes: Routes = [
{ path: 'empleados', component: ListadoEmpleadosComponent },
{ path: '', redirectTo: 'empleados', pathMatch: 'full' },
{ path: '**', redirectTo: 'empleados', pathMatch: 'full' },
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
P.S. if you generate an angular app using the angular CLI you will get a prompt to create app routing module which will create the file automatically.
Related
I have implemented lazy loading in my app and since then, the root route is not working. I have read some posts and apparently it doesn't work in Angular 7 with lazy loading, I should redirect from "" to "whatever". The point is that it doesn't do the redirection, so my HomeComponent is never rendered. I have tried redirecting from other routes to the root route and it does the redirection, but it still doesn't render anything. Antoher thing I have tried is to render my HomeComponent in another path, like "home", but I need something happening in the root route, either a redirection or a rendering. Here is my code, thanks in advance!
PS: The rest of the routes are working perfectly, is just this one I can't make it work. If I try to render any other module from my app it does the same (nothing) and those modules are working in other routes.
app-routing.module.ts
...
const routes: Routes = [
// Home
{ path: '', redirectTo: 'home', pathMatch: 'full' }, // Doesn't redirect
{ path: 'home', loadChildren: './views/home/home.module#HomeModule' },
... // But it renders when you type the route in the browser
]
home.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { HomeComponent } from './home.component';
import { HomeRoutingModule } from './home-routing.module';
#NgModule({
declarations: [HomeComponent],
imports: [
CommonModule,
HomeRoutingModule
]
})
export class HomeModule { }
home-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './home.component';
const routes: Routes = [
{path: '', component: HomeComponent }
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomeRoutingModule { }
Remove exports: [RouterModule] from your HomeRoutingModule. you dont need export the router module in forChild routes modules. Only if you have a sub module with your forRoot routes. and you need import that module in your appModule (main module).
In my new project in WebApi2 I use Angular2 framework. After configuring and adding angular I tried to call first compnent. And there is my question. How to connect angular routing with webapi2? I add new class where I add routing:
I call <home-page> in MVC controller view Index.cshtml
app.routing.ts
const appRoutes: Routes = [
{ path: 'home', component: HomePage },
{ path: 'test', component: AppComponent}
];
app.component.ts
#Component({
selector: 'my-app',
templateUrl: './app.template.html',
})
HomePage.component.ts
#Component({
selector: 'home-page',
templateUrl: './HomePage.template.html',
providers: [GetContent]
})
system.config.js
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the Angular folder
'app': 'Angular',
// angular bundles ...
}
meta: {
'./*.js': {
loader: '/systemjs-angular-loader.js'
}
}
shared _Layout.cshtml
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/systemjs.config.js"></script>
<script>
System.import('Angular/main.js').catch(function (err) { console.error(err); });
</script>
I included it to app.module.ts to imports section. When I launch application I see information from my HomePage component but when I add route path /test, it redirects me to HomePage component. Where have I made a mistake?
Can you try edit your app.module into this:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouterModule, Routes } from '#angular/router';
import { AppComponent } from './app.component';
import { HomePageComponent } from './home-page.component';
const appRoutes: Routes = [
{path: '', redirectTo: 'home', pathMatch: 'full'},
{ path: 'home', component: HomePageComponent },
{ path: 'test', component: AppComponent}
{path: '**', component: NotFoundComponent}
];
#NgModule({
declarations: [
AppComponent,HomePageComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes)
],
providers : [],
bootstrap: [AppComponent]
})
export class AppModule { }
I resolved problem. I called <home-page> in Index.cshtml and that view was rendered from _Layout.cshtml. When I moved called component to _Layout.cshtml all things go correct. Thanks for help!
I have different tenants name and a login page whose path is localhost:4200/account/login but before that i have localhost:4200/account/workspace page where i will enter my tenantName in a textbox and the particular tenantId will be in the cookies. Now i want my next login page url to be like this
localhost:4200/tenantName/account/login and even after login i want the tenantName exactly there throughout the whole session. I am new to this and completely stuck here for 2 days. How can i modify my url here? This is problem is almost similar to this problem here.
https://forums.asp.net/t/2127416.aspx? How+to+modify+login+url+when+using+asp+net+identity
The difference is that i have to make changes in my front-end and not in the backend and its asp.net zero not asp.net core. Here is the code for my root-routing module file.
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
const routes: Routes = [
{ path: '', redirectTo: '/app/home', pathMatch: 'full' },
{
path: 'account',
loadChildren: 'account/account.module#AccountModule', //Lazy load account module
data: { preload: true }
},
{
path: 'app',
loadChildren: 'app/app.module#AppModule', //Lazy load account module
data: { preload: true }
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: []
})
export class RootRoutingModule { }
I can't figure out how to import html files with webpack 2! I am using angular 1.6.0 and typescript.
I would like to import a template and use it as a router state template:
import * as angular from 'angular';
import * as uiRouter from 'angular-ui-router';
import theView from './theView.html';
import appComp from './app.component';
export default angular
.module('app.main', [uiRouter])
.component('myAppComp', appComp)
.config(($stateProvider, $urlRouterProvider, $locationProvider) => {
'ngInject';
$locationProvider.hashPrefix('');
$stateProvider
.state('main', {
url: '/main',
template: '<p>main state template</p>'
})
.state('main.cardList', {
url: '/cardList',
template: theView
});
}
It gives:
error:
ERROR in ./src/app/module.ts
(3,22): error TS2307: Cannot find module './theView.html'.
What (wierd) I don't understand is if I import the template same as above and use it in a component template, it does gives same error "cannot find module './theView.html'" but it works!
This works (with ts compilation error):
import template from './theView.html';
.component(appComp, {
template
})
webpack.config:
module.exports = {
entry: './src/app/module.ts',
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.html$/,
use: [{ loader: 'html-loader' }]
}
]
},
output: {
filename: 'bundle.js',
path: __dirname + "/dist"
}
};
What is going on here..?
For the people who can come across this problem in the future; it is solved as follows:
declare const require: any;
$stateProvider
.state('main.cardList', {
url: '/cardList',
template: require('./theView.html').default
});
Credits to #yadejo for the answer above!
I am developing an webapp using Angular2. I am trying to implement Routing with HasLocationStratery. My application starts with this URL: https://127.0.0.1:8443/admin
This is how i have configured my Routes:
import {Routes, RouterModule} from '#angular/router';
import {AppComponentAdmin} from "./app.component.admin";
import {ModuleWithProviders} from "#angular/core";
import {MainComponent} from "./administrator/components/main/main.component";
import {LoginComponent} from "./administrator/components/account/login/login.component";
import {WorkorderComponent} from "./administrator/components/entities/workorder/workorder.component";
import {WorkorderViewEditComponent} from "./administrator/components/entities/workorder/workorder.view.edit.component";
const appRoutes: Routes = [
//admin paths
{ path: 'admin', component: AppComponentAdmin},
{ path: 'admin/login', component: MainComponent },
{ path: 'admin/creds', component: LoginComponent },
{ path: 'admin/workorder', component: WorkorderComponent },
{ path: 'admin/workorder/:id', component: WorkorderViewEditComponent },
// otherwise redirect to admin
{ path: 'admin/**', redirectTo: 'admin', pathMatch: 'full' }
];
export const appRoutingProviders: any[] = [
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
In the module i have imported this.
import {HashLocationStrategy, LocationStrategy} from "#angular/common"
and provided like this in the module
[{provide: LocationStrategy, useClass: HashLocationStrategy}]
So now when i visit https://127.0.0.1:8443/admin
i get this in the address bar https://127.0.0.1:8443/#/
What it should give me is this https://127.0.0.1:8443/admin#/
How can i achieve this?
To configure your routing with a subdirectory, you have to define your base href according to the physical directory.
For example in your case, it should be <base href="/admin">