Creating Angular Project Using MVC

{
    "name": "Angular4",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "dependencies": {
        "@angular/common": "^4.0.1",
        "@angular/compiler": "^4.0.1",
        "@angular/core": "^4.0.1",
        "@angular/forms": "^4.0.1",
        "@angular/http": "^4.0.1",
        "@angular/platform-browser": "^4.0.1",
        "@angular/platform-browser-dynamic": "^4.0.1",
        "@angular/router": "^4.0.1",
        "core-js": "^2.4.1",
        "rxjs": "^5.3.0",
        "systemjs": "^0.20.12",
        "zone.js": "^0.8.5"
    },
    "devDependencies": {
        "@types/node": "^7.0.12",
        "http-server": "^0.9.0",
        "typescript": "^2.2.2"
    },
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
}

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": ["es2015", "dom"],
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true
    }
}

(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: 'app',
            // 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'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

Step 8. Add Index file. Here, I have no need to add an index.html page but I have to change the index and cshtml page code. Go to Views --> Home --> Index.cshtml file and replace the code.

<!DOCTYPE html>
<html>

<head>
    <title>Angular4 </title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function(err) {
            console.error(err);
        });
    </script>
</head>

<body>
    <hello>Angular4 Loading PleaseWait...</hello>
</body>

</html>

Step 9. Add more TypeScript files the same way. Here, I have added three *.ts files.

• app.module.ts
• app.component.ts
• main.ts
• app.component.html

The main.ts file code is shown below.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

The app.module.ts file code.

import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { Component } from './app.component';
import { routing } from './app.routing';
import { MockBackend, MockConnection } from '@angular/http/testing';
import { BaseRequestOptions } from '@angular/http';

@NgModule({
    imports: [BrowserModule,
              FormsModule,
              HttpModule,
              routing
    ],
    declarations: [Component],
    bootstrap: [Component]
})
export class AppModule {}

The app.component.ts file code is below.

import {
    Component,
    Directive,
    forwardRef,
    Attribute,
    OnChanges,
    SimpleChanges,
    Input
} from '@angular/core';
import {
    Subscription
} from 'rxjs/Subscription';
import {
    FormGroup,
    FormControl,
    NG_VALIDATORS,
    Validator,
    Validators,
    AbstractControl,
    ValidatorFn
} from '@angular/forms';
import {
    Router
} from '@angular/router';

@Component({
    selector: 'hello',
    templateUrl: '<h2>Welcome to Angular4 World</h2>',
})
export class Component {}

The app.component.html file code is below.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
</head>

<body>
    <h2>Welcome to Angular4 world !</h2>
</body>

</html>

Finally, I have added all config, reference files, and source code. If you Rebuild or Run (F5) the project, all TS code automatically regenerates as .js file because some browsers do not support the TypeScript files.

After running the project, it automatically adds app.module.js and app.module.js.map file in the Solution Explorer.

Finally, I have done the Angular4 basic configuration. In the next article, I’ll explain the components and services.