Trying to run Angular 2 app. Created empty project in Visual Studio 2015 in
.NET 4.5.2 version and used tsconfig.json to compile all typescript into
copy into build directory and I am referencing files from build directory
lib folder. But its says 404 main.js not found.
I need a way to serve the content from build directory instead of src/app
directory where typescript files exist.
my tsconfig.json which compile ts files into js files in build/app directory
{
"compilerOptions": {
"outDir": "build/app",
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"build"
]
}
Index.html:
<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="lib/core-js/client/shim.min.js"></script>
<script src="lib/zone.js/dist/zone.js"></script>
<script src="lib/reflect-metadata/Reflect.js"></script>
<script src="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>
But here in index.html it is trying to look for main.js file in path src
http://localhost:8303/src/app/index.html, but main.js is compiled and
stored in build/app directory how do i reference it in my code.
sysstemjs.config.js
(function (global) {
// map tells the System loader where to look for things
var map = {
'app': 'app',
'rxjs': 'lib/rxjs',
'@angular': '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);
Gulp.js file:
/// <reference path="node_modules/core-js/client/shim.min.js" />
/// <reference path="node_modules/core-js/client/shim.min.js" />
const gulp = require("gulp");
const del = require("del");
const tsc = require("gulp-typescript");
const sourcemaps = require('gulp-sourcemaps');
const tsProject = tsc.createProject("tsconfig.json");
const tslint = require('gulp-tslint');
/**
* 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("Building the project ...")
});
**I found solution using lite-server i mean run code in Visual studio code:
In bs-config.json file:
{
"port": 8000,
"files": [
"build/**/*.{html,htm,css,js}"
],
"server": {
"baseDir": "build"
}
}**
this would solve issue in VS code. But I want to redirect path to build
directory for visual studio 2015 project.
Anyone know how to do browserSync in Visual studio 2015 so that i can put
above code in place where it will serve contents from build directory
instead of files from src/app.
Any help appreciated
here is the error i get:
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
