Skip to content

Instantly share code, notes, and snippets.

@Hotell

Hotell/app\app.component.ts

Created June 30, 2016 22:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save Hotell/603f356a55da7f543c0b6d40b42d9596 to your computer and use it in GitHub Desktop.
Save Hotell/603f356a55da7f543c0b6d40b42d9596 to your computer and use it in GitHub Desktop.
Download ZIP
ngMetadata 2.x - quick start
Raw
app\app.component.ts
import { Component } from 'ng-metadata/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 1 App <small>with ng-metadata!</small></h1>'
})
export class AppComponent { }
Raw
app\index.ts
export { AppComponent } from './app.component';
Raw
app\main.ts
import { bootstrap } from 'ng-metadata/platform-browser-dynamic';
import { AppComponent } from './index';
bootstrap( AppComponent );
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="https://npmcdn.com/core-js/client/shim.min.js"></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="https://code.angularjs.org/1.5.7/angular.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<link rel="stylesheet" href="style.css">
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
Raw
script.js
console.log('Hello World!');
Raw
styles.css
/* todo: add styles */
Raw
systemjs.config.js
System.config({
//use typescript for compilation
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
}
},
//map tells the System loader where to look for things
map: {
'app': './app',
'ng-metadata': 'https://npmcdn.com/ng-metadata',
'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
'ts': 'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
'typescript': 'https://npmcdn.com/typescript@1.9.0-dev.20160409/lib/typescript.js',
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
'ng-metadata': {
defaultExtension: 'js'
},
'rxjs': {
main: 'index.js',
defaultExtension: 'js'
}
}
});
Raw
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment