FAQ
- -- Fun fact: This Component was lazy loaded :)- -
- Check your Network tab to see that the JS file came only when you first hit this Route. -
How to add a route in the app:
- --
-
- Create a folder & your Component in Client\Containers\ -
- Add the Component to: Client\Containers\index.ts (this is the "barrels" file for all containers) -
- Add the Component to MODULES & ROUTES within: \Client\app\platform-modules\app.module.ts -
How can I disable Universal / SSR (Server-side rendering)?
- -To disable SSR, go to Views/Home/Index.cshtml and remove asp-prerender-module="Client/bootstrap-server" from the"app-root"
-component there in the cshtml file.
-
-How do I prevent XHR calls from running again on the Client?
- -Using the provided GET from HttpCacheService as opposed to regular Http, it will automatically Cache the -response on the server, and pass it down through the html for you, and when the Client tries to run it again, -it will instantly grab the result from there. - -This is essential for important XHR calls on a page that happen on page load - -How do I have code run only in the Browser?
- -Angular Universal has isBrowser & isNode you can import from angular2-universal to conditionally run code. -This is perfect for situations where code could error on the server. Also, always remember that things like -setTimeout / setInterval / etc should always be wrapped in this, as you want to completely avoid doing them on the Server. - -
-{{ "
-import { isBrowser } from 'angular2-universal';
-
-if (isBrowser) {
- // do something only in the Browser
-}
-"}}
-
-
-How can I use Material2 with this Repo?
- -For now, Material2 is still in beta, and isn't fully functioning with Universal (it will sometime soon though!), -so temporarily disable SSR (server-side rendering) so you can use it within your application until updates come -from Material, and you can have it rendered on the server as well. Read the Material docs to see how to add Material -to your Angular application, with SSR disabled everything should work without any problems. - -How can I use jQuery and/or some jQuery plugins with Angular Universal?
- -Note: If at all possible, try to avoid using jQuery or libraries dependent on it, as there are better, - more abstract ways of dealing with the DOM in Angular (2+) such as using the Renderer, etc.- -Yes, of course but there are a few things you need to setup before doing this. First, make sure jQuery is included in -webpack vendor file, and that you have a webpack Plugin setup for it.
{{ "new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' })" }}
-
-Now, make sure any "plugins" etc that you have, are only included in your bootstrap-client.ts file.
-(ie: import 'slick-carousel';) In a Component you want to use jQuery, make sure to import it near the top like so:
-
-
-import * as $ from 'jquery';
-
-
-Always make sure to wrap anything jQuery oriented in Universal's isBrowser conditional!
-
-\ No newline at end of file diff --git a/Client/containers/+faq/faq.component.ts b/Client/containers/+faq/faq.component.ts deleted file mode 100644 index 01328b46..00000000 --- a/Client/containers/+faq/faq.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { Component, Inject, ChangeDetectionStrategy, ViewEncapsulation, OnInit } from '@angular/core'; - -@Component({ - changeDetection: ChangeDetectionStrategy.Default, - encapsulation: ViewEncapsulation.Emulated, - selector: 'app-faq', - templateUrl: './faq.component.html' -}) -export class FAQComponent implements OnInit { - - // Use "constructor"s only for dependency injection - constructor() { } - - // Here you want to handle anything with @Input()'s @Output()'s - // Data retrieval / etc - this is when the Component is "ready" and wired up - ngOnInit() { - console.log('\n\nFAQ Component lazy-loaded!!\n\n'); - } - -} diff --git a/Client/containers/+faq/faq.module.ts b/Client/containers/+faq/faq.module.ts deleted file mode 100644 index 369c5f34..00000000 --- a/Client/containers/+faq/faq.module.ts +++ /dev/null @@ -1,24 +0,0 @@ -/* - * Lazy-Loaded Module & Component - * You can see that it wasn't referenced anywhere in the app / modules - * Except for in the app.routes.ts file - */ - -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; - -import { BaseSharedModule } from 'app'; -import { FAQComponent } from './faq.component'; - -@NgModule({ - imports: [ - BaseSharedModule, - RouterModule.forChild([ - { path: '', component: FAQComponent } - ]) - ], - declarations: [ - FAQComponent - ] -}) -export default class FAQModule { } diff --git a/Client/containers/bootstrap/bootstrap.component.html b/Client/containers/bootstrap/bootstrap.component.html deleted file mode 100644 index 4f201118..00000000 --- a/Client/containers/bootstrap/bootstrap.component.html +++ /dev/null @@ -1,55 +0,0 @@ - -
Ng2-bootstrap Demo:
- -- Here we're using Bootstrap via ng2-bootstrap, which can even be rendered on the server! -- -
-
-
- -
Bootstrap Accordion demo:
- -- - -
- -
-
-
-
-
-The body of the accordion group grows to fit the contents
- -{{item}}
-
- I can have markup, too!
-
-
- This is just some content to illustrate fancy headings.
- {{ title }}
- -- Enjoy the latest features from .NET Core & Angular2! -- - -
- For more info check the repo here: AspNetCore-Angular2-Universal repo - -
-
-
\ No newline at end of file
diff --git a/Client/containers/home/home.component.spec.ts b/Client/containers/home/home.component.spec.ts
deleted file mode 100644
index 1b66832d..00000000
--- a/Client/containers/home/home.component.spec.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-///
-
-
- What does this Starter offer?
--
-
- ASP.NET Core 1.1 :: (Currently VS2015 only) - .csproj 2017 version coming when closer to release -
-
- Angular 2.* front-end UI framework
-
-
-
- Universal - server-side rendering for SEO, deep-linking, and incredible performance. -
- NgRx - Redux architecture -
- HMR State Management - Don't lose your applications state during HMR! -
- AoT (Ahead-of-time) production compilation for even faster prod builds. (UPCOMING) -
- -
- The latest TypeScript 2.* features
-
-
-
-
- "Path" support example - create your own custom directory paths to avoid `../../` directory diving.
- Check the tsconfig to see how they are setup. -
-
- -
- "Path" support example - create your own custom directory paths to avoid `../../` directory diving.
-
- Webpack 2 (current in Beta)
-
-
-
- TS2 aware path support -
- Hot Module Reloading/Replacement for an amazing dev experience. -
- Tree-shaking (UPCOMING) -
- - Bootstrap (ng2-bootstrap) : Bootstrap capable of being rendered even on the server. -
- Unit testing via karma & jasmine. -
- e2e testing via protractor. -
-
-
-Having issues?
- --
-
- Issues with this Starter?
Please post an issue here: AspNetCore-Angular2-Universal repo
- - Issues with Universal itself?
Please post an issue here: Angular Universal repo
-
by CSS element selector - de = fixture.debugElement.query(By.css('h1')); - - const titleText = de.nativeElement.textContent; - expect(titleText).toContain(comp.title); - })); - -}); diff --git a/Client/containers/home/home.component.ts b/Client/containers/home/home.component.ts deleted file mode 100644 index d6245e78..00000000 --- a/Client/containers/home/home.component.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { Component, OnInit, Inject } from '@angular/core'; -import { isBrowser } from 'angular2-universal'; - -@Component({ - selector: 'app-home', - templateUrl: './home.component.html' -}) -export class HomeComponent implements OnInit { - - title: string = 'Angular2 Universal & ASP.NET Core advanced starter-kit'; - - // Use "constructor"s only for dependency injection - constructor () { - } - - // Here you want to handle anything with @Input()'s @Output()'s - // Data retrieval / etc - this is when the Component is "ready" and wired up - ngOnInit () { - console.log('Are we inside the Browser ? ' + isBrowser); - } -} diff --git a/Client/containers/index.ts b/Client/containers/index.ts deleted file mode 100644 index 6de4cb1f..00000000 --- a/Client/containers/index.ts +++ /dev/null @@ -1,21 +0,0 @@ - -/* - This is our "Barrels" index (in this folder) - Here we can just export all individual things - - We're also using TypeScript2's new "paths" to create non-directory import locations - So instead of having to do something crazy like: "from '../../containers/'" - - We can just do: - import { HomeComponent } from 'app-containers'; - - Makes life easier! -*/ - -export * from './rest-test/rest-test.component'; -export * from './home/home.component'; -export * from './bootstrap/bootstrap.component'; -export * from './login/login.component'; -export * from './platform-examples/examples.component'; -export * from './not-found/not-found.component'; -export * from './chat/chat.component'; diff --git a/Client/containers/login/login.component.ts b/Client/containers/login/login.component.ts deleted file mode 100644 index d6cb1c4d..00000000 --- a/Client/containers/login/login.component.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { Router } from '@angular/router'; -import { Store } from '@ngrx/store'; -import { Component, OnInit } from '@angular/core'; - -import { AppState, LOGIN_USER } from 'app'; - -// Demo model -export class UserModel { - username: string; - password: string; -} - -@Component({ - selector: 'app-login', - template: ` -
- ` -}) -export class LoginComponent implements OnInit { - - user: UserModel = new UserModel(); - - // Use "constructor"s only for dependency injection - constructor(private router: Router, private store: Store
-
\ No newline at end of file
diff --git a/Client/containers/not-found/not-found.component.ts b/Client/containers/not-found/not-found.component.ts
deleted file mode 100644
index 664ab6c1..00000000
--- a/Client/containers/not-found/not-found.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Component, OnInit, Inject } from '@angular/core';
-
-
-@Component({
- selector: 'app-not-found',
- templateUrl: './not-found.component.html',
- styleUrls: ['./not-found.component.css']
-})
-export class NotFoundComponent implements OnInit {
- // Use "constructor"s only for dependency injection
- constructor (@Inject('isBrowser') private isBrowser: boolean) {
- // Example of how to Inject the isBrowser/isNode we injected in our app.browser & app.server NgModules
- }
-
- // Here you want to handle anything with @Input()'s @Output()'s
- // Data retrieval / etc - this is when the Component is "ready" and wired up
- ngOnInit () {
- console.log('Are we inside the Browser ? ' + this.isBrowser);
- }
-}
diff --git a/Client/containers/platform-examples/examples.component.ts b/Client/containers/platform-examples/examples.component.ts
deleted file mode 100644
index ab0efdf5..00000000
--- a/Client/containers/platform-examples/examples.component.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { isBrowser } from 'angular2-universal';
-import { Observable } from 'rxjs/Rx';
-import { StorageService } from 'app-shared';
-
-@Component({
- selector: 'app-examples',
- template: `
-
-
- -
-
-
-
- Page Not Found Error 404
--
The page you requested could not be found, either contact your webmaster or try again. Use your browsers Back button to navigate to the page you have prevously come from
-Or you could just press this neat little button:
- Take Me Home -- -
Platform specific examples
- -- With Universal, we can decide which logic we want to run in "what" situation (or platform). - Certain things, we don't want running on the server:- -
- - timeouts, intervals, references to window/document/navigator, etc... -
- - We want to use platform detecting logic from Universal such as isBrowser | isNode to wrap
- around these things. -
Counter example = {{ browserPlatformInterval | async}}
- -- We can't let an "interval" run on the server, for it would loop endlessly and we'd never get a paint.- ` -}) -export class ExamplesComponent implements OnInit { - - browserPlatformInterval: Observable
- In a situation like this we used "isBrowser" from Universal to wrap our logic per platform. -
This is a RestAPI Example (hitting WebAPI in our case)
- -- Let's get some fake users from Rest:- -
- You can find the Web API Routes in{{ "/Server/Api/ ... "}}-
Loading...
- -| User ID | -Name | -
|---|---|
| {{ user.id }} | -{{ user.name }} | -
+
diff --git a/ClientApp/app/app.component.scss b/ClientApp/app/app.component.scss
new file mode 100644
index 00000000..1e7eea64
--- /dev/null
+++ b/ClientApp/app/app.component.scss
@@ -0,0 +1,71 @@
+@import 'http://github.com/variables';
+/* *** Overall APP Styling can go here ***
+ --------------------------------------------
+ Note: This Component has ViewEncapsulation.None so the styles will bleed out
+
+*/
+
+body {
+ line-height: 18px;
+ padding-top: $header-height;
+}
+
+.body-content {
+ margin: auto;
+}
+
+h1 {
+ border-bottom: 3px theme-color('accent') solid;
+ font-size: 24px;
+}
+
+h2 {
+ font-size: 20px;
+}
+
+h1,
+h2,
+h3 {
+ padding: 3px 0;
+}
+
+ul {
+ padding: 10px 25px;
+}
+
+ul li {
+ padding: 5px 0;
+}
+
+blockquote {
+ margin: 25px 10px;
+ padding: 10px 35px 10px 10px;
+ border-left: 10px color('green') solid;
+ background: $gray-100;
+}
+
+blockquote a,
+blockquote a:hover {
+ color: $green;
+}
+
+@include media-breakpoint-up(lg) {
+ body {
+ padding-top: 30px;
+ }
+ .body-content {
+ margin-left: $menu-max-width;
+ }
+ h1 {
+ border-bottom: 5px #4189c7 solid;
+ font-size: 36px;
+ }
+ h2 {
+ font-size: 30px;
+ }
+ h1,
+ h2,
+ h3 {
+ padding: 10px 0;
+ }
+}
diff --git a/ClientApp/app/app.component.ts b/ClientApp/app/app.component.ts
new file mode 100644
index 00000000..415c196a
--- /dev/null
+++ b/ClientApp/app/app.component.ts
@@ -0,0 +1,103 @@
+import {
+ Component,
+ Injector,
+ OnDestroy,
+ OnInit,
+ ViewEncapsulation
+} from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { REQUEST } from '@nguniversal/aspnetcore-engine/tokens';
+// i18n support
+import { TranslateService } from '@ngx-translate/core';
+import { Subscription } from 'rxjs';
+import { filter, map, mergeMap } from 'rxjs/operators';
+import { LinkService } from './shared/link.service';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ styleUrls: ['./app.component.scss'],
+ encapsulation: ViewEncapsulation.None
+})
+export class AppComponent implements OnInit, OnDestroy {
+ // This will go at the END of your title for example "Home - Angular Universal..." <-- after the dash (-)
+ private endPageTitle: string = 'Angular Universal and ASP.NET Core Starter';
+ // If no Title is provided, we'll use a default one before the dash(-)
+ private defaultPageTitle: string = 'My App';
+
+ private routerSub$: Subscription;
+ private request;
+
+ constructor(
+ private router: Router,
+ private activatedRoute: ActivatedRoute,
+ private title: Title,
+ private meta: Meta,
+ private linkService: LinkService,
+ public translate: TranslateService,
+ private injector: Injector
+ ) {
+ // this language will be used as a fallback when a translation isn't found in the current language
+ translate.setDefaultLang('en');
+
+ // the lang to use, if the lang isn't available, it will use the current loader to get them
+ translate.use('en');
+
+ this.request = this.injector.get(REQUEST);
+
+ console.log(`What's our REQUEST Object look like?`);
+ console.log(
+ `The Request object only really exists on the Server, but on the Browser we can at least see Cookies`
+ );
+ console.log(this.request);
+ }
+
+ ngOnInit() {
+ // Change "Title" on every navigationEnd event
+ // Titles come from the data.title property on all Routes (see app.routes.ts)
+ this._changeTitleOnNavigation();
+ }
+
+ ngOnDestroy() {
+ // Subscription clean-up
+ this.routerSub$.unsubscribe();
+ }
+
+ private _changeTitleOnNavigation() {
+ this.routerSub$ = this.router.events
+ .pipe(
+ filter(event => event instanceof NavigationEnd),
+ map(() => this.activatedRoute),
+ map(route => {
+ while (route.firstChild) route = route.firstChild;
+ return route;
+ }),
+ filter(route => route.outlet === 'primary'),
+ mergeMap(route => route.data)
+ )
+ .subscribe(event => {
+ this._setMetaAndLinks(event);
+ });
+ }
+
+ private _setMetaAndLinks(event) {
+ // Set Title if available, otherwise leave the default Title
+ const title = event['title']
+ ? `${event['title']} - ${this.endPageTitle}`
+ : `${this.defaultPageTitle} - ${this.endPageTitle}`;
+
+ this.title.setTitle(title);
+
+ const metaData = event['meta'] || [];
+ const linksData = event['links'] || [];
+
+ for (let i = 0; i < metaData.length; i++) {
+ this.meta.updateTag(metaData[i]);
+ }
+
+ for (let i = 0; i < linksData.length; i++) {
+ this.linkService.addTag(linksData[i]);
+ }
+ }
+}
diff --git a/ClientApp/app/app.module.browser.ts b/ClientApp/app/app.module.browser.ts
new file mode 100644
index 00000000..5162c3ca
--- /dev/null
+++ b/ClientApp/app/app.module.browser.ts
@@ -0,0 +1,40 @@
+import { NgModule } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ORIGIN_URL, REQUEST } from '@nguniversal/aspnetcore-engine/tokens';
+import { PrebootModule } from 'preboot';
+import { AppComponent } from './app.component';
+import { AppModuleShared } from './app.module';
+
+export function getOriginUrl() {
+ return window.location.origin;
+}
+
+export function getRequest() {
+ // the Request object only lives on the server
+ return { cookie: document.cookie };
+}
+
+@NgModule({
+ bootstrap: [AppComponent],
+ imports: [
+ PrebootModule.withConfig({ appRoot: 'app-root' }),
+ BrowserAnimationsModule,
+
+ // Our Common AppModule
+ AppModuleShared
+ ],
+ providers: [
+ {
+ // We need this for our Http calls since they'll be using an ORIGIN_URL provided in main.server
+ // (Also remember the Server requires Absolute URLs)
+ provide: ORIGIN_URL,
+ useFactory: getOriginUrl
+ },
+ {
+ // The server provides these in main.server
+ provide: REQUEST,
+ useFactory: getRequest
+ }
+ ]
+})
+export class AppModule {}
diff --git a/ClientApp/app/app.module.server.ts b/ClientApp/app/app.module.server.ts
new file mode 100644
index 00000000..06af629a
--- /dev/null
+++ b/ClientApp/app/app.module.server.ts
@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ServerModule } from '@angular/platform-server';
+import { PrebootModule } from 'preboot';
+import { AppComponent } from './app.component';
+import { AppModuleShared } from './app.module';
+
+import { TransferHttpCacheModule, StateTransferInitializerModule } from '@nguniversal/common';
+
+@NgModule({
+ bootstrap: [AppComponent],
+ imports: [
+ // Our Common AppModule
+ AppModuleShared,
+
+ ServerModule,
+ PrebootModule.withConfig({ appRoot: 'app-root' }),
+ NoopAnimationsModule,
+
+ TransferHttpCacheModule, // still needs fixes for 5.0
+ // Leave this commented out for now, as it breaks Server-renders
+ // Looking into fixes for this! - @MarkPieszak
+ // StateTransferInitializerModule // <-- broken for the time-being with ASP.NET
+ ]
+})
+export class AppModule {
+ constructor() {}
+}
diff --git a/ClientApp/app/app.module.ts b/ClientApp/app/app.module.ts
new file mode 100644
index 00000000..a30f46d8
--- /dev/null
+++ b/ClientApp/app/app.module.ts
@@ -0,0 +1,212 @@
+import { CommonModule } from '@angular/common';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import {
+ BrowserModule,
+ BrowserTransferStateModule
+} from '@angular/platform-browser';
+import { PreloadAllModules, RouterModule } from '@angular/router';
+import { ORIGIN_URL } from '@nguniversal/aspnetcore-engine/tokens';
+import { TransferHttpCacheModule } from '@nguniversal/common';
+// i18n support
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { AccordionModule } from 'ngx-bootstrap';
+import { AppComponent } from './app.component';
+import { NavMenuComponent } from './components/navmenu/navmenu.component';
+import { UserDetailComponent } from './components/user-detail/user-detail.component';
+import { CounterComponent } from './containers/counter/counter.component';
+import { HomeComponent } from './containers/home/home.component';
+import { NgxBootstrapComponent } from './containers/ngx-bootstrap-demo/ngx-bootstrap.component';
+import { NotFoundComponent } from './containers/not-found/not-found.component';
+import { UsersComponent } from './containers/users/users.component';
+import { LinkService } from './shared/link.service';
+import { UserService } from './shared/user.service';
+
+export function createTranslateLoader(http: HttpClient, baseHref) {
+ // Temporary Azure hack
+ if (baseHref === null && typeof window !== 'undefined') {
+ baseHref = window.location.origin;
+ }
+ // i18n files are in `wwwroot/assets/`
+ return new TranslateHttpLoader(http, `${baseHref}/assets/i18n/`, '.json');
+}
+
+@NgModule({
+ declarations: [
+ AppComponent,
+ NavMenuComponent,
+ CounterComponent,
+ UsersComponent,
+ UserDetailComponent,
+ HomeComponent,
+ NotFoundComponent,
+ NgxBootstrapComponent
+ ],
+ imports: [
+ CommonModule,
+ BrowserModule.withServerTransition({
+ appId: 'my-app-id' // make sure this matches with your Server NgModule
+ }),
+ HttpClientModule,
+ TransferHttpCacheModule,
+ BrowserTransferStateModule,
+ FormsModule,
+ ReactiveFormsModule,
+ AccordionModule.forRoot(), // You could also split this up if you don't want the Entire Module imported
+
+ // i18n support
+ TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useFactory: createTranslateLoader,
+ deps: [HttpClient, [ORIGIN_URL]]
+ }
+ }),
+
+ // App Routing
+ RouterModule.forRoot(
+ [
+ {
+ path: '',
+ redirectTo: 'home',
+ pathMatch: 'full'
+ },
+ {
+ path: 'home',
+ component: HomeComponent,
+
+ // *** SEO Magic ***
+ // We're using "data" in our Routes to pass in our
+
+
+
+ 
+
+