I'm going to preface this question by saying that I'm fairly new to Angular 2 and Angular in general, so the odds are that this question is going to have a really easy answer. Anyway, here it is. I've been trying to a create a website, and my issue is that Angular won't insert my components. It stays at the part where it says Loading... and won't load in my things, even when they're simple HTML. I'll provide what I'm pretty sure are the pertinent files, but if you need anything more, don't hesitate to ask.
Here's systemjs.config.js:
(function (global) {
System.config({
transpiler: 'ts',
typescriptOptions: {
// Copy of compiler options in standard tsconfig.json
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2015", "dom"],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
// paths serve as alias
'npm:': 'https://unpkg.com/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
'app': 'app',
// angular bundles
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@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/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.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/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
// other libraries
'rxjs': 'npm:rxjs@5.0.1',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'ts': 'npm:plugin-typescript@5.2.7/lib/plugin.js',
'typescript': 'npm:typescript@2.2.1/lib/typescript.js',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './src/bootstrap.ts',
defaultExtension: 'ts',
meta: {
'./*.ts': {
loader: 'systemjs-angular-loader.js'
}
}
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
systemjs-angular-loader.js:
var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;
module.exports.translate = function (load) {
if (load.source.indexOf('moduleId') != -1) return 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;
if (!baseHref.startsWith('/base/')) { // it is not karma
basePath = basePath.replace(baseHref, '');
}
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;
};
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Website</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/css/app.css" />
<base href="/">
</head>
<body>
<abi-app>Loading...</abi-app>
</body>
<!-- Libraries imports -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
//bootstrap the Angular2 application
System.import('app').catch(console.log.bind(console));
</script>
<script src="http://localhost:35729/livereload.js"></script>
</html>
gulpfile.js:
var gulp = require('gulp');
var connect = require('gulp-connect');
var PATHS = {
src: 'src/**/*.ts',
html: 'src/**/*.html',
css: 'src/**/*.css'
};
gulp.task('clean', function (done) {
var del = require('del');
del(['dist'], done);
});
gulp.task('ts2js', function () {
var typescript = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');
var tsResult = gulp.src(PATHS.src)
.pipe(sourcemaps.init())
.pipe(typescript({
noImplicitAny: true,
module: 'system',
target: 'ES5',
moduleResolution: 'node',
emitDecoratorMetadata: true,
experimentalDecorators: true
}));
return tsResult.js
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist'))
.pipe(connect.reload());
});
gulp.task('play', ['ts2js'], function () {
var http = require('http');
var open = require('open');
var watch = require('gulp-watch');
var port = 9000,
app;
connect.server({
root: __dirname,
port: port,
livereload: true,
fallback: 'index.html'
});
open('http://localhost:' + port + '/index.html');
gulp.watch(PATHS.src, ['ts2js']);
watch(PATHS.html).pipe(connect.reload());
watch(PATHS.css).pipe(connect.reload());
});
bootstrap.ts:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './components/app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';
import { Home } from './home';
import { Gallery } from './gallery';
import { AppRoutingModule } from './app-routing.module';
import { NavigationMenuComponent } from './navigation-menu/navigation-menu.component';
import { ABIComponent } from './app.component';
import { HomeModule } from './home/home.module';
@NgModule({
imports: [BrowserModule, HttpModule, HomeModule, AppRoutingModule],
declarations: [ABIComponent, NavigationMenuComponent ],
bootstrap: [ABIComponent ]
})
export class AppModule { }
app.component.ts:
import {Component} from '@angular/core';
import { Router } from '@angular/router';
import { NavigationMenuComponent } from './navigation-menu/navigation-menu.component';
@Component({
selector: 'abi-app',
template: `<div>
<h1>Hello World!</h1>
</div>`
})
export class ABIComponent {
}
If you're interested in what the tree is of this project:
/src
--components
--- app
---- app.component.ts
---- app.module.ts
-- bootstrap.ts
/gulpfile.js
/index.html
/systemjs-angular-loader.js
/systemjs.config.js
Use @angular/cli instead of using webpack:-