I am using the Microsoft.AspNetCore.SpaTemplates example of angular 2, I installed the angular/materiel npm module and tried to include that for use of the input material.
EDIT -- New question posted regarding removing the server-side rendering.
Link -- Click Here
I tried to import it in app.module.ts and after doing so cannot seem to get my application to load anymore.
#NgModule({
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
HeaderComponent,
LoginComponent
],
imports: [
UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
RouterModule.forRoot([
{ path: '', redirectTo: 'account', pathMatch: 'full' },
{ path: 'login', component: LoginComponent },
{ path: '**', redirectTo: 'account' }
]), MaterialModule
]
})
Now I am trying to create a simple login view with an email and password input box. I wanted to use angular material to make it look better.
Here is my exception on page load.
An unhandled exception occurred while processing the request.
Exception: Call to Node module failed with error: Error: This method is not implemented in Parse5DomAdapter: getCookie
at _notImplemented (C:\Users\baile\Source\Repos\Programming2017\BankSoftware\ClientApp\dist\vendor.js:91062:12) [angular]
at Parse5DomAdapter.module.exports.Parse5DomAdapter.getCookie (C:\Users\baile\Source\Repos\Programming2017\BankSoftware\ClientApp\dist\vendor.js:91657:69) [angular]
at CookieXSRFStrategy.configureRequest (C:\Users\baile\Source\Repos\Programming2017\BankSoftware\ClientApp\dist\vendor.js:63677:109) [angular]
at XHRBackend.createConnection (C:\Users\baile\Source\Repos\Programming2017\BankSoftware\ClientApp\dist\vendor.js:63726:32) [angular]
at httpRequest (C:\Users\baile\Source\Repos\Programming2017\BankSoftware\ClientApp\dist\vendor.js:64076:24) [angular]
at Http.request (C:\Users\baile\Source\Repos\Programming2017\BankSoftware\ClientApp\dist\vendor.js:64185:38) [angular]
at Http.get (C:\Users\baile\Source\Repos\Programming2017\BankSoftware\ClientApp\dist\vendor.js:64199:25) [angular]
at AccountService.ping (C:\Users\baile\Source\Repos\Programming2017\BankSoftware\ClientApp\dist\main-server.js:22373:30) [angular]
at new AccountService (C:\Users\baile\Source\Repos\Programming2017\BankSoftware\ClientApp\dist\main-server.js:22370:14) [angular]
at CompiledTemplate.proxyViewClass.View_AppComponent0.createInternal (/AppModule/AppComponent/component.ngfactory.js:15:30) [angular]
at CompiledTemplate.proxyViewClass.AppView.create (C:\Users\baile\Source\Repos\Programming2017\BankSoftware\ClientApp\dist\vendor.js:11951:25) [angular]
at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.createInternal (/AppModule/AppComponent/host.ngfactory.js:15:19) [angular]
at CompiledTemplate.proxyViewClass.AppView.createHostView (C:\Users\baile\Source\Repos\Programming2017\BankSoftware\ClientApp\dist\vendor.js:11964:25) [angular]
at ComponentFactory.create (C:\Users\baile\Source\Repos\Programming2017\BankSoftware\ClientApp\dist\vendor.js:7361:29) [angular]
I now understand that the Universal Module is what is creating pre-rendering. This is really great and all except to be completely honest I don't need it.
To revise my question now. How can someone take the Microsoft.AspNetCore.SpaTemplate for angular 2 and remove the Universal Module and still have a working angular website. Simply removing the Universal Module from the imports causing other errors to start showing up. What changes need to be made throughout other sections of the template, and am I losing anything aside from server-side pre-rendering?
I had the same issue and fixed it by putting the MaterialModule before the UniversalModule. I know the SPA template says it should go first, but that order seemed to break it.
imports: [
MaterialModule.forRoot(),
UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
RouterModule.forRoot([
{ path: '', redirectTo: 'account', pathMatch: 'full' },
{ path: 'account', component: AccountListComponent },
{ path: 'detail/:id', component: AccountDetailComponent },
{ path: '**', redirectTo: 'account' }
])
],
Edit - Actually, it looks to be more complicated than this. Here is a GitHub issue on it:
https://github.com/angular/material2/issues/308
I ended up pulling out the UniversalModule because Angular Material was more important to me than server side rendering at this point. There are a few changes you would need to make to get the SPA template to work with Angular Material. Let me know if you would like more help.
Edit
I have down voted this question since the OP marked my answer, then un-marked despite considerable effort to assist. The answer I provided is the correct answer.
Related
I have an Angular 14 application that has the build files for a React application being served in a folder alongside it, as such.
dist
|_apps
|_react-app-build
|
|
|_main.js, runtime.js, etc
my routing-module is as follows
{path: '', component: HomepageComponent},
{path: 'projects', component: ProjectsPageComponent},
{path: 'contact', component: ContactPageComponent},
{path: '**', redirectTo: "/"},
I need to be able to access the react app, but its routes keep being picked up by the Angular router and redirected to the root. Is there any way to force the Angular router to completely ignore the routes for the React application (/apps/react-app-build/*)?
So far I have tried setting the base href to something other than the root <base href="/site">
as well as adding
#NgModule({
imports: [RouterModule.forRoot(routes,
{
---
useHash: true
---
})],
exports: [RouterModule]
})
to the routing module, all to no avail.
Read more on Webpack Module Federation. It allows you to share separate JavaScript applications using lazy loaded routes. Does not matter whether the application is react or angular
first some short introduction to the project and general setup.
It is an Angular/Angular JS application. I integrated Angular couple of weeks ago. In contrast to many different tutorials using the UpgradeModule, I actually had to use the downgradeModule - The project is quite large and UpgradeModule caused a lot of performance issues.
There is an overall Parent State (called app) and I want a Angular Component to be a child of it. According to the docs this should be possible (https://github.com/ui-router/angular-hybrid#limitations)
Limitations:
We currently support routing either Angular (2+) or AngularJS (1.x) components into an AngularJS (1.x) ui-view. However, we do not support routing AngularJS (1.x) components into an Angular (2+) ui-view.
If you create an Angular (2+) ui-view, then any nested ui-view must also be Angular (2+).
Because of this, apps should be migrated starting from leaf states/views and work up towards the root state/view.
The general setup looks like this (simplification):
app.module.ng1.ts
import { AppModule } from './app.module';
const bootstrapFn: any = (extraProviders: Array<StaticProvider>): any => {
return platformBrowserDynamic(extraProviders).bootstrapModule(AppModule);
};
const downgradedModule: any = downgradeModule(bootstrapFn);
const appModule: angular.IModule = angular
.module('app', [
downgradedModule,
// other project modules
]);
app.module.ts
#NgModule({
imports: [
BrowserModule,
UIRouterUpgradeModule.forChild(),
],
declarations: [
AccountNg2Component,
],
providers: [
],
entryComponents: [
AccountNg2Component,
],
})
class AppModule {
public ngDoBootstrap(): void {}
}
export { AppModule };
TheAccountNg2Component is the one I actually want to go to. account.component.ts
#Component({
selector: 'account',
template,
})
class AccountNg2Component {
#Input() public user: any;
constructor() {}
}
export { AccountNg2Component };
There is a parent app state and I want the AccountNg2Component to be a child of it. The state configuration looks like this:
$stateProvider
.state({
parent: 'app',
name: 'account',
url: '/account',
component: AccountNg2Component,
});
Whatever I try it will also result in the following two Errors:
Transition Rejection($id: 0 type: 6, message: The transition errored, detail: TypeError: Cannot read property 'when' of undefined)
TypeError: Cannot read property 'when' of undefined
at Ng2ViewConfig.load (views.js:47)
at eval (views.js:19)
at Array.map (<anonymous>)
at loadEnteringViews (views.js:19)
at invokeCallback (transitionHook.js:104)
at TransitionHook.invokeHook (transitionHook.js:116)
at eval (transitionHook.js:58)
at processQueue (angular.js:17169)
at eval (angular.js:17217)
at Scope.$digest (angular.js:18352)
at Scope.$apply (angular.js:18649)
at eval (angular.js:18952)
at completeOutstandingRequest (angular.js:6428)
at eval (angular.js:6707)
at ZoneDelegate.invokeTask (zone.js:420)
at Object.onInvokeTask (core.js:4961)
at ZoneDelegate.invokeTask (zone.js:419)
at Zone.runTask (zone.js:187)
at ZoneTask.invokeTask (zone.js:495)
at ZoneTask.invoke (zone.js:484)
at timer (zone.js:2053)
I'm probably missing something in the configuration, but I'm not able to figure it out.
What I already tried:
I looked at the sample App (https://github.com/ui-router/sample-app-angular-hybrid) and tried to build it as similar as possible. But they are using the UpgradeModule instead of the downgrade - I don't know if this changes anything for the router.
I tried
Adding state configuration to UIRouterUpgradeModule.forChild() and UIRouterModule.forChild()
Created a "future state" according to https://github.com/ui-router/sample-app-angular-hybrid/blob/master/app/angularModule.ts#L10
Different ways to declare the Account State
Different ways to define the Account Component itself
The error stays always the same, because of that I think I'm just missing some piece in my configuration.
If my description does not help enough, I'll try to setup a jsfiddle or something similar
Update 1:
Ok, I removed the state declaration for the account state from the Angular 1 State Provider and instead only register it in the UIRouterModule. Now at least the error is gone, but the state is not loaded at all (when trying to access it, redirect to default state)
Ok I finally managed to solve the issue, thanks to a tip from a different article (https://stackoverflow.com/a/49568050/4243635)
Just gonna quote it here again:
The Angular bootstrap module needed a parameter of type "UIRouter" in the constructor, otherwise it would not bootstrap its states:
export class AppModule {
constructor(private router: UIRouter) {
// "router" needed in constructor to bootstrap angular states
}
You also need to import UpgradeModule and UIRouterUpgradeModule. So the entire app.module.ts looks like this:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { ServiceBootstrapComponent } from '../../service-bootstrap';
import { AccountNg2Component } from '../../app/pages/account/account.ng2.component';
import { UIRouterUpgradeModule } from '#uirouter/angular-hybrid';
import { AccountState } from '../../app/pages/account/account.states';
import { CommonModule } from '#angular/common';
import { UIRouter, UIRouterModule } from '#uirouter/angular';
import { UpgradeModule } from '#angular/upgrade/static';
#NgModule({
imports: [
CommonModule,
BrowserModule,
UpgradeModule,
UIRouterUpgradeModule,
UIRouterModule.forChild({states: [AccountState]}),
],
declarations: [
ServiceBootstrapComponent,
AccountNg2Component,
],
providers: [
],
entryComponents: [
ServiceBootstrapComponent,
],
})
class AppModule {
constructor(private router: UIRouter) {}
public ngDoBootstrap(): void {}
}
export { AppModule };
I have a doubt about the way to work with Kylo and UI structure.
According to the site http://kylo.readthedocs.io/en/v0.8.3/developer-guides/KyloDeveloperGuide.html?highlight=angular2 it says:
Most of the Kylo UI depends on AngularJS and AngularJS Material but a few parts have been upgraded to Angular 2 and Covalent. New plugins should be written in Typescript and use Angular 2 for future compatibility.
It says that new plugins should be written in angular2 and typescript, but all the examples and the core components are written in AngularJS.
One example is this one: https://github.com/Teradata/kylo/tree/master/samples/plugins/example-module/example-module-ui
I would like to know the Typescript and Angular2 alternative for that module, including routing, is there any live example ?
I've tested that Angular 2 does work if the code is added directly to the kylo-ui-app project but I don't think Kylo's plugin system supports Angular 2 right now.
The only difference from standard Angular 2 is that Kylo uses UI-Router instead of the Angular Router, but the syntax is very similar. From memory I think these are the steps I used:
1) Add a new route to routes.js:
{
name: 'contacts.**',
url: '/contacts',
loadChildren: './contacts/contacts.module#ContactsModule'
}
2) Add the child states to your module:
#NgModule({
imports: [ UIRouterModule.forChild({ states: CONTACTS_STATES }), /* ... and any other modules */ ],
declarations: [ ContactComponent, /* ... and any other components */ ],
providers: [ ContactsDataService ],
})
export class ContactsModule { }
3) The component for each state should be specified under views.content:
{
name: 'contacts',
url: '/contacts',
views: {
"content": {
component: ContactsComponent,
}
}
}
In my Angular 2 app (RC4), when the index.html opens,
I get the error Error: Cannot match any routes: ''
I know this has been asked before, but none of the answers in those cases seems to apply to me; that is, I"m already doing everything recommended to fix this.
I have
<base href="/">
in my head element (also tried
<base href=".">
which makes no difference at all).
I have the following in my app.route.ts:
export const routes: RouterConfig = [
{ path: '', redirectTo: '/instruction-steps', pathMatch: 'full'},
{ path: 'settings', component: SettingsComponent },
{ path: 'find-and-replace', component: FindAndReplaceComponent },
{ path: 'instruction-steps', component: InstructionStepsComponent }
];
The page does render correctly, and my routes to the other views work. If I reload the page, however, I'll not only get the error, but the page does not render.
This is running on lite-server, not ASP.NET.
i can not comment due to low reputation points but are you using angular 2 with asp.net then you have to add code in startup.cs that point to use index.html when no route found.
Here are a few tips to watch out for:
Be sure that modules are properly defined as #NgModule.
Be sure that routing modules are properly added to imports for the module.
Be sure that paths are spelled correctly (e.g. "item" vs. "items")
Be sure that each module is added to the main App Module.
Please note that this is as of the Final release of Angular 2.
All the samples I come across on the web are SPAs, I'm wondering if Angular 2 has a build-in way to handle static pages. Specifically, let's say I use Angular 2 to build a blog site, and I wish users could go directly to a particular post without going through the default home component, (which also incidentally, loads a lot of server side config). I mean, how do I enable user to go to http://server/posts/:id directly, without 404 showing up or configure a ** page for unreachables.
Just need some directions, thanks.
Let's say my folder structure goes like this
/posts
/shared
/users
and my main router goes like this
#RouteConfig([
{ path: './shared/...', name: 'Shared', component: SharedComponent },
{ path: './users/...', name: 'Users', component: UserComponent },
{ path: './posts/...', name: 'Posts', component: PostComponent }
])
and post router goes like this
#RouteConfig([
{ path: '/', name: 'List', component: ListComponent, useAsDefault: true },
{ path: '/:id', name: 'Post', component: PostComponent },
{ path: '/:id/gallery', name: 'Gallery', component: GalleryComponent },
{ path: '/:id/comments', name: 'Comments', component: CommentListComponent },
])
I think I understand your problem. You need to configure your web server software (e.g., Apache) a certain way, this is not an Angular2 configuration issue. You need to configure your web server so that whenever it receives url requests like / or /posts or /posts/123 that it serves your main index.html file. Then Angular will automatically show the right content when it starts up.
Seems like you are looking for routers. Have a look at the docs:
Off. Guide and Router Tutorial. It's used like this:
#Component({ ... })
#RouteConfig([
{path:'/crisis-center', name: 'CrisisCenter', component: CrisisListComponent},
{path:'/heroes', name: 'Heroes', component: HeroListComponent},
{path:'/hero/:id', name: 'HeroDetail', component: HeroDetailComponent}
])
export class AppComponent { }
Its quite hard to tell the perfect answer as you are asking for without going through the default home component(I am not sure what do you mean by that).
AFAIK, in angular2 you can have one component which can define/set routes for other components and so their relevant view.
Let's say after defining routes in a single component, if you go with the HashLocationStrategy like below,
bootstrap(AppComponent, [provide(LocationStrategy,{useClass: HashLocationStrategy}]);
Angular2 will be able to provide you required route and so you don't need to configure server with some extra route setting. Then, you will be able to access required resource at http://server/#/posts/:id
If you go with PathLocationStrategy like below,
bootstrap(AppComponent, [provide(APP_BASE_HREF).toValue(location.pathname)]);
For this configuration angular2 will not be able to provide you required route and so server side routing needs to be configured. Then, you will be able to access required resource at http://server/posts/:id
So In short if required/asking path exits, it will take users to that path.
I know I'm a year late, but your issue is that whatever web-server you're using needs to rewrite urls to the index.html of your web-app. If it did that, then when you went to server/hero/123, the web-server would direct it to the index.html of your web-app, and your web-app would use the router to go to the HeroDetail component, without showing the default home component. Because you don't have the rewrite, the web-server is not even starting the angular app and is instead trying to serve the file server/hero/123, which doesn't exist and therefore it gives you a 404.
FYI this would still be a SPA (single page application).