Skip to content

Commit 5f899b4

Browse files
MarkPieszakBillSheldon-HunterIndustries
MarkPieszak
authored and
BillSheldon-HunterIndustries
committed
feat(Angular 5.0): update engine-etc for angular 5.0 & Domino (TrilonIO#437)
* feat(5.0): update engine-etc for angular 5.0-rc1 WIP - More updates to come * remove ng 4 references * update source maps for faster HMR builds * use aspnetcore-engine & misc updates and fixes * update to 5.0 official Closes TrilonIO#434 Closes TrilonIO#435 Closes TrilonIO#430 Closes TrilonIO#424
1 parent 256b377 commit 5f899b4

10 files changed

+1283
-0
lines changed

‎ClientApp/app/app.component.ts.orig

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import { Component, OnInit, OnDestroy, Inject, ViewEncapsulation, RendererFactory2, PLATFORM_ID, Injector } from '@angular/core';
2+
import { Router, NavigationEnd, ActivatedRoute, PRIMARY_OUTLET } from '@angular/router';
3+
import { Meta, Title, DOCUMENT, MetaDefinition } from '@angular/platform-browser';
4+
import { Subscription } from 'rxjs/Subscription';
5+
import { isPlatformServer } from '@angular/common';
6+
import { LinkService } from './shared/link.service';
7+
8+
// i18n support
9+
import { TranslateService } from '@ngx-translate/core';
10+
<<<<<<< HEAD
11+
import { REQUEST } from '@nguniversal/aspnetcore-engine/tokens';
12+
=======
13+
import { REQUEST } from '@nguniversal/aspnetcore-engine';
14+
>>>>>>> feat(Angular 5.0): update engine-etc for angular 5.0 & Domino (#437)
15+
16+
@Component({
17+
selector: 'app-root',
18+
templateUrl: './app.component.html',
19+
styleUrls: ['./app.component.scss'],
20+
encapsulation: ViewEncapsulation.None
21+
})
22+
export class AppComponent implements OnInit, OnDestroy {
23+
24+
// This will go at the END of your title for example "Home - Angular Universal..." <-- after the dash (-)
25+
private endPageTitle: string = 'Angular Universal and ASP.NET Core Starter';
26+
// If no Title is provided, we'll use a default one before the dash(-)
27+
private defaultPageTitle: string = 'My App';
28+
29+
private routerSub$: Subscription;
30+
private request;
31+
32+
constructor(
33+
private router: Router,
34+
private activatedRoute: ActivatedRoute,
35+
private title: Title,
36+
private meta: Meta,
37+
private linkService: LinkService,
38+
public translate: TranslateService,
39+
private injector: Injector
40+
) {
41+
// this language will be used as a fallback when a translation isn't found in the current language
42+
translate.setDefaultLang('en');
43+
44+
// the lang to use, if the lang isn't available, it will use the current loader to get them
45+
translate.use('en');
46+
47+
this.request = this.injector.get(REQUEST);
48+
49+
console.log(`What's our REQUEST Object look like?`);
50+
console.log(`The Request object only really exists on the Server, but on the Browser we can at least see Cookies`);
51+
console.log(this.request);
52+
}
53+
54+
ngOnInit() {
55+
// Change "Title" on every navigationEnd event
56+
// Titles come from the data.title property on all Routes (see app.routes.ts)
57+
this._changeTitleOnNavigation();
58+
}
59+
60+
ngOnDestroy() {
61+
// Subscription clean-up
62+
this.routerSub$.unsubscribe();
63+
}
64+
65+
private _changeTitleOnNavigation() {
66+
67+
this.routerSub$ = this.router.events
68+
.filter(event => event instanceof NavigationEnd)
69+
.map(() => this.activatedRoute)
70+
.map(route => {
71+
while (route.firstChild) route = route.firstChild;
72+
return route;
73+
})
74+
.filter(route => route.outlet === 'primary')
75+
.mergeMap(route => route.data)
76+
.subscribe((event) => {
77+
this._setMetaAndLinks(event);
78+
});
79+
}
80+
81+
private _setMetaAndLinks(event) {
82+
83+
// Set Title if available, otherwise leave the default Title
84+
const title = event['title']
85+
? `${event['title']} - ${this.endPageTitle}`
86+
: `${this.defaultPageTitle} - ${this.endPageTitle}`;
87+
88+
this.title.setTitle(title);
89+
90+
const metaData = event['meta'] || [];
91+
const linksData = event['links'] || [];
92+
93+
for (let i = 0; i < metaData.length; i++) {
94+
this.meta.updateTag(metaData[i]);
95+
}
96+
97+
for (let i = 0; i < linksData.length; i++) {
98+
this.linkService.addTag(linksData[i]);
99+
}
100+
}
101+
102+
}
103+

‎ClientApp/app/app.module.browser.ts.orig

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { NgModule } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
import { APP_BASE_HREF } from '@angular/common';
4+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
5+
6+
<<<<<<< HEAD
7+
import { ORIGIN_URL, REQUEST } from '@nguniversal/aspnetcore-engine/tokens';
8+
=======
9+
import { ORIGIN_URL, REQUEST } from '@nguniversal/aspnetcore-engine';
10+
>>>>>>> feat(Angular 5.0): update engine-etc for angular 5.0 & Domino (#437)
11+
import { AppModuleShared } from './app.module';
12+
import { AppComponent } from './app.component';
13+
import { BrowserTransferStateModule } from '@angular/platform-browser';
14+
import { BrowserPrebootModule } from 'preboot/browser';
15+
16+
export function getOriginUrl() {
17+
return window.location.origin;
18+
}
19+
20+
export function getRequest() {
21+
// the Request object only lives on the server
22+
return { cookie: document.cookie };
23+
}
24+
25+
@NgModule({
26+
bootstrap: [AppComponent],
27+
imports: [
28+
BrowserPrebootModule.replayEvents(),
29+
BrowserAnimationsModule,
30+
31+
// Our Common AppModule
32+
AppModuleShared
33+
34+
],
35+
providers: [
36+
{
37+
// We need this for our Http calls since they'll be using an ORIGIN_URL provided in main.server
38+
// (Also remember the Server requires Absolute URLs)
39+
provide: ORIGIN_URL,
40+
useFactory: (getOriginUrl)
41+
}, {
42+
// The server provides these in main.server
43+
provide: REQUEST,
44+
useFactory: (getRequest)
45+
}
46+
]
47+
})
48+
export class AppModule { }

‎ClientApp/app/app.module.ts.orig

+161
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
import { NgModule, Inject } from '@angular/core';
2+
import { RouterModule, PreloadAllModules } from '@angular/router';
3+
import { CommonModule, APP_BASE_HREF } from '@angular/common';
4+
import { HttpModule, Http } from '@angular/http';
5+
import { HttpClientModule, HttpClient } from '@angular/common/http';
6+
import { FormsModule } from '@angular/forms';
7+
import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
8+
import { TransferHttpCacheModule } from '@nguniversal/common';
9+
10+
import { Ng2BootstrapModule } from 'ngx-bootstrap';
11+
12+
// i18n support
13+
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
14+
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
15+
16+
import { AppComponent } from './app.component';
17+
import { NavMenuComponent } from './components/navmenu/navmenu.component';
18+
import { HomeComponent } from './containers/home/home.component';
19+
import { UsersComponent } from './containers/users/users.component';
20+
import { UserDetailComponent } from './components/user-detail/user-detail.component';
21+
import { CounterComponent } from './containers/counter/counter.component';
22+
import { NotFoundComponent } from './containers/not-found/not-found.component';
23+
import { NgxBootstrapComponent } from './containers/ngx-bootstrap-demo/ngx-bootstrap.component';
24+
25+
import { LinkService } from './shared/link.service';
26+
import { UserService } from './shared/user.service';
27+
<<<<<<< HEAD
28+
import { ORIGIN_URL } from '@nguniversal/aspnetcore-engine/tokens';
29+
=======
30+
import { ORIGIN_URL } from '@nguniversal/aspnetcore-engine';
31+
>>>>>>> feat(Angular 5.0): update engine-etc for angular 5.0 & Domino (#437)
32+
33+
export function createTranslateLoader(http: HttpClient, baseHref) {
34+
// Temporary Azure hack
35+
if (baseHref === null && typeof window !== 'undefined') {
36+
baseHref = window.location.origin;
37+
}
38+
// i18n files are in `wwwroot/assets/`
39+
return new TranslateHttpLoader(http, `${baseHref}/assets/i18n/`, '.json');
40+
}
41+
42+
@NgModule({
43+
declarations: [
44+
AppComponent,
45+
NavMenuComponent,
46+
CounterComponent,
47+
UsersComponent,
48+
UserDetailComponent,
49+
HomeComponent,
50+
NotFoundComponent,
51+
NgxBootstrapComponent
52+
],
53+
imports: [
54+
CommonModule,
55+
BrowserModule.withServerTransition({
56+
appId: 'my-app-id' // make sure this matches with your Server NgModule
57+
}),
58+
HttpClientModule,
59+
TransferHttpCacheModule,
60+
BrowserTransferStateModule,
61+
62+
63+
FormsModule,
64+
Ng2BootstrapModule.forRoot(), // You could also split this up if you don't want the Entire Module imported
65+
66+
// i18n support
67+
TranslateModule.forRoot({
68+
loader: {
69+
provide: TranslateLoader,
70+
useFactory: (createTranslateLoader),
71+
deps: [HttpClient, [ORIGIN_URL]]
72+
}
73+
}),
74+
75+
// App Routing
76+
RouterModule.forRoot([
77+
{
78+
path: '',
79+
redirectTo: 'home',
80+
pathMatch: 'full'
81+
},
82+
{
83+
path: 'home', component: HomeComponent,
84+
85+
// *** SEO Magic ***
86+
// We're using "data" in our Routes to pass in our <title> <meta> <link> tag information
87+
// Note: This is only happening for ROOT level Routes, you'd have to add some additional logic if you wanted this for Child level routing
88+
// When you change Routes it will automatically append these to your document for you on the Server-side
89+
// - check out app.component.ts to see how it's doing this
90+
data: {
91+
title: 'Homepage',
92+
meta: [{ name: 'description', content: 'This is an example Description Meta tag!' }],
93+
links: [
94+
{ rel: 'canonical', href: 'http://blogs.example.com/blah/nice' },
95+
{ rel: 'alternate', hreflang: 'es', href: 'http://es.example.com/' }
96+
]
97+
}
98+
},
99+
{
100+
path: 'counter', component: CounterComponent,
101+
data: {
102+
title: 'Counter',
103+
meta: [{ name: 'description', content: 'This is an Counter page Description!' }],
104+
links: [
105+
{ rel: 'canonical', href: 'http://blogs.example.com/counter/something' },
106+
{ rel: 'alternate', hreflang: 'es', href: 'http://es.example.com/counter' }
107+
]
108+
}
109+
},
110+
{
111+
path: 'users', component: UsersComponent,
112+
data: {
113+
title: 'Users REST example',
114+
meta: [{ name: 'description', content: 'This is User REST API example page Description!' }],
115+
links: [
116+
{ rel: 'canonical', href: 'http://blogs.example.com/chat/something' },
117+
{ rel: 'alternate', hreflang: 'es', href: 'http://es.example.com/users' }
118+
]
119+
}
120+
},
121+
{
122+
path: 'ngx-bootstrap', component: NgxBootstrapComponent,
123+
data: {
124+
title: 'Ngx-bootstrap demo!!',
125+
meta: [{ name: 'description', content: 'This is an Demo Bootstrap page Description!' }],
126+
links: [
127+
{ rel: 'canonical', href: 'http://blogs.example.com/bootstrap/something' },
128+
{ rel: 'alternate', hreflang: 'es', href: 'http://es.example.com/bootstrap-demo' }
129+
]
130+
}
131+
},
132+
133+
{ path: 'lazy', loadChildren: './containers/lazy/lazy.module#LazyModule'},
134+
135+
{
136+
path: '**', component: NotFoundComponent,
137+
data: {
138+
title: '404 - Not found',
139+
meta: [{ name: 'description', content: '404 - Error' }],
140+
links: [
141+
{ rel: 'canonical', href: 'http://blogs.example.com/bootstrap/something' },
142+
{ rel: 'alternate', hreflang: 'es', href: 'http://es.example.com/bootstrap-demo' }
143+
]
144+
}
145+
}
146+
], {
147+
// Router options
148+
useHash: false,
149+
preloadingStrategy: PreloadAllModules,
150+
initialNavigation: 'enabled'
151+
})
152+
],
153+
providers: [
154+
LinkService,
155+
UserService,
156+
TranslateModule
157+
],
158+
bootstrap: [AppComponent]
159+
})
160+
export class AppModuleShared {
161+
}

‎ClientApp/app/containers/users/users.component.html.orig

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<h1>This is a RestAPI Example (hitting WebAPI in our case)</h1>
2+
3+
<blockquote>
4+
Let's get some fake users from Rest:<br>
5+
You can find the Web API Routes in <code>{{ "/Server/RestAPI/ ... "}}</code>
6+
</blockquote>
7+
8+
<div>
9+
<label>User name:</label> <input #userName />
10+
<button class="btn btn-default" (click)="addUser(userName.value); userName.value=''">
11+
Add
12+
</button>
13+
</div>
14+
15+
<p *ngIf="!users"><em>Loading...</em></p>
16+
<h2>Users</h2>
17+
<ul class="users">
18+
<li *ngFor="let user of users"
19+
[class.selected]="user === selectedUser"
20+
(click)="onSelect(user)"
21+
[@flyInOut]>
22+
<span class="badge">{{user.id}}</span> {{user.name}}
23+
<button class="delete"
24+
(click)="deleteUser(user); $event.stopPropagation()">
25+
x
26+
</button>
27+
</li>
28+
</ul>
29+
<<<<<<< HEAD
30+
<app-user-detail (userUpdate)="onUserUpdate($event)" [user]="selectedUser"></app-user-detail>
31+
=======
32+
<app-user-detail [user]="selectedUser"></app-user-detail>
33+
>>>>>>> feat(Angular 5.0): update engine-etc for angular 5.0 & Domino (#437)

0 commit comments

Comments
 (0)