Creating Angular Project Using MVC

For creating a new Angular project, some tools are required. Kindly, download and install the below tools.

• Visual Studio (Here, I have to use Visual Studio 2017 community).
• TypeScript
• Node.js

Step 1. Click File >> New >> Project on the Start page or in the File menu.

Step 2. After creating a new project, select Web, choose ASEP.NET Core Web Application, select your project location, and enter your web application's name. Finally, click OK.

Step 3. A new ASP.NET MVC5 Project window will open; there, you have to choose MVC and press OK.

Step 4. Right-click your project and click Add >> New Item. Either press "Ctrl + E" or in the search box, type ''npm". Select the npm configuration file, enter your file name (package.json), and click "Add".

{
    "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"
}

Step 5. Right-click your project and click Add->New Item. Either press (ctrl + E) or in the search box, type ''json" and then select "Typescript JSON Configuration File". Enter your file name (tsconfig.json) and click "Add".

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

Step 6. In Solution Explorer, right-click the package.json file. Click "Restore Package" and click "Install all" The node_modules reference file will be added.

After installing the Restore packages, all node_modules reference files are added to your project. We have no need to click include our project because it is added by default.

Step 7. Similarly, select the "JavaScript File", enter your file name (systemjs.config.js ), and click "Add".

(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.