diff --git a/app/app.component.html b/app/app.component.html index 9a0fc87..c6766fa 100644 --- a/app/app.component.html +++ b/app/app.component.html @@ -1 +1 @@ -

Angular2 quickstart

\ No newline at end of file +

Angular2 component

diff --git a/app/app.module.ts b/app/app.module.ts index e096758..8d09ff4 100644 --- a/app/app.module.ts +++ b/app/app.module.ts @@ -2,10 +2,13 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; +import { UpgradeModule } from '@angular/upgrade/static'; @NgModule({ - imports: [ BrowserModule ], + imports: [ BrowserModule, UpgradeModule ], declarations: [ AppComponent ], - bootstrap: [ AppComponent ] + entryComponents: [ AppComponent ] }) -export class AppModule { } \ No newline at end of file +export class AppModule { + ngDoBootstrap() {} +} diff --git a/app/main.ts b/app/main.ts index 3d4db6d..91da2d6 100644 --- a/app/main.ts +++ b/app/main.ts @@ -1,5 +1,21 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app.module'; - -platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { UpgradeModule } from '@angular/upgrade/static'; +import { AppModule } from './app.module'; +import { AppComponent } from './app.component'; + +import { downgradeComponent } from '@angular/upgrade/static'; + +declare var angular: angular.IAngularStatic; +let myApp = angular.module('mainApp', []) + .directive( + 'appComponent', + downgradeComponent({component: AppComponent}) as angular.IDirectiveFactory + ); +myApp.controller('MainCtrl', function() { + this.message = 'Upgrade angularjs to angular' +}); + +platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { + const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; + upgrade.bootstrap(document.documentElement, ['mainApp']); +}); diff --git a/index.html b/index.html index bf4344f..c7f2a69 100644 --- a/index.html +++ b/index.html @@ -6,21 +6,24 @@ + + - - - Loading... +
+ {{ mainCtrl.message }} +
+ diff --git a/package.json b/package.json index c1a5129..307bb28 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@angular/platform-browser": "4.2.0-beta.0", "@angular/platform-browser-dynamic": "4.2.0-beta.0", "@angular/router": "4.2.0-beta.0", + "@angular/upgrade": "4.2.0-beta.0", "core-js": "^2.4.1", "rxjs": "^5.1.0", "systemjs": "0.19.41", diff --git a/systemjs-angular-loader.js b/systemjs-angular-loader.js index bdbb737..9da8bdc 100644 --- a/systemjs-angular-loader.js +++ b/systemjs-angular-loader.js @@ -1,46 +1,46 @@ -var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm; -var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g; -var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g; - -module.exports.translate = function(load){ - var url = document.createElement('a'); - url.href = load.address; - - var basePathParts = url.pathname.split('/'); - - basePathParts.pop(); - var basePath = basePathParts.join('/'); - - var baseHref = document.createElement('a'); - baseHref.href = this.baseURL; - baseHref = baseHref.pathname; - - basePath = basePath.replace(baseHref, ''); - basePath = basePath.replace('dist', 'app') - - load.source = load.source - .replace(templateUrlRegex, function(match, quote, url){ - let resolvedUrl = url; - - if (url.startsWith('.')) { - resolvedUrl = basePath + url.substr(1); - } - - return 'templateUrl: "' + resolvedUrl + '"'; - }) - .replace(stylesRegex, function(match, relativeUrls) { - var urls = []; - - while ((match = stringRegex.exec(relativeUrls)) !== null) { - if (match[2].startsWith('.')) { - urls.push('"' + basePath + match[2].substr(1) + '"'); - } else { - urls.push('"' + match[2] + '"'); - } - } - - return "styleUrls: [" + urls.join(', ') + "]"; - }); - - return load; -}; \ No newline at end of file +var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm; +var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g; +var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g; + +module.exports.translate = function(load){ + var url = document.createElement('a'); + url.href = load.address; + + var basePathParts = url.pathname.split('/'); + + basePathParts.pop(); + var basePath = basePathParts.join('/'); + + var baseHref = document.createElement('a'); + baseHref.href = this.baseURL; + baseHref = baseHref.pathname; + + basePath = basePath.replace(baseHref, ''); + basePath = basePath.replace('dist', 'app') + + load.source = load.source + .replace(templateUrlRegex, function(match, quote, url){ + var resolvedUrl = url; + + if (url.startsWith('.')) { + resolvedUrl = basePath + url.substr(1); + } + + return 'templateUrl: "' + resolvedUrl + '"'; + }) + .replace(stylesRegex, function(match, relativeUrls) { + var urls = []; + + while ((match = stringRegex.exec(relativeUrls)) !== null) { + if (match[2].startsWith('.')) { + urls.push('"' + basePath + match[2].substr(1) + '"'); + } else { + urls.push('"' + match[2] + '"'); + } + } + + return "styleUrls: [" + urls.join(', ') + "]"; + }); + + return load; +}; diff --git a/systemjs.config.js b/systemjs.config.js index ef8b5e9..1a14500 100644 --- a/systemjs.config.js +++ b/systemjs.config.js @@ -1,44 +1,44 @@ -/** - * System configuration for Angular 2 samples - * Adjust as necessary for your application needs. - */ -(function (global) { - System.config({ - paths: { - // paths serve as alias - 'npm:': 'node_modules/' - }, - // map tells the System loader where to look for things - map: { - // our app is within the app folder - app: 'dist', - // angular bundles - '@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', - - // other libraries - 'rxjs': 'npm:rxjs' - }, - // packages tells the System loader how to load when no filename and/or no extension - packages: { - app: { - main: './main.js', - defaultExtension: 'js', - meta: { - './*.js': { - loader: 'systemjs-angular-loader.js' - } - } - }, - rxjs: { - defaultExtension: 'js' - } - } - }); -})(this); \ No newline at end of file +/** + * System configuration for Angular 2 samples + * Adjust as necessary for your application needs. + */ +(function (global) { + System.config({ + paths: { + // paths serve as alias + 'npm:': 'node_modules/' + }, + // map tells the System loader where to look for things + map: { + // our app is within the app folder + app: 'dist', + // angular bundles + '@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/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', + // other libraries + 'rxjs': 'npm:rxjs' + }, + // packages tells the System loader how to load when no filename and/or no extension + packages: { + app: { + main: './main.js', + defaultExtension: 'js', + meta: { + './*.js': { + loader: 'systemjs-angular-loader.js' + } + } + }, + rxjs: { + defaultExtension: 'js' + } + } + }); +})(this); diff --git a/tsconfig.json b/tsconfig.json index d8d61b2..e880c22 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,14 +1,14 @@ -{ - "compilerOptions": { - "target": "es5", - "module": "commonjs", - "moduleResolution": "node", - "sourceMap": true, - "lib": [ "es2015", "dom" ], - "outDir": "dist", - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "removeComments": false, - "noImplicitAny": false - } -} \ No newline at end of file +{ + "compilerOptions": { + "target": "es5", + "module": "umd", + "moduleResolution": "node", + "sourceMap": true, + "lib": [ "es2015", "dom" ], + "outDir": "dist", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "removeComments": false, + "noImplicitAny": false + } +}