System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './src',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript@2.0.2/lib/typescript.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
<!DOCTYPE html>
<html>
<head>
<base href="." />
<title>angular2 playground</title>
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
### Angular Starter Plunker - Typescript
//our root app component
import { Component, NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Router, Routes, RouterModule, ROUTER_DIRECTIVES } from '@angular/router'
import { GlobalPopupComponent } from './global-popup.component';
@Component({
selector: 'my-app',
template: `
<div>
<h2>Secondary state test</h2>
<p>
<strong>Goal:</strong> Open the modal, then from there - in a single function, close the modal & navigate to a new page
</p>
<p><strong>The issue: It only seems to work with 2 separate calls...</strong></p>
<h4>Modal control</h4>
<button (click)="openModal()">Open modal</button>
<button (click)="closeModal()">Close modal</button>
<h4></h4>
<a routerLink="/">home</a>
<a routerLink="/second">second page</a>
<ul>
<li>is home active: {{ isHomeActive }} </li>
<li>is feature active: {{ isFeatureActive }} </li>
<li> url: {{ url }} </li>
</ul>
<hr>
<router-outlet></router-outlet>
<div style="background-color: #ccc;padding: 25px;">
<router-outlet name="popup"></router-outlet>
</div>
</div>
`,
})
export class App {
constructor(
private _router: Router) {
}
public openModal() {
this._router.navigate(['', { outlets: { popup: 'global-popup' } } ])
}
public closeModal() {
this._router.navigate(['', { outlets: { popup: null } } ])
}
public get isHomeActive() {
return this._router.isActive('/', true);
}
public get isFeatureActive() {
return this._router.isActive('/second', true);
}
public get url() {
return this._router.url;
}
}
@Component({
template: `<h1>Home</h1>
<a routerLink="/feature">route to feature</a>
<hr>`
})
export class HomeComponent {
}
@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: '',
children: [
{
path: '',
// NOTE: swap loadChildren out for component and
// refreshing the page at root with global secondary
// route no longer throws errors
// component: HomeComponent
loadChildren: './src/home/home.module#HomeModule'
},
{
path: 'second',
loadChildren: './src/feature/second.module#SecondModule'
}
]
}, {
path: 'global-popup',
component: GlobalPopupComponent,
outlet: 'popup'
}
]),
],
declarations: [
App,
HomeComponent,
GlobalPopupComponent
],
bootstrap: [App],
directives: [ROUTER_DIRECTIVES]
})
export class AppModule {
}
import { Component } from '@angular/core'
@Component({
selector: 'feature-comp',
template: `
<div style="background-color: lightblue">
<h1>Second page</h1>
<div>This is now the second page</div>
</div>
`
})
export class SecondComponent {}
import { NgModule } from '@angular/core'
import { RouterModule } from '@angular/router'
import { SecondComponent } from './second.component';
import { FeaturePopupComponent } from './feature-popup.component';
@NgModule({
imports: [
RouterModule.forChild([{
path: '',
component: SecondComponent
}])
],
exports: [RouterModule],
declarations: [
SecondComponent
]
})
export class SecondModule {}
import { Component } from '@angular/core'
import { Router, Routes, RouterModule, ROUTER_DIRECTIVES } from '@angular/router'
@Component({
template: `<h1>global popup</h1>
<button (click)="closeAndNav_doubleCallHack()">Nav away & close - double-call hack</button>
<button (click)="closeAndNav_singleCall()">Nav away & close - broken single call</button>
<br>
<button (click)="closeModal()">Close modal</button>
`
})
export class GlobalPopupComponent {
constructor(
private _router: Router
) {
}
public closeAndNav_singleCall() {
return this._router.navigate(['/second', {outlets: { popup: null }}]);
}
public closeAndNav_doubleCallHack() {
// try - clear outlet, then navigate
// return this._router.navigate(['', {outlets: { popup: null }}]).then(() => { this._router.navigate(['second']); } );
// try - navigate, then clear outlet
return this._router.navigate(['second']).then(() => { this._router.navigate(['', {outlets: { popup: null }}]); })
}
public closeModal() {
return this._router.navigate(['', { outlets: { popup: null } } );
}
}
import { Component } from '@angular/core'
@Component({
selector: 'home-comp',
template: `<h1>Home page</h1>
<div>This is just the home page</div>`
})
export class HomeComponent {}
import { NgModule } from '@angular/core'
import { RouterModule } from '@angular/router'
import { HomeComponent } from './home.component';
import { HomePopupComponent } from './home-popup.component';
@NgModule({
imports: [
RouterModule.forChild([{
path: '',
component: HomeComponent
}])
],
exports: [RouterModule],
declarations: [
HomeComponent
]
})
export class HomeModule {}
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
/* Styles go here */