Ich versuche, meine erste eckige 2 App mit Gulp in Visual Studio 2015 und seine Asp.net 4.5 zu bauen. 2 leeres Projekt. Projekt-Layout -> src und es hat App-Ordner und hier sind meine Dateien:Angular 2 wählt nicht index.html als Startseite aus dem Build-Verzeichnis und gibt Fehler geben Status 403 error (Gulp)
app.component.ts Datei:
import {Component, OnInit} from "@angular/core";
@Component({
selector: "app",
templateUrl: "./app/app.html"
})
export class AppComponent implements OnInit {
ngOnInit() {
console.log("Application component initialized ...");
}
}
app.html Datei:
<p>Angular 2 is running ... </p>
main.ts Datei:
/* Avoid: 'error TS2304: Cannot find name <type>' during compilation */
///<reference path="../../typings/index.d.ts"/>
import {bootstrap} from "@angular/platform-browser-dynamic";
import {AppComponent} from "./app.component";
bootstrap(AppComponent);
app.html, app.component.ts und main.ts sind in src/app Ordner.
Hier ist mein gulp.js auf Projekt-Stammdatei, die die Typescript-Dateien und auch schiebt nodemodules in lib Ordner erstellt:
const gulp = require("gulp");
const del = require("del");
const tsc = require("gulp-typescript");
const sourcemaps = require('gulp-sourcemaps');
const tsProject = tsc.createProject("tsconfig.json");
/**
* Remove build directory.
*/
gulp.task('clean', (cb) => {
return del(["build"], cb);
});
/**
* Compile TypeScript sources and create sourcemaps in build directory.
*/
gulp.task("compile",() => {
var tsResult = gulp.src("src/**/*.ts")
.pipe(sourcemaps.init())
.pipe(tsc(tsProject));
return tsResult.js
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("build"));
});
/**
* Copy all resources that are not TypeScript files into build directory.
*/
gulp.task("resources",() => {
return gulp.src(["src/**/*", "!**/*.ts"])
.pipe(gulp.dest("build"))
});
/**
* Copy all required libraries into build directory.
*/
gulp.task("libs",() => {
return gulp.src([
'core-js/client/shim.min.js',
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'reflect-metadata/Reflect.js',
'rxjs/**',
'zone.js/dist/**',
'@angular/**'
], { cwd: "node_modules/**" }) /* Glob required here. */
.pipe(gulp.dest("build/lib"));
});
/**
* Build the project.
*/
gulp.task("build", ['compile', 'resources', 'libs'],() => {
console.log("Build finished ...")
});
In src Ordner habe ich systemjs.config.js und index.html Dateien
systemjs.config.js Datei, wo ich map to point Build-App habe, da ich es nicht auf die Dateien, die in src/app sind zuordnen möchten. Im Ordner build/app, die nach schluck Build-Task bewegt werden oder von App-Bau nimmt sie von tsconfig.js und zu OutDir bewegt Ordner zu erstellen:
(function (global) {
// map tells the System loader where to look for things
var map = {
'app': '../build/app',
'rxjs': '../build/lib/rxjs',
'@angular': '../build/lib/@angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' }
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade'
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function (pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
};
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) {
global.filterSystemConfig(config);
}
System.config(config);
})(this);
meine tsconfig.json Datei in Projektstamm:
Oben bin ich exculding node_modules und Build-Verzeichnis, das ts-Dateien kompiliert und sie in Build/App-Ordner platziert.
Meine typings.json Datei im Projektstammordner:
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160602141332"
}
}
Meine package.json Datei im Stammordner:
{
"name": "angular2framework",
"author": "Vijender Reddy",
"version": "0.1.0",
"scripts": {
"postinstall": "typings install",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.3",
"@angular/compiler": "2.0.0-rc.3",
"@angular/core": "2.0.0-rc.3",
"@angular/forms": "0.1.1",
"@angular/http": "2.0.0-rc.3",
"@angular/platform-browser": "2.0.0-rc.3",
"@angular/platform-browser-dynamic": "2.0.0-rc.3",
"@angular/router": "3.0.0-alpha.7",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.3",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.12",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"del": "^2.2.0",
"gulp": "^3.9.1",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-tsc": "^1.1.5",
"gulp-typescript": "^2.13.6",
"path": "^0.12.7",
"typescript": "^1.8.10",
"typings": "^1.3.0"
}
}
Meine Seite index.html die in src-Ordner:
<html>
<head>
<title>Angular 2 TypeScript Gulp QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="../build/lib/core-js/client/shim.min.js"></script>
<script src="../build/lib/zone.js/dist/zone.js"></script>
<script src="../build/lib/reflect-metadata/Reflect.js"></script>
<script src="../build/lib/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<app>Loading...</app>
</body>
</html>
Ich zeige rsjx und zone.js aus dem Build-Verzeichnis, das aus der gulp-Build-Task nicht aus node_modules erstellt wird.
Wenn ich betreibe meine Anwendung sollte es holen standardmäßig index.html Datei aber es holen Sie es nicht und ich bekomme Fehler:
(verbotene) http://localhost:34756/ fehlgeschlagen Ressource laden: der Server mit einem Status geantwortet jedoch von 403 (Forbidden)
wenn ich die Anwendung laufen ließe, wenn ich in index.html Seite bin, kann ich die app laufen, aber der uRL-Pfad ist: http://localhost:57722/src/index.html
ist src/index.html :(was ich nicht will .. Ich möchte index.html als Standard und die URL http://localhost:57722 sollte funktionieren auch wenn ich auf irgendeine Datei im Projekt nicht nur auf index.html bin. Es sollte automatisch aus dem Build-Verzeichnis auswählen, das von der Schluck-Build-Aufgabe erstellt wurde.
Jede Hilfe wird geschätzt.