import { UpgradeModule, UpgradeAdapter, downgradeComponent } from '@angular/upgrade/static';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Component, EventEmitter, Input, NgModule, Output } from '@angular/core';
declare var angular: angular.IAngularStatic;
/////////////////////////////////////////////////////////////////////////////
// start AppComponent
@Component({
selector: 'app-root',
styles: [`
:host {
color: red;
}
`],
template: `
<footer>The Footer</footer>
`
})
export class AppComponent { }
//###########################################################################
/////////////////////////////////////////////////////////////////////////////
// downgrades
angular.module('ng2.downgrades', [])
.directive(
'appRoot',
downgradeComponent({
component: AppComponent
}) as angular.IDirectiveFactory
);
//###########################################################################
/////////////////////////////////////////////////////////////////////////////
// start AppModule
@NgModule({
imports: [
BrowserModule,
UpgradeModule
],
declarations: [
AppComponent
],
entryComponents: [
],
providers: [],
bootstrap: [
AppComponent
]
})
export class AppModule {
constructor(private upgrade: UpgradeModule) {
upgrade.bootstrap(document.body, ['ajsapp'], { strictDi: false });
}
ngDoBootstrap() { }
}
//###########################################################################
/////////////////////////////////////////////////////////////////////////////
// start Main
platformBrowserDynamic().bootstrapModule(AppModule);
//###########################################################################
<!DOCTYPE html>
<html>
<head>
<!-- Set the base href -->
<script data-require="angular.js@1.5.5" data-semver="1.5.0" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<!-- Polyfill(s) for older browsers -->
<script src="https://npmcdn.com/es6-shim@0.35.0/es6-shim.min.js"></script>
<script src="https://npmcdn.com/zone.js@0.8.5?main=browser"></script>
<script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
<script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<script src="ajs/ajsapp.js"></script>
</head>
<body>
<app-root-wrapper></app-root-wrapper>
</body>
</html>
/**
* PLUNKER VERSION (based on systemjs.config.js in angular.io)
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
var ngVer = '@4.3.1'; // lock in the angular package version; do not let it float to current!
//map tells the System loader where to look for things
var map = {
'app': 'app',
'@angular': 'https://npmcdn.com/@angular', // sufficient if we didn't pin the version
'@angular/upgrade/static': 'https://npmcdn.com/@angular/upgrade' + ngVer + '/bundles',
'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', // get latest
'rxjs': 'https://npmcdn.com/rxjs@5.1.0',
'ts': 'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
'typescript': 'https://npmcdn.com/typescript@1.8.10/lib/typescript.js',
};
//packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.ts', defaultExtension: 'ts' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade'
];
// Add map entries for each angular package
// only because we're pinning the version with `ngVer`.
ngPackageNames.forEach(function(pkgName) {
map['@angular/'+pkgName] = 'https://npmcdn.com/@angular/' + pkgName + ngVer + '/bundles';
});
// Add package entries for angular packages
ngPackageNames.forEach(function(pkgName) {
// Bundled (~40 requests):
packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
// Individual files (~300 requests):
//packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
packages['@angular/upgrade/static'] = {
main: 'upgrade-static.umd.js',
defaultExtension: 'js'
};
var config = {
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
}
},
map: map,
packages: packages
}
System.config(config);
})(this);
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
var app = angular.module('ajsapp', ['ui.router']);
app.component('appRootWrapper', {
template: `
<header>The Header</header>
<div ui-view></div>
<app-root></app-root>
`
})
app.component('ajsMain', {
template: '<h1>AngularJS Component\'s Template</h1>'
});
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/main');
$stateProvider
.state('main', {
url: '/main',
component: 'ajsMain',
});
});